Guidelines
What is responsive web design?
We use responsive design to improve the mobile experience of our website. In December 2012, one out of five visits to the Dominican website was from a mobile device. ("Mobile" here means basically either a tablet or a phone.)
"Responsive" design means that we present information on our web pages in a way that displays effectively for the different sized devices and screens. This type of design is called "responsive" because our website actually reorganizes and re-flows our content depending on the size of the visitor's viewport.
When do I need to think about it?
You don't have to think about it at all if you only use the basic formatting tools in Plone when creating and editing your content. Plone's editor will create code for you that will re-flow within our responsive framework.
Content elements that work great without extra work
- Headings and subheadings
- Regular text (including paragraphs, links, etc)
- Tables that are used to display truly "tabular" data (data that needs to be read in rows and columns to make sense.)
- Images placed on a page in plone using the "insert image" tool
- Most other "standard" elements on the page
Things that need special attention
- Tables that are used for layout of elements on a page
- Images that you want to fill the entire width of the page (like a banner for example)
Strategies for tables and images
Tables
If you've used tables to control design elements on your page, you have a few options:
- Leave it just the way it is. It will still work fine on desktop browsers, and be a bit scrunched together or require side scrolling on mobile devices
- Clean up your layout and remove the tables
- Replace your table code with bootstrap columns. You can also see an example.
Full Width Images
If you want full width images on your page, just make sure that the image is uploaded to plone with the correct width. You can find the correct width by finding the content area width in the grid reference. You can also see an example.
