Skip to main content

Lots of White Space

You probably noticed that the interon design website is pretty simple.

It looks like this for a reason. I wanted to use this site to illustrate the point that you can have an easy to use design that is clean, cohesive, and attractive across any number of platforms, from mobile, to tablets, to desktops.

I wanted to create something that takes my design philosophy of less is more to a higher degree than usual. It is an exercise of sorts to see how few resources I can utilize in the construction, and how fast can I make it all download.

Unfortunately, many website developers let the bells and whistles of the design overshadow the sites' purpose and function. I feel like they are designing a site for other designers, rather than the target audience for the site. Just because they can do something, doesn't mean they should. As a result, visitors quickly tire of the slow page downloads and confusing structure and with one click of a button they leave, never to return.

K.I.S.S.

There is really very little going on here. There is only one image on the page-the logo at the bottom. While the interon design at the top looks like it could be a logo, it is in fact text. The font selected matches the actual interon design logo, and it has been styled to appear in blue with extra spacing between the letters.

The , , , and in the page footer and elsewhere also look like graphics, but they too are fonts, albeit a special font that yields icons instead of letters. These icon fonts are used to lend visual interest and visual cues, but they download much faster than graphics.

The design of the page yields no surprises, and that is a good thing. Visitors to websites hate surprises. They don't want to have to learn something new just to view a website. They want their experience on one site to be just like their experience on other sites they visit. That is why the logo is in the top left. That is why the navigation is layed out horizontally across the top, and that is why the main content of the page is on the left.

Download Speed

This page utilizes the following files to create what you are seeing here:

  • 1 HTML file
  • 1 CSS file
  • 2 font files
  • 1 image (the <id> logo at the bottom)
  • 1 javascript file
  • 1 google analytics file
  • 17 additional external files that allow for the functionality of the facebook and LinkedIn share links.

These 24 file requests total 341KB in size, and require only .632 seconds to load for the first time.

However, more important than the total load time is the above the fold load time. In other words, the time it takes the content at the top of the page (what you see first) to become visible. That is even faster, which means it appears the page loads nearly instantaneously.

Speed is a Rankings Factor

Visitors like fast websites. Therefore Google likes fast web sites. Download speed is one of the many factors Google utilizes to rank websites on their search results page. In fact, Google has a service called PageSpeed Insights , which allows webmasters (or anyone else for that matter) to enter a web address and receive a score for the speed of the page when viewed in both mobile and desktop browsers.

By making this site clean and simple, and following a number of design and development best practices, the site scores 99/100 in PageSpeed Insights.

Summary

This website is an exercise in simplicity, speed and standards compliance. As my work can attest, that doesn't mean your site will be an experiment like this one, but it does mean that same philosophy will be applied in order to maximize the visitors user experience and the site's exposure on Google.

Share


Learn More