Responsive web design
In responsive web design, the same website is served to desktop screens, tablets and smartphones but the layout changes and adapts to the screen size. One website fits all. It allows content to be accessed by the widest audience possible no matter what device they are using.
Responsive web design has grown in popularity since 2011 and is considered a good approach to manage a website as the variety in screen sizes continues to increase. The first Europa website to become responsive was Your Europe Citizens.
Standard templates in responsive design
Think "mobile first"
You should think of mobile visitors first when planning your content and layout. Give priority to tasks and content that are most important for them. Then, for each breakpoint of the template, arrange content and features according to the different screen sizes.
Implications for your content
In responsive web design, a page of text that is completely visible on a desktop screen will require some scrolling on a smartphone screen. This is unavoidable but you can provide a better browsing experience by ensuring that your texts are easy to read and easy to scan.
Much of the advice in the 'Writing for the Web' pages is even more important to consider when managing a responsive website: the 'bite, snack, meal' structure, short paragraphs, concise texts and meaningful headings.
If you are moving a website to the new template then you should take the opportunity to review your existing content and simplify it and reduce it.
- W3C: Mobile Web Best Practices Flipcards
- W3C: Mobile Web Best Practices 1.0
- Mobile first - Luke Wroblewski
- Preparing websites for the unexpected – Smashing magazine
- Guidelines for responsive web design
- Usability of Mobile Websites and Applications by Nielsen Norman Group
- Content strategy for mobiles - .net magazine