Python Tales and Plone Stories

4teamwork

Responsive Design for Mobile Devices

How to use responsive design for mobile devices?

By default, most webpages do not really work well on small displays (e.g. on smartphones). Usually, not all relevant information fits to the display – you are forced to scroll horizontally or zoom out which can become quite awkward. By using repsonsive design you can have your design dynamically adjust to the available screen width, giving you the best of your page, especially on mobile devices.

First, what are the challenges when using responsive design?

  • Use a larger font
  • Don’t waste space for a big logo, navigation, etc.
  • Try to avoid horizontal scrolling

The most important thing to know about are media queries. You can either use media queries in the link tag:

1
2
3
<link rel="stylesheet" type="text/css"
      media="screen and (max-width: 800px)"
      href="styles.css">

or directly in the CSS file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mobileOnly {
  display: none;
}
.noMobile {
  display: block;
}
@media screen and (max-width: 800px) {
  .mobileOnly {
    display: block;
  }
  .noMobile {
    display: none;
  }
}

In this example there are two css classes: mobileOnly and noMobile. As the names imply elements with the class noMobile appear if the page is displayed on a screen, and its width is greater than 800px. If you want to display certain elements only if the width of the screen resolution is less than 800px you can use the class mobileOnly.

Please note that using media queries you can retrieve more information, e.g. orientation, min-device-width, and so forth.

So, how can we meet the challenges mentioned before?

  • Use media queries to define mobile specific CSS
  • Use max-width: 100%; for images
  • Display each box below the other, using 100% width
  • Use javascript / jQuery to toggle navigation, searchbox and other elements which occupy a lot of space

I created a Plone package called ftw.mobilenavigation in order to make navigation in your Plone site responsive. By defining mobile buttons in portal_actions, you can use them to toggle the searchbox, the usermenu, and the global navigation.

The global navigation is a “mobile” replacement for the standard Plone navigation, leaving more space for important stuff – your content.

If you’re using Plone and are interested in our mobile navigation, please take a look at ftw.mobilenavigation

Comments