Current items
12.11.2012
Responsive design – user experience on all output devices
Details
01.08.2012
Welcome, Nicole Neubert!
Details
01.08.2012
Business Forum Rheingau 2012 – Founding Event
Details
08.06.2012
»Exhibit Nature & Explain Science« – Presentation
Details
04.05.2012
Eye candy & mouth watering delicacies
Details
26.03.2012
Save the date!
Details
16.12.2011
Congratulations, migration museum!
Details
09.12.2011
Between existence and excellence – the website
Details
28.11.2011
»Social Media« workshop
Details
21.11.2011
ExpoTec stand at Cologne trade fair
Details
10.11.2011
Nominated for the MKN Award 2011
Details
27.09.2011
Aim high
Details
14.09.2011
create-it-2011 / Added value through Design
Details
03.08.2011
Successful communication affects. Dialogue touches.
Details
02.08.2011
Between existence and excellence – the book
Details
07.07.2011
How to GRIN
Details
18.03.2011
Wiesbaden Design Days – Access All Areas 2011
Details
29.11.2010
Distinction at Design Award Rhineland-Palatinate
Details
29.06.2010
Lekkerwerken on OFFF
Details
10.06.2010
Architectural films online shop
Details
10.06.2010
New horizons at ZDF Weather Knowledge
Details
09.06.2010
German Design Award 2011: nomination
Details
01.06.2010
22 x lekker in Rotterdam
Details
06.05.2010
»Secret Materials« for the Commission
Details
20.04.2010
New visual identity for Flatlift
Details
19.04.2010
Design Days ... Sweets for the sweet
Details
06.04.2010
Special Exhibition at »Lebenswege«
Details
12.01.2010
Airport and region engaged in dialogue
Details
06.11.2009
Lekker werken for Hessen's streets
Details
14.10.2009
For font loving friends...
Details
03.09.2009
Fresh Design for GRIN
Details
01.07.2009
Release of »logolounge« Vol. 5
Details
02.06.2009
ZDF Milestones of German History
Details
18.05.2009
Bronze at the European Design Awards
Details
14.05.2009
Three nominations for the German Design Award
Details
28.04.2009
Weightless Winners
Details
23.04.2009
A lekker look behind the scenes
Details
14.04.2009
Researchers' Duel open for competition
Details
09.02.2009
EU Workshop in Brussels
Details
19.01.2009
Exhibition at Design Centre Ludwigshafen
Details
19.12.2008
Wishing you white tree tops...
Details
14.11.2008
On the podium at MFG Award
Details
12.11.2008
Distinctions at Design Award Rhineland-Palatinate
Details
26.10.2008
»Face to Face« with Alsta
Details
10.09.2008
ZhongDe among »Best Annual Reports 2008«
Details
25.08.2008
Lekkerwerken's new home base
Details
15.07.2008
Alsta at the »Design Annual«
Details
11.06.2008
1st Designer Bowling Tournament 2008
Details
06.06.2008
Lekkerwerken up in the air
Details
20.05.2008
News from the »IdeenPark«
Details
14.04.2008
Access All Areas 2008
Details
19.02.2008
»Werking« with a european mission
Details
28.09.2007
Ceremonial opening of the Arp Museum
Details
31.07.2007
Award winning logos at EULDA 2007
Details
02.07.2007
Orientation for the Arp Museum
Details
06.06.2007
OFFF '07
Details
12.03.2007
Olli on board
Details
26.02.2007
The DAI’s gone blogging now
Details
22.02.2007
BowlChampChips 07 – Training I
Details
15.02.2007
An addition to our team
Details
10.01.2007
Forging new bonds in the new year!
Details
18.12.2006
Tally-ho, it’s time to party!
Details
30.10.2006
Its a girl!
Details
22.09.2006
Nano-journeys on the road in France...
Details
04.09.2006
Goodbye Eva – hello Nadine!
Details
25.08.2006
Two »winning logos« at the EULDA Award 2006
Details
24.08.2006
New man on the team!
Details
27.06.2006
New: Map24 Mobile Navigation
Details
08.06.2006
German-Afghan Initiative at the CSS World Awards
Details
29.05.2006
I-KU is dancing in Hanover
Details
24.05.2006
Reinforcement from overseas
Details
23.01.2006
Forms beyond zero
Details
01.12.2005
New edutainment project for VDI / BMBF
Details
10.11.2005
Lekkerwerken on tour in the Netherlands
Details
11.10.2005
Website relaunch online!
Details
14.09.2005
Leading the lekker »werking life« of Riley
Details
05.09.2005
Gold / iF communication design award 2005
Details
22.06.2005
Cannes Cyber Lions Award 2005 / Finalist
Details
07.06.2005
HSMA-Award 2005 / InterCityHotel placed first
Details
02.06.2005
Monster midge at the Children’s Media University
Details
30.05.2005
Grimme Online Award 2005 / Nomination
Details
12.11.2012
Responsive design – user experience on all output devices
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.
Advantages
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:
- 1200 pixels (large desktop)
- 1024 pixels (desktop, iPad/tablet landscape format)
- 768 pixels (iPad/tablet portrait format)
- 480 pixels (smartphone landscape format)
- 320 pixels (smartphone portrait format)
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
Further info
Link to the website www.swissluxuryclinic.com
You can find further examples of sites
using responsive design on www.mediaqueri.es