Responsive and Mobile Web Design: The Basic Do’s and Don’ts

Responsive web design is when a website is created with the ability to adapt and translate to multiple different sizes and viewing devices. With so many different web browsing technologies and devices available, responsive design is becoming necessary in order to provide an optimal experience for each of the users. Even Stevenson University recently redesigned their website to provide a responsive layout. Some websites, such as Facebook, have a separate URLs for their desktop sites and their mobile sites (usually with an “m” in front). A responsive website would avoid this problem, because a single URL would adapt to each individual device. A successful responsive website is accessible and understandable no matter what device it is being viewed from, whether it’s from desktops all the way down to mobile phones, and who knows where the future will take it.

With it being so versatile in it’s usage, there are many factors to take into consideration when designing for the responsive and mobile web. It’s not just about making the content conform to a smaller view-port. You have to maintain a strong user experience across multiple different browser types, and still make it cohesive as a whole. In order to do this, as found on resources such as Alchemy Interactive and Le Site, there are do’s and don’ts of responsive web design:

DO consider the user when designing. You have to pay attention to all the possible devices they could be using and know what their purpose is in visiting your site.

DO design for each specific device, since they are all unique form each other and have different features and capabilities. Like Alchemy Interactive says, “one size does not fit all.” In this example, you can see how the website All For Color is displayed differently on the mobile phone than on the desktop monitor. The designs are different because the unique characteristics of each device and screen was taken into account.all-for-color

DO change how you present the information on each device to make it clear and understandable.

DO use a fluid grid structure when designing so you can easily adapt for each view-port.

DO pay attention to what is visible “above the fold” on each device. Make sure it gets enough information across.

DO limit the number of pages, images, custom text, and anything else that will slow the page loading time when adapting the design for smaller devices such as mobile phones and tablets. Ask yourself what is necessary so you don’t clutter the page with anything that’s not.

The key word here is ADAPT. Designs have to be flexible in order to reach as many users as possible on all the different devices they may be utilizing.

Now that you know some things to consider, here are some things to avoid.

DON’T use the same strategies you apply to non-responsive design. This is a different concept and not everything should be fixed in one place.

DON’T punish users for the device they are using by not keeping them in mind when designing. Consider as many possibilities as you can think of, because it is guaranteed that someone is using it.

DON’T hide or hold back content from mobile users. You can alter it if necessary, but make sure everything is still accessible.

DON’T have a big file size that makes the page take too long to load. Most people will abandon a mobile webpage after 5 second if it doesn’t load.

These are a couple major things to consider when designing responsively for the web, but of course there are more details that are sure to come about as your page develops. As designers, it is important that we provide as solid of a user experience for mobile web users as we do for desktop or laptop web users. Some good resources to look at that provide important aspects of good mobile experiences are Mobile Web Best Practices and Visual.ly. Examples of important factors in mobile design include clarity, keeping forms short, limiting images and keeping them small, and being aware of font choices. Overall, things should be kept simple and straightforward. Everything from gestures to navigation to content should be made obvious for ease of use.

Design matters and when you keep the user in mind and deliver a pleasing, adaptable website that sends the same message across all browsers, it should make people return—on any device.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s