More and more users go online with their mobile devices, using an increasing range of end devices like smartphones (eg iPhone) and tablet PCs (eg iPad). This creates new requirements on web design as each of these devices has a different display size while their touch control also differs significantly from desktop devices still usually operated via keyboard and mouse to surf the internet. One possibility to meet this wide range of output sizes is responsive design.
Why responsive design
Responsive design means, among other things, the automatic adaptation of a website’s layout and content to the browser size in which they are shown. With a fixed web layout, eg one designed for a fixed width of 1024 pixels, the size of the contents being displayed is reduced on mobile output devices with smaller browsers. As a consequence the text is hard to read or not legible at all and pictures become very small – unless you enlarge individual sections of the page by zooming in.
Responsive design tries to fill the gap between different output devices (desktop/notebook, tablet, smartphones) and to provide an optimal display of contents for every user. Technically, this means a query via CSS formatting for the size of the browser used.
Project example SwissLuxuryClinic
For the brand presentation of the hair transplantation specialist »SwissLuxuryClinic« which we implemented using responsive design, the presentation of the contents was adapted for the following key resolutions:
The adaptations range from different sizes and proportions of the pictures at the top of the page via different sizes of the teasers to the navigation which is open with larger browsers and can be expanded with smaller ones. By scaling, wrapping and masking we have thus made the site’s comprehensive information offer accessible on all output devices without cutting content.
Example of website display on iPhone /
320 pixels browser width
Example of website display on iPad /
768 pixels browser width
Example of website display on desktop browser /
1024 pixels browser width and larger
Link to the website www.swissluxuryclinic.com
You can find further examples of sites
using responsive design on www.mediaqueri.es