Form Follows Function

Tips on how to make your website “work” as good as it looks.

Though the principle it communicates can be traced back to the Roman Empire, it was around the turn of 20th century that the phrase “form follows function” took root in our built environment as architects like Louis Sullivan (the “Father of Skyscrapers”) eschewed “decoration” and focused instead on the clean lines and minimal design of buildings you and I would consider “Modern” some 100 years later.

The idea that aesthetics should be driven by practicality laid the foundation for soaring towers and simple gardens, but there’s no reason the same principle can’t be applied—with equally impressive results—to your website today.

Whether you’re trying to breathe new life into an old website or actively planning your next one, here’s three ways to approach some important functionality… and look good doing it.

 

1. Decrease Loading Times Without Sacrificing Bold Imagery
Today’s user expects your site to load fast: they’ve grown accustomed to enjoying what they’re looking for within milliseconds of clicking the link promising it. To make matters worse, our attention spans continue to shrink alongside any amount of patience previously afforded a progress bar.

To hold our attention longer, designers have increasingly employed full-screen videos and large photography to great success. As it turns out, bigger really is better—but a big impact risks a big wait if you’re not careful.

Here’s a few tips to make a site that grabs attention quickly, and then holds it with bold imagery and/or video:

  • Optimize your images using a tool like Google Pagespeed or one of our personal favourites, JPEGMini.com.
     
  • Adding a filter of sorts to your video can make up for the lower resolution sometimes necessary to increase loading speed. We’ve seen (and used) transparent splashes of colour, or a Ben-Day dot treatment work to great effect on many sites.
     
  • Making use of different sized files for different devices and screen sizes can radically improve page load times.

 

2. Increase Your Search Engine Optimization (SEO) Ranking by Designing Your Content
Where your website resides in search engine results can play a significant role in its success or failure. Crafting your copy to ensure you’ve treated it in a manner that encourages readability, shareability and crawling by search engine bots will go a long way in improving your ranking.

To that end, a good designer can set the stage for improved SEO rankings by making the following adjustments.

  • Create Image filenames, descriptions and alternate text are carefully chosen to support your keywords. (Here’s a great image from SEO Moz illustrating the idea.)
     
  • Set up content pages to encourage the use of titles, subtitles and highlighted descriptions and allow for primary and secondary keywords to be added without sounding repetitive.
     
  • Include accompanying promotional imagery to promote the site via social media.

3. Go “Mobile First”
With mobile usage growing yearly it’s imperative that your website functions across devices. To create a great responsive site, work with your designer to build it from its mobile form first, adding features as browsers become “better” rather than trying to figure out what to remove as you move from desktop through tablet down to the smartphone.

This approach will grant you greater empathy for your most “limited” user and force you into boiling your site’s structure down to its most essential. Start with mobile and you’ll quickly relate to the modern architect’s trouble with decoration.

Aside from some of the image optimization we’ve mentioned already, perhaps the most important thing to note when designing from a mobile-first perspective is that mobile use shouldn’t always assume mobility; chances are high that users will be “out and about” when visiting your site on their smartphones, but that won’t always be the case. To get a better idea of how your users are using your site across devices, make sure you have some form of analytics on the site-Google Analytics does a great job—so you can compare behaviour across devices and adjust your design accordingly.

 


Of course, there’s many more tips and tricks to take advantage of when you decide to let your design be guided by functionality, but this should get you started down the right road. Spend time with your strategy team to determine what’s most important for your site to “do” and then work alongside your design and development teams to keep that functionality front and centre. Do this, and you’ll have a site that meets the goals you put before it time and time again… and maybe even impress Louis Sullivan himself.

Want to head further down the road toward a site that "works" as good as it looks? Get in touch and we'll see what we can do!

Originally posted on YouInc.


 

 

James Kingsley is Ellipsis Digital's Creative Director.
In addition to following function, he also follows his heart.