There are many different approaches to web design, itself a broad topic extending from such basic drudgery as page layout all the way to the farthest reaches of human creativity and aesthetics. From the pixel-perfect image alignments and framesets of the 1990s to the fully responsive layouts of today, practices and paradigms have shifted in countless ways, along with the underlying technologies which support them. This flux will continue well into the future, but for now, this list of ten key components of awesome web design serves as a rock-solid foundation on which every site should be built.
And of course, if you’d like assistance implementing these features on your site, we can help!
1. Responsive Web Design
Originally, there was only one device to support as far as websites went: a desktop CRT monitor running at 800×600 (or even 640×480!) resolution. And as far as web design and development went, that made things quite simple indeed! Alas, such simplicity is not meant to last. With the myriad ways a person may visit a site, be it on their PC, smartphone, or tablet, on an endless array of resolutions, it has become common for sites to display poorly for many people. Responsive Web Design fixes that problem.
As a rule, no matter the resolution or device with which a person visits a site, it should present itself in a consistent way. A good example of this can be found at responsivedesign.is. And it’s a great resource for studying how to implement Responsive Web Design, too!
2. Utilize HTML5 and the Latest Browser Technologies
With the advent of HTML5 and its widespread adoption by major browsers, a host of features have become possible (or in some cases, simpler to implement). Streaming audio and video, graphics acceleration, and large caches of local storage are all easily accessible. Leveraging these technologies provides a rich and rewarding user experience for your visitors. Read up on it at html5rocks.com.
3. Keep Backwards Compatibility
However, with all these shiny new technologies and browser capabilities, we sometimes forget that not everyone updates as soon as Google/Mozilla/Microsoft tells them to! Unless you want to alienate a large chunk of potential visitors, you need to provide backwards compatibility with older browsers. Luckily, HTML5 is inherently backwards compatible: if a feature is missing, it won’t break anything: it simply won’t work!
4. Balance Aesthetics and Performance
We all know that its fun to watch menus slide down and fade in, or have an email newsletter form that bounces into view after ten seconds. But having too many such visual “enhancements” actually decreases the performance of your site! A notorious example of this is parallax scrolling, which in a nutshell is an effect where several parts of the page scroll across at different speeds. While it can be beautiful, it usually ends up causing the page to load slowly and scrolling to visibly stutter.
Be cautious when adding pretty aesthetic animations, and remember that sometimes “less is more”. For a good example of web design with proper parallax scrolling, visit Stellar.js, or even our homepage!
5. Have a Concise Color Scheme
Sometimes you have to return to basics, and a good color scheme is as basic as it gets. A good web design will have 2-3 dominant colors and 3-4 secondary colors maximum. Everything else should be a variation on those colors, so that the eye is not overwhelmed. Not much else to say here, except that color‑hex.com is a great resource.
7. Maintain a Solid SEO Foundation
Usually people think that SEO is the job of a specialist or a programmer, but a lot of SEO best practices have to do with layout and planning at the web design stage. Having an awesome website is useless if no one visits it, and the best way to gain new visitors is through successful organic searches on popular search engines.
Yoast has some great tips on building successful SEO practices into your web design.
8. Support Internationalization
So you have followed the above steps, and your site is really coming together. Excellent! But you realize that a large number of your new visitors are from foreign countries. Sure, they probably can read some English, but wouldn’t it be great if they could enjoy your content translated into their first language? The problem from a design perspective comes with right-to-left languages, like Arabic or Hebrew: a site is usually laid out assuming that text flows from left to right.
9. Implement Printer-friendly CSS
Now it comes time to print out that lovely informational article on your site, except that it uses a full ink cartridge to print out only half the article! CSS can target the destination display, and a printer is considered a destination! Rather than have the familiar printer-friendly-page, have a printer-friendly CSS stylesheet in place, so that if a visitor prints your page, it auto-magically prints out the printer-friendly version!
10. Watch the Typesetting
A lot people will have heard of the HTML entity, which is another way of putting a space character into an HTML page. They might use it to have multiple spaces in a row, since HTML documents ignore any adjacent spaces after the first. However, it has another use: proper typesetting! Take for example a long address, such as 1600 Pennsylvania Ave NW Lincoln Room, Washington, D.C. 20006. On a mobile device, this line might wrap inappropriately between Lincoln and Room; it would be better to wrap the line earlier, just after NW, so that “Lincoln Room” is together on the next line. This can be achieved with between Lincoln and Room, since putting instead of a space instructs the browser to “never wrap on this space”. Essentially it makes “Lincoln Room” a single word. Proper placement of &bsp; is a small change that can make a big impact on the appearance of professional web design.
So, have we hit on everything you feel is necessary to amazing web design? Let us know in the comments if you have a different opinion or another way to make your site awesome!
Or if you’d like assistance implementing these features on your site, contact us for a free consultation.