Home / Best Practices for Creating Responsive Websites

Best Practices for Creating Responsive Websites

Guest Post by Rachel Sherman, Senior Marketing Manager, OHO Interactive

The promise of a responsive design is a single website that works beautifully on desktops, tables and phones, but the complexity of large-scale, content-rich sites packed with vital information can create challenges in communicating key messages effectively. Despite the challenges, a responsive design has proven itself a better alternative than a separate mobile website for addressing the explosion of web traffic from mobile devices due in large part to its allowing for content to be managed for every screen size through one code base.

Designing for multiple devices has become a hot topic as mobile traffic has grown significantly year over year. Analytics for a client website showed an increase in mobile traffic from 8% in 2012 to 18% in 2013. In fact, the number of mobile visits to this client’s website exceeded the number of visitors using popular desktop browsers which means ignoring mobile is like ignoring a major desktop browser.

While marketers recognize the importance of a responsive design, they may be less sure of what it takes to build this type of site. Understanding how media queries, breakpoints and grids factor into the design is key. In addition, there are three considerations that should be top of mind: Research, Usability/User Experience Design and Content, and Brand.

Research
Conducting research will help you understand your audience and the different use cases for various devices. For instance, a desktop or tablet user will likely be interacting with your website in a different manner than a mobile user. Recognizing these differences will inform your site design and highlight an information architecture that will accommodate all of your visitors.

Usability/User Experience Design and Content
Optimizing the user experience with a responsive design for a complex website requires more than a cookie-cutter solution that doesn’t allow total control. You’ll want to think ask about how your site is presented across devices and ask yourself some questions.
· Is your navigation easy to use and does it allow users to find what they are looking for?
· Do you calls-to-action stand out on your site’s various sizes?
· Do your copy, photography, and video tell your audience who you are effectively?
· Are you incorporating interactive experiences to keep your audience on your site on any device?

Brand
Ultimately, your website is a reflection of your brand so ensuring clear communication across various screen sizes of who you are and what defines you is an important part of a responsive design. Having a well-defined messaging platform and visual strategy from the outset will help you make decisions about how your site layout shifts and which information should feature most prominently as screen real estate decreases.

Responsive design is fast becoming the standard website implementation in response to mobile. As you make your way through the design process, rely on your research, consider the user experience from every angle, think about your content, and most importantly test before and after you launch to site that helps you successfully reach your business goals.

To watch the "Best Practices for Creating Responsive Websites" Webinar from September 3, 2013, click here.

Reactie toevoegen

Plain text

  • Geen HTML toegestaan.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Regels en alinea's worden automatisch gesplitst.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Toegelaten HTML-tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Regels en alinea's worden automatisch gesplitst.
Bij het indienen van dit fomulier gaat u akkoord met het privacybeleid van Mollom.