Some argue that website design should be considered as an art form in its own right. While most of us have far more modest ambitions, it’s still worth noting that the intricacies of website development and the attention to detail it demands could well be at par with what an artist invests on his work, if not more so.ome argue that website design should be considered as an art form in its own right. While most of us have far more modest ambitions, it’s still worth noting that the intricacies of website development and the attention to detail it demands could well be at par with

The fact that designing and launching a website has become very easy in the 21st century shouldn’t lull you into thinking that it’s all a breeze. Not if you want to create a website that will truly cater to the needs of your audience.

Design and interactivity play crucial roles in the success of a site. You will be surprised by how much these things depend not a highly evolved visual aesthetic (though that undoubtedly helps) but largely on careful consideration of different elements.

Let’s take a look a look at them right here:

1.  Use icons only where appropriate

You’ve heard the saying, “Too many cooks spoil the broth.” Now, here’s something you haven’t heard before: “Too many icons ruin the site.” But just because it’s gone largely unarticulated in popular culture doesn’t mean that it’s not true. On the con- trary, stuffing a webpage with icons can make browsing a clutter-filled prospect, one that could confuse the audience more than guide them.

This icon can mean “click” or it can have something to do with changing your input. Which is it?

The ideal then lies in reductionism– eliminating as many icons as possible, leaving just the necessary ones. Sometimes, the icons could replace text-bursts entirely, bringing more space to the page. A couple of things to keep in mind about icons are mentioned here:

You can deliver the icons in the SVG (Scalable Vector Graphics) format. The format is great for creating websites that will be viewed on multiple devices-the icons can be resized according to your requirements, and that too without ‘fattening’ the file size.

Trying simple animated icons could also be a great idea(provided you don’t go overboard with it). You can animate SVG files using CSS. This way, you needn’t wallow in a lot of extra scripts to bring in some decent effects.

1. Never under-estimate the significance of the font size For one thing, the font should go well with the overall design of the If the design template falls on the serious side of things but the font choice is… erm… Comic Sans, it may not be a good fit. Perhaps more important is the element of readability. There are plenty of websites out there with great content but you don’t feel like reading just because of the poor font selection.

Here are a few pointers for avoiding mistakes with fonts:

There are certain typefaces that have thin letterforms. These work well enough if the screen size is large but when scaled down to the smaller screens of a handheld device, the font is the equivalent of ants on the lawn of your home when viewed from the first floor balcony. Okay, maybe not that bad but bad enough. Make sure that you add to  the height of a line of text in direct proportion to the width of the text column. This will make it easy for the  reader to find the beginning of the subsequent line. While the default font size on most browsers is 16 pt body type (and it affords decent readability on all screen sizes), feel free to experiment with the font size.

The heading should be at least 1.6 times bigger than the text that comes under it. Don’t make your website visitors reach for their magnifying glasses

The colour of the text shouldn’t be overlooked either. Make sure that it contrasts with the background colour of the webpage. Also, ensure a dif- ferent colour for the links to make them stand out from the rest of the text. Visit websites like http://typographica.org/ to make the best font selections.

1. Images should be awesome, so should the download speed It’s imperative that the images used in a website are kick-ass. Sometimes, there’s nothing people like to see more than a well-made image. And as a mode of capturing and holding the audience’s attention, high quality images are indeed But you should be mindful not to sacrifice the page performance on the altar of visual aesthetics. Here are certain considerations:

If you’re designing a responsive web page, keep a hawk’s eye on each and every single visual element on the page. Assess the significance or each piece, reassess, and make sure that only the necessary ones make the final cut.

Things like homepage car- ousels should be included only if necessary. Carousels imply multiple numbers of large images. Not just that, they also call for the Javas- cript to put these displays in motion. The page size can be considerably reduced by foregoing a carousel with four images for a static image.

Once you have taken away all unnecessary images, optimise the remaining ones so that they are apt for web delivery. Make sure to use the right image formats like SVG or PNG.

2.   Ensure scalable navigation

Smooth navigation is one of the trickiest things to pull off in a website- particularly if the menu is rather large or deep. The key issue is not that you cannot devise a good navigation model-it’s that what works on larger screens could be utter chaos on smaller devices.

What this essentially means is that instead or searching for a navigation experience consistent across devices, youare better off creating user-friendly navigation on a step bystep basis: you would have to tweak the steps according to different devices.

While breaking away from the UX convention of being consistent across devices, you should know about the ‘method to the madness’ in this. To that end, here are two pointers:

You should indeed be consistent with certain elements.   Users have to find it easy to get around in the navigation-for instance, with such things as the font, text colour and the labels on the buttons.

The break away from consistency could happen with the way in which the navigation works. For example, whereas a fly-out menu which is accessed when the mouse cursor hovers over it may work brilliantly for desktop visitors, for touch screens and smaller screens, it needn’t be the case. In such instances, alternative functionality may need be applied; perhaps a navigation drawer.

 

3.  Prioritising the content

One thing that’s inevitable is that the user won’t have time to peruse all the content that you put in a website. The user, more often than not is looking for some specific information when they visit a website. This should be the first parameter in arranging the content in your website-with the most relevant or significant information coming at the top and content tapering down in the descending order of significance.

But that’s not all that you should keep a tab on:

For larger screens, you can include an editorial image and maybe even the author’s photo along with the core content. Other elements could include the title of the content piece, the author’s name and the date on which the piece was published.

But then, that’s for bigger screens. For smaller devices, the layout need to be altered. The editorial image, in such a context may even be avoided since it’s not crucial to convey the content. Space-saving is the name of the game here. The author’s photo and the heading need be the only ele- ments listed one below the other on the lead page in the smaller screens.

 

4.  Make the context central to the design

Context in this case can simply be considered as the wealth of information that’s available about the product/service/establishment which the website stands for.

Usually,  a responsive web design implies nothing more than scaling   a single column layout on a small screen to multiple columns as the size of the screen progresses. While that does make sense from a sheer scal- ability perspective, the context in which the content is accessed is not taken into account.

For example, if it’s a website for a restaurant, there would be such content as the menu, reviews, the location and the map. Now, as far as mobile users go the common assumption is that they are either looking for reviews or maybe the map to reach the restaurant. But that assumption will be proved wrong if the user is already at the restaurant. In this case, they might be looking for some other information-like the nutritional facts about each entry on the menu.

The upshot is that even before starting the design process, you should amass as much info as possible about the project-adding depth to the con- text. Then, ensure that it’s easy for the user to collect whatever information s/he is looking for.

 

5.  Remember that responsive design doesn’t mean “for small sizes” but “for all sizes”

For some reason, successful responsive design has come to mean that designs which suit the smaller screens well. While it’s true that more number of people now access the net through mobile and other smaller devices, as even a cursory glance through workplaces show, bigger screens are far from obsolete.

So, in terms of website design, the best option is to adopt the “Mobile First” approach. You will do good to rank the content categories listed there according to your priority and lay these out in the smallest viewport first. Elements can be added as you require when moving to larger devices.

As suggested in the heading, do not overlook larger screen sizes. Not just that, you should also look at sizes between popular breakpoints. Since new devices enter the market almost every day (one estimate puts the number of distinct Android devices available at 24,093), breakpoints that are popular today needn’t remain so even in the near future. This also means that sizes which needn’t be considered at this point could turn crucial further on. So, to reiterate, to achieve something with true scalability, you should focus on the popular breakpoints as well as the gaps between them.

 

6.  Make sure the content is SEO-optimized

It’s hardly enough to have a super-looking website with great interactivity. You should also make your website discoverable by having great content. And certain specifics are to be mentioned about what is meant by ‘great content’ here:

Quality of the content: Don’t just provide content that will be available on a bazillion other websites/brochures. Put across a unique value proposition or information that will make your content stand out from the rest.

Use keywords: Make sure that your content contains keywords through which you want visitors to come to your  website.  Think of what those keywords will be and add them. For instance, if you are a vegetable and fruit vendor, both vegetable and fruit could be keywords. But if you have a special orange supplier who brings you some awesome varieties, you can consider orange too as a significant keyword. You can also try the different keyword planners available online (like the Google keyword planner) to assist you.

Content freshness: Search engines generally are biased towards fresh content. But that doesn’t mean that you can just pile up content after content on a daily basis in the hope that it will give your site a “freshness quotient.” What Google does is, when there’s a sudden surge in search for a particular topic, it would apply the tag “Query Deserved Freshness” (QDF) to that topic. It will then scout for fresh content related to it. The fresher content, in such cases will be given priority in the search results.

That about covers what you need to know about the components that make a rocking website. Hoping to see a savvy website online soon.