How to Arm Your Site for Every Screen and Every Platform: An Introduction to Responsive Website Design

What is responsive design?

Responsive design is the concept of building a website so that the layout of the site adapts and changes according to the resolution of the user’s browser. In plain English, employing responsive design allows you to build a single site that will look just as good on a monitor that’s 2048 pixels by 1080 pixels as it will on an iPhone that’s 320 pixels by 480 pixels and all browser sizes in between without the need to build a separate dedicated mobile or iPhone-specific version of your website. The best way to get a feel for responsive design is to see it in action, and one of the best examples is the Lancaster University website. If you simply open the site in your desktop browser, you won’t immediately notice anything extraordinary. However, if you slowly adjust the size of your browser window, you’ll begin to see how the design adapts to the width of the window on the fly. The change is more than just a straightforward scaling effect; rather, certain key elements within the design shift and transform according to the resolution of the browser. For example, this is what the website looks at 1024 pixels wide. And this is what the website looks like at 640 pixels wide. As you compare the two, you’ll notice that in the smaller version, the two stats next to logo disappear, allowing the quick links, search bar and logo to fit into the width of the browser and remain usable. Also, the “Find a Course” box and the two information boxes are now displayed alongside “Latest News,” which preserves the usability of the tab-based navigation in the main feature. This is what the website looks like at 480 pixels wide. You’ll now notice that the primary navigation transforms from one row of six links to two rows of three links, which ensures that these links remain large enough to be easily pressed with a finger on a touchscreen phone. The quick links are reshaped into a drop-down-style menu that takes up less real estate on the screen but still allows the user to easily access these important links. The search box moves to the bottom of page, and the “Find a Course” box disappears and is replaced with a link to the course search page. On the main feature, the slider changes from tab-based to next/previous-style navigation.

Why is responsive design important?

As you can see from the Lancaster University example, adapting the layout of the site based on the browser’s resolution ensures that all content is easily accessible no matter where or how a user might be browsing. With the explosive growth in tablets and smartphones, IDC predicts that within the next four years, more people in the U.S. will access the Internet via mobile devices than via desktops or laptops. As a result, it’s important to take steps now to make sure that your website is not only accessible but easy to navigate and use on any device and any screen size in order to keep pace with the ever-changing browsing preferences of your clients and customers.

---

Is Your Site Easy to Navigate? Six Ways to Put an End to Dead Ends

Site navigation is one of the more important pieces to successful website management. Unfortunately, there are far more ways to do it wrong than right. If users can't navigate or even struggle to find what they're looking for, they'll move on with the click of the "Back" button - one of those nasty navigation buttons that works all too well. Site navigation doesn't have to be complex, even if you have a great deal of content across lots of categories. With a few simple best practices in place, you can dramatically improve how your site visitors are able to find information and continue interacting with our site.

1. Search bar

Probably the most under-discussed and under-rated feature that every site should take advantage of is a search bar. This allows users to quickly type in product names or anything else they may be looking for specifically. Make sure you check your own search results on occassion to be sure that the feature works and is easy for users to work with. Also, put your search bar in a prominent place in or near the banner of your website. The search bar sometimes gets lost along a sidebar, which can be frustrating for users who just want to find information quickly.

2. Horizontal navigation tools

A common mistake in navigation design is to put the primary links only in a vertical menu in a sidebar. A navigation best practice for modern sites is to use a horizontal menu bar at or near the top of the page. You don't have to put every link to your site in the navigation bar. The key is to provide quick, consistent access to the main pages on your site. If you have an "About Us" page, make sure that this link is always in the nav menu. If you have sub-pages, you can list these links within the "About Us" page, for example, or in a drop-down menu.

3. Common naming

Avoid odd naming of links to primary pages. While this might seem interesting, it confuses some website users and all search engines. For example, avoid calling the "About Us" page something like "Our Info". This could mean your contact information, your address, your "About Us" page - "Our Info" could means lots of things. But we all know what an "About Us" page is. So stick with the standards on this one so that your visitors can find what they need right when they need it.

4. Use arrows for drop-down menus

If you use drop-down menus in the horizontal navigation bar, include a visual cue like a downward facing arrow for these menus so users know a drop-down menu is present. It's annoying when you go to click on an "About Us" menu item and it springs open to reveal several sub-pages, but it's too late - you've already clicked it and now the site is taking you somewhere else. The same goes for sub-sub-menus. You know, the drop-down menus that then open up into another set of options? Yeah, those. From a navigation standpoint, these are fine, but make sure the menu has an arrow that points to the right so users know another menu is about to open.

5. Breadcrumbs

If your site includes multiple categories or a progressive experience (such as filling out a multipage form or a shopping cart), provide breadcrumbs along the top but below the main navigation window. This allows users to tell where they are at in the heirarchy of your site and can quickly jump back a few steps without starting over.

6. Logo goes home

And for those visitors that need to zip back to your home page, make sure the logo links back to your home page. This is just a common practice, but studies are showing that this logo link is used far more often than realized. A common example is after a user has placed an item in their cart, they want to start over and find another item. While many users tend to just go to the search bar or use the breadcrumbs, another prominent set uses the logo link to get back to the home page and start over.

Conclusion

Site navigation is very important and these few, simple best practices can make navigating your site all the more easy. Often it just takes a few small changes to make a big improvement, so get out there, review your site's navigation, and make it easier for your visitors to find what they're looking for.

---