Responsive Web Design and Development

Responsive Web Design and Development

Dunn Solutions Group Chicago | Minneapolis | Raleigh | Bangalore (847) 673-0900 info@dunnsolutions.com

Before 2016 ends there will be over 2 Billion smartphone users and 1.2 Billion tablet users. That means the days of consumers accessing websites via a single device are effectively over. The writing’s been on the wall for years. In 2012 Google stated their preference for cross-device compatible “responsive” web design, then in 2015, frustrated with the pace of adoption, they announced that having a responsive website would provide a rankings boost and that “mobile-friendliness” would be visible to users in search results.

Consumer-facing websites simply have to be designed and developed with multi-device usability in mind.

Businesses can simply longer afford to bet on the old 1024x768 standard for designing websites. Mobile users only have a screen the size of their palm. The primary interaction method is also different. Instead of a keyboard and mouse, smartphones and tablets use touch screens. Finger taps tend to be less precise than mouse clicks, and we lose important interaction methods, like hover, with touch-based interfaces.

One additional element you’ll need to need to consider is load time related performance – which is to say that while desktop users may do fine with a heavy site, mobile users may struggle with bad connections.

With all these variations between devices, how can we present the user with the optimal user experience?

Designing a separate mobile site is one approach, but it means maintaining separate sites and Google has explicitly recommend against using them. Mobile applications can also be an effective approach, but again, offering one requires costly app development and the ongoing maintenance of multiple solutions.

For most organizations "Responsive Web Design" is the answer. Mobile responsive is a development approach that allows us to design a single website that “responds” to and adapts to the device of the user.

1

Best Practices for Responsive Web Design How does responsive web design and development work? The driving force behind responsive design is the ability to use browser properties to determine the correct display parameters for the website's layout and content. For example, a tablet user would see a resized version of the desktop layout, compressed to fit the space, whereas a smartphone user would see a one column layout with an expanding navigation.

One popular strategy for optimizing website layouts when using responsive design is to rely on breakpoints.

Many devices fall into one of four standard device widths: 

960 pixels – Desktop devices



720 pixels – Tablets in portrait mode



480 pixels – Smartphones in landscape mode



320 pixels – Smartphones in portrait mode

The above widths can be used as breakpoints for our website design. For example, if the browser width is greater than or equal to 960 pixels, we could use a 920 pixel width, three column layout. So if your browser width is 480 pixels or less, the site’s width will respond by changing to 480 pixels and a one column layout.

Mobile responsive site design can be taken to another level using fluid, percentage-based layouts. Fluid layouts allow your website to fill the browser, regardless of the width. Other elements, like images, videos and text can also be made fluid so that your content fits the layout, no matter the size. Then through testing we set the breakpoints for layout and content changes where they are needed, rather than at standard sizes. This guarantees that every user (not just the "standard" set) have a great user experience.

However it does require more testing to make sure that the website and content respond well at every size.

2

Designing a Mobile-Friendly Content Strategy When working with existing websites to make them mobile responsive, our designer and developers use a top down method – optimizing the content as we shrink it down in size. Starting with your desktopfriendly site, we’ll modify the layout and content so the site will display and function well on mobile devices.

Then, as we scale from a large desktop to a small device, content typically changes in one of three ways: 1) Mobile Responsive Content Shifts: As the screen gets smaller, columns become narrower.

Sidebars and other secondary content blocks move from the side to below the main column(s).

Rows of six images become three, and then two, and then one, etc. This is all done so users won't have to pinch, expand, and move around a website regardless of the size of their mobile device.

The flow of your website’s content, though, will still need to make sense to mobile visitors depending on their screen size shrinks. Interdigitation is the weaving of content in a way that keeps the information most relevant to users easily available. A product summary that, on a desktop device, floats on the right side of the page gets pushed under a main photo so users still get information quickly. A large navigation, on smaller pages, may be pushed to the bottom of a page.

2) Mobile Responsive Content is Hidden: Content that would otherwise take too long to skim by scrolling or just doesn't fit well in the layout can be hidden. One way to keep important information easily accessible is to make some content expand when mobile visitors want to view it.

In addition to keeping price information and the "add to cart" link at the top, reviews are viewable only by expanding the reviews section. Doing so will prevent your sites most important links – the ones that allow mobile visitors to buy products – from getting buried by secondary information.

3) Mobile Responsive Content is Removed: Generally, this is avoided. Ideally every mobile user should be able to access all site features, regardless of the devices they use. On some sites mobile users lose the ability to post jobs, find prices, and learn about the website when they use a tablet or smartphone. This puts the site at a disadvantage because most mobile users expect to be able to do as many things as a desktop user. Therefore, it is important not to hide important content.

However, in the name of esthetics, reduced scrolling or lower page load times, some site content can be hidden from users on particularly small mobile devices. If you make the decision to remove content is made, it should be backed by solid evidence that indicates it's actually the best decision.

3

Mobile-First Web Design and Development When working on a new projects, it’s typically best to apply a mobile design first approach. That means making the website’s the default presentation and base content mobile and optimized for the simplest mobile devices first then "progressively enhancing" the website as it moves up in default size. Using this strategy designers can provide mobile users with minimal screen real estate, processing power and third party plugins an amazing experience that both looks great and functions perfectly. As the need arises, the site can gradually be enhanced and even completely rethought for larger platforms with fewer constraints.

Cross-Device Compatible Navigation Navigation is one of the most important factors to consider when designing a responsive website. A multilevel site must be as easy to navigate from your desktop (using a wide screen monitor and a mouse) as it is from a smartphone (using a very small touch screen). A standard drop-down navigation menu generally works best for desktop, but when using touch-based devices with smaller screens, this method causes issues.

Generally speaking, content design takes precedent over navigation on mobile. Too many mobile user experiences start with a list of navigation options instead of content. But studies show that most people will scroll down a website, so the most important information should usually be toward the top of a page.

4

Making Site Visits Easy for Mobile Users In addition to tackling layout, content and navigation from a mobile first perspective, there are a variety of other considerations developers will take into account when designing mobile responsive websites:

Buttons and Touch-Based Interactions 

Buttons, links and other such elements should be easy to select with a finger tap. The general rule is to make them the size of a fingertip (the people at Apple define this as 57 pixels square). There must also be adequate space left around the element, so nearby items won't be selected accidently

Hover on Touch Screen Mobile Devices In the past, hovering has been used on elements like navigation bars and general links to show that something is clickable. Since the popularization of touch-screen mobile devices, this approach has changed. 

Links should always be obvious now that they cannot rely on hovering to be discovered



Clickable actions such as arrows you typically see on a site slideshows cannot be designed to only appear when hovered over because this makes them inaccessible on touch screen mobile devices



Effects that rely on hovering should probably be avoided. On The Inspiration Grid website, for example, headlines for each image only appear when hovered over. This works nicely on a desktop device, but on a tablet or phone users have to click through to the detail screen to see the content

Forms on Touch Screen Mobile Devices Forms can easily be made aesthetically pleasing on a tablet or phone, but mobile usability can become an issue on those devices. Here are some general rules to follow to make site forms as easy to use as possible: 

Designers use checkboxes, radio buttons, and drop down menus to facilitate mobile usability whenever possible. The less mobile users have to fill in, the easier completing a site form will be



Check for errors in text input fields as users are filling out a form. This is especially helpful on long forms

Responsive Web Design and Load Times One of the most important aspects of making websites cross-device compatible involves keeping load time low. Designers and developers have several options available when attempting to cut down load times:

5



Lazy loading is when content is loaded as a visitor scrolls down a page. This allows users to download only as much as they’ll use. Lazy loading’s useful for sites that have content like lists of articles because new articles can load as a visitor scrolls instead of loading once a user has clicked to see another page. This may be easier than having users tap a "next" button every few articles



Conditional loading is when the type of media content that is loaded depends on a given visitor's screen size and resolution. This allows mobile users to download small file sizes while desktop users can get the full experience on a site

Using CSS Styling Instead of Images When Possible 

The release of CSS3 gave web designers and website developers a new range of styling options previously accomplished using hacks and images. Things like drop shadows, rounded corners and gradients are now achievable with a single line of code, allowing us to keep our designs small and fast-loading. Occasionally, some CSS3 styles may not render correctly in older browsers, and in these cases, fallback options are available

Let us design and develop a mobile responsive site for you! Contact us at info@dunnsolutions.com today!

6