The usability/accessibility aspects of designing any website should be a well thought out series of steps that don’t overburden clients but that help to ensure a polished result while limiting iterations to the extent possible along the way.
In the design process for a recent website that IQComputing built, our web design team wanted to ensure that the content could be reached by anybody, on any platform, using almost any disability browsing assistance software. Here we quickly touch on the thought process that was used in the designing and developing the interface for that new website:
Website Usability
In the design stage of the website’s design we already had in mind that we would need to make the interface as easy as possible for our audience to navigate. For desktop and tablet visitors we add the most important services in a big and bold main navigation (next to the logo) with a sub-navigation readily available anytime a cursor is placed over them. To ensure that the main navigation is never lost even on lengthy pages we decided it would be best to make the navigation “sticky” such that it literally remains stuck to the top of the browser when scrolling. This website usability approach required the need to balance content with navigation so to conserve screen space our team shrunk both the logo and navigation font which in turn made the header area shrink as well.
While some sites are more interested in presenting information to potential customers rather than interacting with them or soliciting calls/emails/etc…, we wanted to discreetly engage customers such that at any point during their experience if they could use a simple and ever-present “Contact” link (even when scrolling) that can be opened from the bottom frame of the screen (no flashy or annoying popups please). Remember, we want to balance website usability with great web design too. With the implementation of these additions we achieved a simple, consistent, and always available navigation without sacrificing content real estate.
Most people hate waiting for web pages to load (we know that we do and since as early as 2009 Google has been clear that there faster loading websites are preferable from an organic SEO standpoint). The faster a page loads the less likely the user will leave that website from boredom or annoyance and search engines not only look at this as a ranking signal but have indicated that page speed is indeed a ranking factor. When developing that new website markup was clean, light, and adhered to W3C HTML5 web standards so that browsers could quickly understand and render code, delivering pages to visitors faster. We also optimized images (large and small), using sprites whenever possible on the website to maximize browser load time. This is especially important from a website usability standpoint when it comes to pages that are image-heavy or where many images are referenced simultaneously on a page at once. In addition to optimizing images, AJAX offered a great way to display content without a page refresh or reloading an entire page. In layman’s terms we can quickly and strategically replace specific content blocks or items with new content in the background without moving away from the page (bonus points for website usability).
Ultimately these practices combined with a higher-end web server can produce very fast page loads (without even getting into file or database caching) along with a quick and easy user experience.
Website Accessibility
Website accessibility is often overlooked or forgotten about as marketers and website owners get carried away with the latest design trends. Our team wanted to ensure that the website could be accessible by anybody, anywhere, on any device (within reason of course, sorry Netscape Navigators – you’re out of luck) which is why we made responsive “layers” a part of the project. Making responsive web design in very basic terms means the website doesn’t deliver different content depending on the screen size being used to view it but rather it automatically adapts the layout to accommodate the limitations or benefits of a given screen size. This also means as the screen size shrinks we need to get of any visual aspects or styles that don’t directly support content while continuing to promote clean, easily legible pages.
Creating an accessible website doesn’t just making it look good on smaller devices; we also wanted to build a web design that would be friendly to visitors with disabilities. Blind visitors using screen readers to navigate websites on the Internet are very much depending on ALT tags (or alternative text) as well as titles when it comes to images as well as poorly defined links. Alternative image text can be used to describe what an image on a page is or means in relation to the surrounding content. At IQComputing, we feel that it’s an important habit to get into when adding images to posts or pages (even when organic search engine optimization isn’t a core component of your project). In addition to ALT text there are also visitors who may be challenged when using a mouse and as such, our development team made it possible to easily move around the various pages with only the use of a keyboard.
Website usability and accessibility should go hand-in-hand but unfortunately they are more often than not an afterthought when it comes to website design. At IQComputing we strive to create the best websites while promoting healthy web standards. Have any thoughts on how website usability can be improved on your own site? We would love to hear from you! Let us know by filling out the form on our Contact Page or by giving our St. Louis web design company a call at 636-594-5552.