Responsive Design Best Practices

HDL-Banner


Creating a responsive website is not a simple project—and it’s a never-ending project to boot. A popular site requires constant maintenance and updates. For a high-performing site, it’s critical to create the design around the content, which is, of course, the most important element of the website. The designer must decide the best way to present the content within the content of the design to gain traction and a loyal following—a process that has become more complex as more users have begun to access websites via different devices. In order to meet the needs of all of your website’s users, it’s essential to create a responsive web design that works effectively regardless of screen size.

Here is an example of a beautifully-designed responsive website. “Inventing Abstraction by Web Design,” created by Second Story, was honored in Print Magazine’s 2014 Regional Design Annual. Watch how the content changes as the screen size changes:

responsivedesignex

As Ethan Marcotte explained during his presentation at the 2014 HOW Interactive Design Conference, “we need to adapt a more mobile-first approach.”

According to a study from ComSource, “[v]irtually all of the growth in total internet usage over the past three years has come from usage of smartphones and tablets, which are responsible for almost doubling the amount of time Americans spend online.”

totalustimespentbydigitalplatform

So how can designers accomplish creating a cohesive presence across all devices?

Responsive Design Best Practices:

Responsive web design begins exactly the same way as static sites. Developing wireframes. Obvious though it may be, I can’t stress the importance of wireframes enough. Keep in mind when wireframing that not all the desktop features should transition over to the mobile design.

As Cameron Moll said in his HOW Live Workshop, Cohesive UX Design: Successful User Experiences Across Platforms, “the goal is a unified design [is] not mindlessly cloning from screen to screen.” You might need to eighty-six features on the mobile site to provide users with the best experience.

Of course, you never want to sacrifice content. You might need to cut out ads or popups that make sense on a desktop site, but detract from the mobile experience. The navigation menu might also need to be trimmed to its core purpose to avoid usurping your mobile content.

Another pro-tip for mobile responsiveness is to limit JavaScript usage. People don’t always use wi-fi when surfing the web on their phones; they might use their mobile connection, which can be laggy. JavaScript needs a fast, secure connection to download content in an acceptable time frame. Without that reliable connection, it’ll delay users’ access to content.

CompuWare’s “Best of the Web Performance Trends” study explains: “A one-second delay in website response time equals 11% fewer page views, 16% decrease in customer satisfaction and a 7% loss in conversions. As page load times increase, abandonment rates also increase – a one second increase in Amazon’s page load would annually cost $1.6 billion in sales.”

A key tactic for maintaining responsive integrity is to create media queries. Web designer Ethan Marcotte stressed this point at last year’s HOW Design Live conference. Media queries can tell various devices to show a modified version of a webpage when it’s viewed on a specific device. Media queries can ensure that your users don’t have to struggle to navigate a webpage designed for a desktop computer when browsing on a mobile device. Keep in mind when setting breakpoints that certain features, such as the navigation menu, need to be in the same location for all platforms; this establishes unity and prevents confusion for users.

Catherine Farman beautifully sums up some do’s and don’ts when it comes to responsive design. Watch her presentation from the 2014 HOW Interactive Design conference.

Responsive Design Resources:

Streamlining content across platforms doesn’t have to be a complicated process. There are a multitude of resources you can use to help simplify the responsive design workflow and to simultaneously update designs on multiple devices—some that don’t even involve code.

To give you a leg up in the responsive web design process, I’ve compiled a list of incredibly helpful resources for the building responsive web pages.

Web Design Course Collection

coursecollectionThis course collection is available for limited time only. If you are brand new to web design, I highly recommend purchasing this as you will save $140. If you’re more advanced than the beginner level, the intermediate and mobile website design are super informative resources to take your skills to the next level.

Responsive Web Design with Adobe Photoshop

responsivedesignwithphotoshopTake a look at responsive web design from the standpoint of visual creativity with Responsive Web Design with Adobe Photoshop by Dan Rose. Rather than merely focusing on the coding aspects of responsive web design, this guide is geared toward visual Web designers who are well versed in the use of Adobe Photoshop®. Discover how to streamline the process of converting a static page design to a set of components for a responsive web page, fit tools like Photoshop into your overall workflow, utilize Photoshop to further refine HTML for responsive designs, and much more.

 

Introduction to Responsive Web Design

introductiontomobilewebsitedesignThese days, optimizing your website for the many different mobile devices users rely on is a must. To do that, you need to approach the website design and development process in a new way, with an eye on creating user-friendly responsive design sites. In this class, you’ll walk away with an understanding of what responsive web design is all about. From the different types of mobile-enhanced design methods we can use (think adaptive or responsive design to name a few), to actually diving in and building a responsive site. You’ll learn what media queries are and how to use them effectively. You’ll also explore the good bits of HTML5 and CSS3, learn about responsive images, video, text, as well as some of the ways to test our responsive pages. This info packed course will get you up to speed quickly, and you’ll finally be able to not only say that you know what responsive design is, but be able to create one!

Creating a Responsive Web Design

creatingaresponsivewebdesignIn order to create a web layout based on your design comp, you really need to know only a handful of HTML tags and CSS properties. The real challenge comes in understanding the principles of how HTML and CSS work together, and how to incorporate graphics, text, and color using these technologies. This course will teach you a step-by-step approach to taking a Photoshop design comp into a finished, responsive web page that will render correctly in a wide range of web browsers and mobile devices. Plus, you’ll be learn from a fellow graphic designer who has over 20 years experience in print, web, and interactive design!

Advanced Responsive Web Design Techniques

advancedresponsivewebdesigntechniquesThese days everyone wants to add a cool jQuery feature to their web pages, the latest widget, or the newest CSS3 feature. But who has time to play detective and learn how to do all of those things? Wouldn’t it be easier if someone just pulled all of those amazing new web features together and showed you not only how to add them to your own site, but take them further because you actually understand them? That’s exactly what this course is going to do. For all of those times you’ve said, “How’d they do that?” when you saw the latest cool technique, this course will show you how.

Cohesive UX: Successful User Experiences Across Platforms – OnDemand Webcast

500x500_Cohesive_UX_ Successful_User_Experiences_Across_PlatformsWith the ever-increasing ubiquity of screens and devices, cohesiveness is progressively imperative to successful user experiences across platforms.

Recent examples include the version notes in an update to the Apple Store app for iOS: “Now start shopping on one device and finish on another, or even on your Mac or PC.” Or the observation made by a tech news site following the redesign of Spotify: “Another key factor behind the design overhaul is for Spotify to feel familiar across all platforms.” There are countless other examples.

This 1-hour webcast examines what’s required to deliver a cohesive, consistent user experience regardless of where the digital experience begins, continues, and ends.


For more resources, check HOW Design University for HOW Design Live conference videos. These videos change monthly, giving in-depth discussions and lessons on a myriad of design topics, including responsive design.

COMMENT