Web Design – Top 10 Ways to Make Your Site Awesome

Posted on Posted in Web Design
Responsive Web Design

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!

There are several ways to maintain backwards compatibile web design, but the key thing to remember is to utilize feature detection! When transitioning to HTML5 or the latest ECMAScript, remember to check first if the browser supports the new and improved method, and if not, leave your original code in as a backup! A good library for HTML, Javascript and CSS feature detection is Modernizr. If you are building a completely new site, you will have to implement things twice, but the extra work pays off in the end with happier visitors!

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.

6. Optimize Images, CSS and JavaScript

You may have heard the term “minification” before, and it is something that every site should utilize. In the case of JavaScript, Google’s Closure Compiler is a great place to start. Minification can make your JavaScript files smaller (which saves on bandwidth costs and load times) and even speed up their execution (faster parallax and those pretty spinning newsletter forms!). CSS and Images can also be minified and compressed, respectively, to make your pages load faster. And with search engines getting more and more complex, this extra web design step can actually boost search rankings. Which leads us to…

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.

When designing your site, try to envision how it could be morphed to accept right-to-left languages in a natural-looking way, and develop the appropriate CSS and JavaScript to support that, preferably on the fly via AJAX or i18next!

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.

11. ???

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.