We’ve been getting more and more requests for mobile friendly websites – sites that deliver a consistent experience on any screen from enormous 27-inch monitors to iPhones. These sites don’t just redirect mobile users to a different, mobile-specific site — these sites conform to their specific needs. All mobile users have to do is type in the website address and they have a site that works and looks great.
We’ve found that good design often translates well to mobile browsers. Just like when we designed sites before the growth of mobile, we use div elements, CSS styling, and avoid flash. A key addition we’ve made to our bag of tricks is adding mobile friendly forms thanks to HTML5.
Another important element of designing for mobile is responding to different screen sizes using different CSS styles. This is known as “responsive layout”, and can be done using “media queries”, which help browsers define which stylesheet to use.
Developers can also use what’s called “fluid” styling techniques to specify styles in percentages (rather than in rigid pixels) and fonts in “ems”, a relative size that’s the font equivalent of percentage.
Rather than delve into creating a responsive design from scratch, the user-friendly blogging platform and content management system WordPress makes responsive design simpler thanks to a handful of themes that are designed to show content on screens of different sizes and dimensions.
A great example of this is the Twenty Eleven theme, which was the new default theme when WordPress 3.2 was released recently. Just by changing the width of your browser, you can see how this theme changes for different browser and screen sizes. In browsers wider than 800 pixels, the website is shown normally. But as the browser gets smaller, things start to get interesting.
When the browser is 800 pixels or narrower, the basic layout is simplified. Any content on a right-side column has been moved to the bottom of the page. This streamlined layout emphasizes a single, linear column that makes scrolling through content easy.
As the browser shrinks to 650 pixel width and lower, the font sizes reduce for better readability on smaller devices. Also, because fonts in Twenty Eleven are defined in ems, they will scale based on what’s normal in a browser. This means that when a reader changes the browser font size, large fonts will remain relatively large, and small fonts relatively small.
These are some of the ways Twenty Eleven helps ensure your website looks its best at any size.
Twenty Eleven can be used to easily create many types of sites, but one of the most impressive is a mobile-friendly photography or design portfolio site. To make sure your image posts look their best, choose the click the right “post format”. There are various post formats such as “asides” and “links” but the one you’ll pay attention to most for this type of site is “galleries” and “images”. These post formats help you neatly display your photos and designs, and, on top of it all, it’s mobile friendly.
Aside from Twenty Eleven, there are some other free WordPress themes with responsive layouts, such as the beautiful Yoko theme, the clean and minimalist Scherzo theme, and the Mac-styled iTheme2 theme. These themes offer many different options for creating different sites that all respond to the browsers and devices they are shown on.
Need more help ensuring that your site looks its best on any screen? Kobayashi Online can help you deliver great experiences to your visitors, no matter what device they use!