Together with Moritz Strube Chief Technical Officer at Polyas and his team we led several programmes of work to launch the service onto the market and to bring brand and service to life for everyone.
Our vision and our holistic approach – as experts in UX, UI and web technology – challenged us to create the most beautiful, human-centered service possible in secure online voting.

See more at: polyas.com

The Helmholtz Zentrum Muenchen – German Research Center for Environmental Health is a major research center in Munich. Its research is integrated into the Helmholtz Research Fields “Earth and Environment” and “Health”.

As a partner of the Fuenfwerken Design AG, who was responsible for the website’s redesign, it has been our team’s task to develop a responsive website concept, optimized for desktops, tablets and mobile devices.

Now CSS3 media queries have enabled Responsive Web Design. It allows us to create websites with fluid layouts  that automatically adapt according to the size of the user’s browser – ensuring that the site looks great, is consistent and is usable, regardless of screen size and device.

For a example of responsive layout in action, check out the fa Test Grid.

If you want to find out more, here are my favorite tools or if you have any questions, please get in contact.

– Photoshop Grid for Responsive Web Design. Here’s the PSD.
– Patternizer is an easy to use pattern generator tool
– resizeMyBrowser Tool.  (Does not work in Chrome and Opera)
– Gridless -make future-proof responsive websites
– BluCSS is a CSS framework for RWD
– The happy & awesome way to build fluid grid: tiny fluid grid
– Responsive Web Design Sketch Sheets. Download PDF here.

For example the iphone automatically adjusts text elements to a “more readable” size. This results in different font sizes on your website in mobile view. To avoid this problem you can simply add a single line in your css.

html {
-webkit-text-size-adjust: none;
}

This disables the automatic size adjustment on the iphone. Another common problem are flexible images on your responsive website. Often the images are displayed with a wrong width-to-height ratio when the browser only refers to a percentage width. An easy workaround, without complex javascript image managing, can solve the problem with css.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Note that this solution is not saving any data transfer because the full resolution of the image is always downloaded.

More tips for coding with media queries can be found in that article on webdesignerwall.