Converting Your Website to Responsive Design – Part III

In the first of our series Converting your Website to Responsive Design: Part 1, we examined how modifying your existing site to use a Responsive Design can be a more suitable way to “go mobile” rather than create a separate mobile-only version.

Last time, in Converting your Website to Responsive Part 2, we examined how to convert your existing code to use the responsive front-end framework Foundation.

Today in Part 3, we’ll focus on becoming responsive, optimizing that code for display on a variety of browser and mobile screen widths.

Previously

Part 1: choosing a Framework and deciding on an implementation path.

Part 2: converting your code to use Foundation framework.

Next

Part 4: development tips and tools.

Step 4: Becoming Responsive

Once you’ve implemented the Foundation framework, your site has already become responsive! By default, Foundation’s grid system collapses to stack all columns on top of each other on small mobile devices and small screen widths. If you used the Foundation navigation or tab components, these will also collapse to a mobile view.

You can test this yourself even without a mobile device by using your web browser and resizing the window to a mobile-like width.

If we take a look at our newly responsive site viewed on an iPhone in the landscape mode, we’ll see it now looks like this:

Responsive Screenshot

It’s looking pretty good. The columns have stacked on top of each other rather than staying vertical with a scrollbar. While Foundation does most of the heavy lifting in making your site responsive, there are still issues before we can become fully responsive:

  • The top navigation is clunky. The navigation used for a desktop view is takes up too much space on a mobile view.
  • Text in the “Contact Us” block in the footer is cut off.
  • Additionally, we decided we do not want to show the carousel on the home page for mobile view. It should remain for the desktop view however.

Each of these issues can be addressed by implementing a responsive navigation pattern, styling for smaller screens using CSS3 Media Queries, and using Foundation’s implementation of Mobile Visibility classes.

Mobile Visibility

Foundation provides a series of visibility classes that go a long way in making a website responsive on mobile views. These classes allow us to turn on or off elements based on the current screen width or even orientation. For example we could set an element in our markup to display on mobile phones using:

<div class="show-for-small">Show me only on small screens, like smartphones.</div>

Their opposite rule class equivalents also exist:

<div class="hide-for-small">Hide on small screens.</div>

Using these classes, we can address our footer issue detailed above, by deciding to hide not only the phone image, but also the description for each block in the footer. We can easily do this by simply adding the class “hide-for-small” on both the phone image and the block descriptions. Once we do, we get something like this when viewing the homepage on a mobile device:

Footer view

Responsive Navigation Patterns

When viewing in a mobile device, what do we do with the navigation? Should it collapse to a dropdown menu? Should we not display certain navigation items that are not core? The answer is usually: it depends. It depends on how complex your website’s navigation is. Since mobile views have limited space to display navigation, we often need to implement a navigation design pattern for mobile views. The navigation pattern must be intuitive, not be overly intrusive, yet still provide access to the site’s core pages.

Brad Frost has collected various Responsive Navigation Patterns, that go from the simple top nav pattern, collapsing to a dropdown menu, creating a toggle, to the more complex like multi-toggle or off-canvas.

It is a good idea to familiarize yourself with these patterns, and decide on a pattern that will work best for your site’s navigation and structure.

Foundation’s Built-in Support Mobile Navigation

Foundation provides built-in support for mobile navigation if you use the Foundation components. For example, navigation and tab components can be styled for mobile by adding a specific “mobile” class name to the markup to achieve a collapsed view.

Here’s how Foundation’s base navigation component responds to mobile:

Foundation nav

Here’s how Foundation’s tab component responds to mobile:

Foundation Tabs

Foundation also supports more complex responsive navigation patterns like Off Canvas layouts, where the menu exists off-screen and is toggled into view on the side. The Facebook iOS app is a well-known example of this pattern.

Depending on how complicated your site is, you may need more navigation options than just the global navigation. Our website has second and third-tier navigation for our Services and Solutions pages. For these tiers, we decided to condense a navigation component at the top of the page that would collapse to a menu toggle for mobile views:

When the user clicks on the menu, the sub-menu appears below:

We chose this solution because we don’t want our mobile users to have to scroll down to read the content to access that section’s subpages. The menu toggle panel also allows us to accommodate both second and third-tier navigation. Here’s what the menu looks like on our Solutions page:

Our mobile menu implementation is slightly more complicated because this menu has a more complete navigation than our desktop version. We don’t show the 3rd tier links for Mobile or Intranets in the navigation on desktop views.

In fact, we use Foundation’s mobile visibility classes to set the larger, desktop navigation on this page to “hide on small screens”, and we create this new mobile menu and set it to “show on small screens”. This way the larger, desktop navigation only appears on larger screens, and hides on smaller screens. And so it’s vice versa for the smaller, mobile navigation. This way we can have a complex navigation for mobile that optimizes available screen space, but still have a different, simpler solution for desktop.

If using Foundation’s built-in responsive navigation patterns are insufficient for your site, you can also roll your own. Additionally, you most likely will need to make other tweaks related to typography or padding to account for tablet or mobile devices. These can be done in your stylesheet using CSS3 Media Queries.

Styling for Smaller Screens Using CSS3 Media Queries

With Responsive Design, we need to adjust our design to accommodate smaller screen sizes. We can use CSS3 Media Queries in our CSS stylesheets to target a specific set of features such as width, height or even orientation.

For example, the following can be added to our stylesheet:

@media only screen and (max-width: 320px) {
body { background-image: none; }
}

In English, this says for all screens up to 320px wide, remove the background image. An iPhone in portrait mode is 320px wide.

With Media Queries, we can define or override any CSS style within the @media brackets. This is very powerful because we can now target a mobile device and adjust typography, margins, padding or any CSS for any element on our site for that device.

Media Queries for Standard Devices
The following is a table of common screen widths for standard devices:

Media Device Screen Width
iPhone (portrait) 320px
iPhone (landscape) 480px
iPad (portrait) 768px
iPad (landscape) 1024px
Desktop 1200px

There are of course, many more devices than the ones listed above. It is important to test on devices for your website’s requirements.

We can now use these widths and create Media Queries to target styles from smartphones to tablets to the desktop browser. For example the following Media Query targets iPads:

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Styles */
}

CSS Tricks provides a list of Media Queries to target standard devices listed in the table above.

Grouping by Width

If your site has more complex requirements for mobile devices, one strategy is to group devices based on screen widths, and then create Media Queries based on those groups. For example:

Tiny: 208, 220, 240
Small: 320, 360, 480
Medium: 620, 640, 768
Large: 800, 960, 1024
Extra-Large: 1200+

This is how the Mobile Visibility classes provided by Foundation work. There are Media Queries in the core Foundation CSS that define classes to show or hide based on small, medium or large screen size.

Fixing the Global Navigation

Using our OpenRoad site as an example, let’s take a look at the process of fixing the global navigation issue identified earlier. Our header consists of 3 columns, one for the logo, one for the global navigation, and one for the search box. Because our navigation is only a list of 5 links, we used a custom implementation rather than use Foundation’s navigation component that would collapse to a toggle. As noted earlier, for your own website, you should use the most appropriate navigation design pattern based on your site’s content and complexity.

When we viewed our responsive site on an iPhone in landscape mode (480px width), we got this:

To minimize the global navigation, we decided to hide the “Search” column from the mobile view. We did this easily by adding the “hide on small screens” Foundation mobile visibility class. Once it’s removed, our global navigation looks like this:

This is looking pretty good in landscape mode! Let’s see how it looks on an iPhone in portrait mode (320px width):

Well that’s a problem. The menu links for blog and navigation have been cut off. To fix this, we need to reduce the padding and width used by the menu for smaller screens. We can specify a CSS3 Media Query that applies to only smaller sized screens and nothing any larger than 420px:

@media screen and (max-width: 420px) {
#header-menu {
// add CSS styles to condense the global navigation padding
}
}

Once that’s done, we can take a look on our iPhone in portrait mode and we’ll see:

Why did we enter 420px for our media query and not one of the standard media sizes described earlier? We chose 420px because that was the breaking point for our menu before the last Contact menu item was being cut off.

Finding the Breaking Points

Breaking points are the points, or screen/browser widths, in a design where the layout will break, or not fit in the current view.

The easiest way to find the breaking points in your design is to view your site in a desktop browser and simply resize it smaller and smaller. As you’re resizing the window smaller, you’ll notice your website respond and resize as the view gets smaller. As you’re developing, you’ll notice at certain points the design will break.  Take a note of width of the screen at that breakpoint. You can now use this width to create a Media Query to address this issue in your stylesheet.

You can repeat this resizing of the browser on each page or template in your website, and instead of having one Media Query for each width, you can group them in a range using the min-width and max-width feature of CSS Media Queries.

While this exercise doesn’t exactly replace testing in mobile device, it can address a lot of issues during development.

Finished Responsive View of Our Homepage

Combine all the techniques discussed in this article, this animated GIF shows what our homepage looks like when resized from a 1200px browser width down to 320px width:

And because Responsive Design is screen width based instead of device specific based, we have successfully converted our website to be Responsive for desktops, tablets, and smartphones.

Coming Up: Part 4, Lessons Learned

In the final and fourth post for this series, we’ll summarize our thoughts and what we learned when converting your website to Responsive Design. We’ll also take a look at some more tips and tools to use when going responsive.

Need help with your next responsive design project? We make new digital experiences possible with end-to-end capabilities that include strategy, usability, design, development, and analytics. Get in touch to learn more.