Category Archives: Web Design

This blog category features posts about web design.

Best Web Fonts for 2013

April 19th, 2013

For entirely too long, your font choices when designing a website were pretty limited. Historically, your choices for sans serif fonts were Arial or Helvetica and Times New Roman or Georgia if you wanted to use a serif font. With the advancements in web technology that we’ve seen in recent years (HTML5 and CSS3) you now have more flexibility than ever before when choosing web fonts, so let’s cover a few of the popular choices as well as some new up and comers.

Open Sans – Google Fonts

Open Sans is a very clean font available for free at Google Fonts.  It was designed for the web, which has become a very important aspect to think about when selecting fonts for your site. With people viewing your site on such a wide variety of devices nowadays, it’s important that your text always shows as crisp and clean and possible, which is definitely the case with Open Sans.

Noto Serif – Google Fonts

Noto Serif is another great font available at Google Fonts. This is another one that was designed for the web, and it was designed by Google. They placed a high importance that Noto Serif shows it’s best face on every device and every language, so you can be sure your site will show up nicely just about everywhere.  Noto Serif itself looks great at larger sizes and has several weights, so it could easily be used as a heading/accent font but is also very readable at small sizes so it works for content as well.

Mission Gothic – Lost Type Co-op

Mission Gothic is a great font that works great for headlines and as an accent font in general. Recently released over at Lost Type Co-op, Mission Gothic is versatile sans that comes in five different weights in regular and italic styles. This is a font that actually looks good in all 10 styles, unlike so many others where the bold version appears to added in at the last second. Unfortunately it’s not available as a ready-to-go web font, but if you head over to FontSquirrel.com (a great web font generator) you’ll be ready to go in no time.

Fjalla One – Google Fonts

This one is a display only font from Google Fonts, meaning it’s a font that you should only use for headings and at larger sizes. Fjalla One is a chunky font but it is also tall, which gives it a playful feel that’s still easy to read. This is another font that was developed for use on screen, so it looks very good at all sizes and is a pretty flexible display font to work with, especially on blogs or sites that are a little more laid back.

Libre Baskerville

Libre Baskerville is a modern take on a classic font, optimizing a couple of things so that it shows up well on modern devices.. The font was actually designed by Pablo Impallari but is now available at Google Fonts as well. As Pablo puts it on his website, “Libre Baskerville is webfont optimized for web body text (typically 16px). It’s based on 1941 ATF Specimens, but it has a taller x height, wider counters and minor contrast that allow it to work on small sizes in any screen.” Basically, all that means is that it shows up very nicely on your desktop, your tablet, and your phone.

There are a billion fonts out there nowadays, and a lot of them are great – but even more of them aren’t any good at all. Be careful when choosing your web font, and keep in mind that in today’s world you need to make sure that it shows up the same everywhere (computer, phone, refrigerator…) because unfortunately fonts sometimes don’t show up anything like they are supposed to.

What’s your favorite new web font? Be sure to let us know in the comments.

Jack Nycz is a front-end web developer at Southern Web Group.  

Four Ways To Make Your Web Design Simple For Your Users

April 7th, 2013

When it comes down to it all, web design should be user centric. This means that every aspect of your web design should mean that they are managing to make the action of their choice easier and faster than before. To do this you should first look to make your design simple. By making a simple design you’re making life easier for your users, but also for your business.

To really achieve this there are certain things you should ensure you are doing, this article will describe what a few of these are.

Make Important The Priority

All businesses vary but one theme is common. The main purpose of every business is to make money. In most instances, to do this you need to make effective web design. This means if your website’s priority is to gather leads for a real estate business then all of your focus should go into this area.

There are many ways to do this but one is to have an option on the front which segregates the consumers into different batches. For example through your design you could give them an option to choose by the type of house or pricing available through the website. It might also include a subscription box to get into contact with an agent for the best results.

Scrap What Doesn’t Work

Through your testing you’re more than likely to find parts of your website that are hard to use and don’t help your business objectives. When you come across a situation like this, you should always be willing to improve upon it or completely scrap it.

For example, if you are sending visitors to a specifically designed web page but it converts poorly it might be easier to actually send the traffic somewhere else, and work on a new concept.

Be Relevant Above The Fold

One area of web design that is the most important on any website and the one which the users will see first, is above the fold. The fold is the part of the website that will help your users know exactly whether they are staying or leaving. This part of the website should be clean and contain your unique value proposition. If you’re currently offering a coupon, then you should advertise this fact and that’s also true if you offer free shipping.

Don’t Go Too Off Brand

One mistake that plenty of websites make is that they will confuse creativity for being irrelevant. One thing that you shouldn’t do is go too overboard with varying colours, by doing that you can confuse your users and cause them to lose trust in you. Try and keep all of your branding relevant and that goes for your colours also.

These four tips will ensure that you stay on track and are always thinking about your users. By following the advice above it will give your users a reason to stay on the website, find it easier to navigate and ultimately purchase from you.

This post is by Kev Massey from seo3D. Kev is the UK SEO Director of seo3d.org who provides free Google search engine optimisation tips through their blog.

How to Make a Website

December 23rd, 2012

Seth Godin is considered by many as “America’s Greatest Marketer,” and his marketing blog is perhaps the most popular in the world.

In a blog post published today titled, “How to make a website: a tactical guide for marketers“, Godin advises his readers on his approach to building websites.

Some of the highlights:

  • Virtually all websites are not on the cutting edge of technology. You’re doing something that’s been done before, at least technically.
  • Find the tech elements you need by browsing the web. Make a list–I want menus that work like this site, a shopping cart that works like that site, a home page that works like this one.
  • Once you’ve shared your [website presentation document] with the team, the question is simple, “if our website works just like this, do you approve of it?” Don’t start coding until the answer is yes.
  • Hand the Keynote doc to your developers and go away until it’s finished.

Unfortunately, all too many websites go off the rails because the opposite plan is put into place.  Consider the following course of action before starting your next website project:

  1. Review other websites for elements you want to be sure to include in your site. List these required features.
  2. Review other websites for desired features and functionality and then create a comprehensive list of “must haves”.
  3. Create a list of 5-10 keywords that are imperative to the success of your website.
  4. Create a document that includes the text and sample images. Be sure to include the keywords listed in Step 3 in this process.
  5. Shop the document around your office to make sure all parties agree this is the appropriate message and tone for your audience.
  6. Once you’ve spelled out the necessities and requirements, get out of the way and hire an experienced designer to execute your plans.