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
1 2 3
or directly in the CSS file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
In this example there are two css classes:
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
Please note that using media queries you can retrieve more information, e.g.
min-device-width, and so forth.
So, how can we meet the challenges mentioned before?
- Use media queries to define mobile specific CSS
max-width: 100%;for images
- Display each box below the other, using 100% width
I created a Plone package called ftw.mobilenavigation
in order to make navigation in your Plone site responsive.
By defining mobile buttons in
can use them to toggle the searchbox, the usermenu, and the global
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