Typography On The Web

When it comes to creating a good web design, communication is key. You want your users to be able to understand and navigate your site as quickly as possible. One of the key factors in creating great communication on the web is typography. Typography is the study of text, with the goal of making it as readable as possible. By optimizing your text by using typography, you also optimize the readability, accessibility, and usability of your site.

Keep the Number of Fonts to a Minimum.

Having too many fonts on a site can create a messy and unprofessional feel. A good rule of thumb is to just have two fonts, three max. When you add a bunch of different fonts, they start to compete for attention, ruining the readability of your site. Choose a body font and a header font and use those consistently throughout your site. There is no good reason why your homepage should have a different font from your checkout page. Keeping your font consistent will help the flow and UI of your site.

Example of competing fonts

Example of how too many fonts start to compete for attention.

Line Length 

By controlling the number of characters on a line, you can increase the readability of your website. The layout of your site should not decide on the length of your text, it should be a matter of legibility. By following this simple rule of thumb, you can insure the readability of your site.

You should have around 60 characters per line for a legible experience. Having the right amount of characters can help create a neat, sorted look. This is the rule for desktops, for mobile devices you should limit characters to 30-40 per line.

ideal-font-length

Ideal character length for the web.

 

Use a Typeface that Works at Various Sizes. 

Your users are going to be accessing your site from different screen sizes and resolutions, so it’s important to choose a font that works well at different sizes and weights. It helps to maintain readability. Some fonts look fine at larger sizes but are unreadable at smaller sizes.

Example of fonts at smaller scale

Avoid all Caps 

All Caps are fine when you are using it in a limited context. For example, logos and headings. But if your text is around four or five sentences, don’t capitalize it. It greatly slows down reading compared to lower-case type.

Be aware of the space between lines.

In typography, this is referred to as leading. By increasing the leading, you are adding to the white-space between your lines of text. Using proper leading you can increase comprehension up to 20%. As a rule, leading should be about 30% more than the character height for good readability.

Make Sure to Have Sufficient Color Contrast

Make sure your text color contrasts with your background color. If the colors are too similar, it lowers the users’ ability to scan and read your copy.  The W3C recommends the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Once you choose your color, be sure to test it. 

Conclusion

Good typography can help your website feel crisp and polished. Bad typography can make your site confusing and cluttered. By following these rules and making good typography choices you can maximize legibility, understanding, and readability of your website.

Want more graphic design tips? Check out our Graphic Design Tips for Making A Website.

post

CDNs and how they improve the speed of page loads

If you look at any resource that discusses performance of websites, or you view the suggestions from a tool that assesses website performance, the use of a CDN or Content Delivery Network, is always on the list (and usually right at the top).

We’ve mentioned in previous blog posts related to our zeckoShop releases that we are always looking to improve performance from the backend to the frontend and we’d like to share with you one way we’ve done this, which is our usage of CDNs to serve up the assets from our websites (assets are files such as images, scripts etc).

So why is this such a great thing? Let’s outline the benefits of using CDNs and it’ll be obvious how this will improve page load speeds so dramatically.

Multiple Domains – More File Downloads

Browsers will only download a certain number of files at a time from a single domain, or web address.

CDNs also have their own domain, different from your website, meaning that the browser can download files from your website and files from the CDN at the same time, thus cutting down the overall download time when loading a page.

We’ve taken this one step further by utilising three CDNs, one each for:

  1. Images
  2. zeckoShop specific assets
  3. Third party assets

It’s fair to say this has had a dramatic effect on performance.  

Pre Caching of Files – Less File Downloads

When users browse sites on the Internet that utilise a CDN, those files are then cached in the browser. When they then visit your site, and it uses any of these third party files, the browser won’t need to download it again and will used the cached copy instead.

The third party files we use are for very popular frameworks and the CDN that serves them is one of the most popular available so there’s a really good chance as users visit the homepage of your site for the first time, or the first time in a long time, some of the larger files are already cached in the browser and don’t need to be downloaded again.

Distributed Servers – 100% Availability

When using a CDN to serve files there are two worries most people have:

  • What if it’s actually slower since files are being served from somewhere in the world that might be far from where the user is browsing a website, and
  • What if the CDN goes down and can’t serve files, thus rendering my website useless

The CDNs we use actually has multiple servers all around the world and when serving files will do so from the best and closest server to the user browsing your site. Also, since CDNs are optimised to deliver assets and because of the previous two points, it’s actually faster than serving the files locally.

And, because of the distributed servers, if one of them goes down for a period of time, the others are still up and available to serve your sites assets 24/7.

Think of it like automatic load balancing and redundancy for your assets, built right in without having to worry about high costs and complex setup.  

DDoS Protection – Uptime Guarantee

Distributed Denial of Service, or DDoS attacks are on the rise and impacting website uptime every day.

Protection against these kinds of attacks is incredibly difficult and is an ongoing concern requiring constant monitoring and staying ahead of the attackers.

CDNs are built to withstand these kinds of attack and even when one is attempted will keep serving files to you without affecting your uptime.

Optimised Images – Decreased File Sizes

Another way we go one step further then most other platforms and services is that your images are heavily optimised when using our platform.

Whether a user is browsing on mobile, using Chrome vs Firefox, the images served are optimised for that device or browser.

We’ve found through our testing that the image optimisation can decrease file sizes by up to 80-90% which is an incredible savings in file size and in turn a huge boost to performance.

On by Default! – Cost Savings

This is one of our favourites.

If you are using another platform for your ecommerce site, or have your website hosted elsewhere, to utilise a CDN would require someone make changes to your backend to support the use of a CDN and on top of that you’d also need to pay an additional fee for the storage and bandwidth associated with the CDN.

We like to make things easy for our clients and prefer to handle all the heavy lifting and details of their website so not only have we built in full support for all of this into our latest version of zeckoShop, we’ve also built the price into the ongoing hosting costs of the website.

What can we say, it’s fun saving money and time for our clients while improving their online presence.

Responsive & Mobile Optimised Websites

When implementing a zeckoShop website we at Terracor have traditionally built a “desktop” oriented design. This meant that the design of our websites were created with only desktop and laptop computers in mind.

More recently however with the increasing use of mobile devices (phone & tablets) to browse the web and purchase products we’ve enhanced our process in order to build sites that look and behave as needed on these devices.

You will hear lots of different terms and phrases used when describing ways to build a website that works well across mobile devices and at Terracor we specifically refer to:

  • Responsive Design
  • Mobile Optimised

So what does each of these mean?

Responsive Design

When we say that your website is designed to be responsive what we are implying is that your website design will “respond” to different screen sizes by adjusting the layout, content & element sizes of items on your website as needed to maintain a proper look and feel.

The best way to describe this is by showing an example site. Below you will see three screenshots from www.iStockPhoto.com which illustrates how their site responds depending on the devices viewing it:

Desktop
iStockPhoto Desktop

Tablet
iStockPhoto Tablet

Smartphone
iStock Photo Smartphone

A couple of important details are worth mentioning:

  1. The site did not respond based on the devices viewing it but on the screen size. You can test this for yourself by going to the website on your Desktop and shrinking the browser screen. Notice how it adjusts and adapts as you change the size.
  2. Also, the site being displayed in the screenshots is the exact same site with all the same content. It may look like different versions but due to the adaptive nature of responsive design it adjusts itself appropriately based on the screen size it’s being viewed on without the need for an alternative site or design.

Mobile Optimised

So once you have a responsive website you may be left wondering how well your site behaves on mobile devices which leads to two main questions:

  1. What is mobile optimisation?
  2. Why should my website be mobile optimised?

So let’s start with the what: simply put, mobile optimisation gets your responsive website and optimises several aspects of it to allow for a great user experience on mobile devices i.e. smartphones & tablets.

As an example here are some optimisation techniques we employ:

  • Images: here we remove unneeded images, shrink dimensions and compress the files sizes, allowing for quicker loading times over mobile networks
  • Home page: here we build your home page specifically with smaller screen sizes in mind which allows for removing unneeded elements along with changing the layout, content & widgets as needed
  • UI: here the general user interface of the site behaves specifically with mobile devices in mind. For instance the cart/checkout contents are stacked in a mobile friendly way to make viewing and modification a more natural experience on these devices

An important note here is that although the mobile optimised site is responsive, the changes made to optimise it on mobile only appear on those devices. Unlike the iStockPhoto example previously, if you shrink your desktop browser you will not see these changes in action as their activation is dependent on the actual device viewing the site.

Let me show a really good example of a site that behaves very differently on mobile as opposed to desktop: www.etsy.com. Note, only the top portion of each page is shown below for brevity but feel free to view the site on different devices and browsers to see this in action yourself.

Desktop

Etsy Desktop

Smartphone

Etsy Smartphone

You’ll notice here how the Smartphone version isn’t simply the desktop version with slight changes but in fact makes the following large changes:

  • Several pieces of text have been removed
  • Search has been made more prominent
  • Images are no longer heavily used
  • Categories are presented at the top to the user and simple icons used to illustrate

Next let’s discuss the why: there are dozens of reasons why you should have your site optimised for mobile and here are just a few:

  • Google will like you more: having a responsive design is a must with Google’s search engine ranking as otherwise you will be heavily penalised for not having one. In addition to this, having a website that behaves and performs well on mobile devices will also improve your Google ranking
  • User experience: by tailoring the user experience specifically for the device being used you can ensure that those users of your site have the best experience possible
  • Increased conversions: following on from the previous point, since you can optimise for mobile users you can streamline the whole process to make sure they see only the information they need and can navigate the shopping process as efficiently as possible
  • Number of mobile users: Over half the traffic on the web now is through mobile devices so it’s becoming a necessity to ensure you are catering to and building your website with this set of users in mind as you move forward

Conclusion

So should you stick with just a responsive site or go the extra mile and optimise for mobile?

This of course depends on your needs, business, user base etc but our recommendation with the pace of Smartphone adoption and the need to keep your website modern is to cover all bases and ensure you give the best user experience to anyone on your site no matter what device they are on.