1-888-959-PAPA [7272]
24/7/365
Top

The Ultimate Guide to Responsive Website Design: Build Your Website with Usability in Mind

HostPapa Blog / Business  / The Ultimate Guide to Responsive Website Design: Build Your Website with Usability in Mind
20 Sep

The Ultimate Guide to Responsive Website Design: Build Your Website with Usability in Mind
Share

(Last Updated On: July 13, 2017)

I get excited seeing the great websites created by our HostPapa customers. If you just registered your domain with us – welcome! I’ve got a few tips as you start to build your website.

The Ideal Page Load Time Is…

In 1993, researcher and expert on user experience Jakob Nielson talked in “Need for Speed” about three important limits to response times, which are still relevant more than 20 years later:

  • Instantaneous response: It takes 0.1 second for a user to feel the system is reacting to something he or she did
  • Delayed response: In 1 second, users can sense a delay but still feel in control of the computer, like they are “driving”
  • Lost response: Within 10 seconds, users no longer feel in control of the computer; longer than 10 seconds will cause them to bounce from the site.

To test your website’s load time, you’ll find a number of web-based apps that will test your URLs for free. Google has a free tool for testing page speed that comes with recommendations for your Webmaster.

Responsive Web Design Is Not Optional

Business Insider reported in May 2015 that online search queries via smartphone surpassed desktop searches for the first time in the U.S. That means your website must have a responsive design that adapts to every screen size. HostPapa offers hundreds of templates that are optimized for phone, tablet and desktop views.

To test how your site will look on various screens, you’ll find many free options such as:

  • mattkersley.com/responsive
  • responsinator.com
  • responsivedesignchecker.com

Conduct Usability (UX) Testing On A Budget

When a new visitor comes to your website it has to be easy for them to move around and quickly find what they are looking for. Try to follow the “three click rule” – a visitor should be able to find whatever he/she is looking for in no more than three clicks.

Keeping your navigation and website simple benefits your site’s search engine optimization (SEO). It creates a better UX design for the ultimate user experience. If human users have problems navigating your site, then so will search engines, which can negatively impact your results in search engines.

Not all small businesses can afford to pay experts to evaluate their websites and provide usability reports, and really, you don’t need to. Reach out through your network of friends, family and coworkers to test your website. Provide them with a short list of tasks that you’d like them complete, including sending a help message, buying a specific product (you’ll provide a dummy product or reimburse costs), sharing a page via social channels, searching your site, etc. Set up a spreadsheet with columns for URL, evaluator’s name, date of evaluation, comment and suggestion for improvement.

Create a Visual Hierarchy

What is the most important action you want visitors to take? Do you want them to fill out a form, download a how-to guide, make a purchase, or get in touch with you? The answer to those questions determines what goes “above the fold,” in the visible space that visitors first see when they land on your website.

These are the elements that must go above the fold:

  • Your logo
  • A navigation menu with four to five tabs
  • Some call to action – Tell users what you want them to do on your site: Shop for your best personal style? Learn how to renovate your home? Save money on software?
  • Sign up for email news and alerts
  • Share buttons for social media
  • Contact information or a call to action that easily leads users to find you.

Use Multiple Content Formats

Want to learn how to build a great website that both search engines and visitors will love? I like to remind our customers that content is still king.

Search engines find your website by looking for the content you provide and searching for words and phrases that describe why it or your site exists. Yet, content can be presented and indexed on your site in a number of formats, not just text. A multi-media site is more attractive for visitors and a positive signal to search engines. In addition to articles, posts and web copy, use a mix of:

  • Images
  • Video
  • Infographics
  • Animated gifs
  • Free guides/downloadable white papers
  • Graphic illustrations

Each of these files should be named in searchable terms so search engines and users may find them. For example, name a photo “sunny day in Seattle” rather than D000001. If the files allow for Alt Text, this is an additional opportunity to gain some SEO points. Search engines use Alt Text to learn what images about (it is also used by screen reading devices by the visually impaired). 

Avoid Ugly Website Designs

 

Color

As you choose color schemes throughout your website, try to consider each color as a tool and how it might display across different devices. The company logo is often where people start. However, aligning with the colors of your logo makes sense for branding but it might not make sense overall if they’re drab. Try these tools to help you with colors:

  • Free color palette generator generates a color palette based on a photograph that you like
  • Paletton’s color wheel generates color palettes based on the users’ desired number of colors and hues
  • Create your own color palette and browse other users’ palettes at Coolors

White space

Today’s trend is to give content room to breathe. That’s the white space that designers talk about so much. Too many elements on a single page, especially above the fold, can overwhelm and turn off viewers.

Fonts

Choose typefaces that are easy to read, and use the fancy ones sparingly in logos, images and graphics. Use fonts that compliment each other well, and create a style sheet for H1, H2, H3, H4, text and other types of text. Many of our web templates come with style sheets, and some can be customized to complement your brand.

Want to learn more about how to build a great website? Read other posts here on the HostPapa blog to broaden your knowledge about designing a great website, or contact us today to get started.

Julio Martinez

Julio lives in Mexico City and writes for the HostPapa blog whenever he's not busy fixing old American sports cars. He writes about digital trends, small business tools and online marketing.

1 Comment

  • Mayson
    January 22, 2018 at 10:14 am

    Great web design tips.

Post a Comment