This is a blog post series tutorial for adapting your existing websites for mobile devices without building a separate mobile site. It shows, with examples, how with little changes in your HTML, CSS and Javascript code you can deliver much nicer user experience for small screen and mobile devices. You can make existing HTML designs more mobile friendly with selective CSS loading and HTML5 tags. Selective CSS loading with CSS3 media queries allow you to change layout depending on the browser screen size: this kind of layout is called responsive design.
The tutorial is divided to several, functionality specific, blog posts, each with screenshot examples, explanations and links for more in-depth information.
The tutorial was written in a conjunction with a consulting project for a Finnish public sector organization. As the one of the funding sources is Finnish tax money, including some of my very own pennies, it was a common interest to get the information born in the consultation project published.
Below is an example what one can accomplish.
The tutorial contents is outlined below. I’ll keep linking to new blog posts as I finish writing them. Stay tuned, by following the RSS feed or
Twitter.
- Introduction (part 1)
- Working on HTML(5) for mobile sites (part 2)
- There is no HTML5; there is only HTML
- Strategies for building a mobile site
- Tools for mobile site building
- Spoofing the development browser as mobile
- User agent detection
- Native apps
- Considerations when mobilizing a legacy website (part 3)
- Applying a hint of responsiveness on an existing layout
- Minizing code changes and risks associated with them
- Setting mobile browsing viewport (part 4)
- Including mobile specific CSS with media queries (part 5)
- Styling images for mobile with CSS width and max-width (part 6)
- Server-side image resizing solutions
- Styling HTML forms for mobile screens (part 7)
- Shortcutting unnecessary user choices
- HTML5 <input> element enhancements
- Zoom-on-orientation-change fix for mobile devices ( part 8 )
- Mobile web browser testing resources (part 9)
- Accessing different mobile browsers on devices and simulators
- Desktop web browser testing
- Testing mobile sites on iPhone and its simulator (part 10)
- Testing mobile sites on Android and its emulator (part 11)
- Testing mobile sites on Firefox Mobile and Opera Mini (aftermarket browsers) (part 12)
- Opera Mini
- Opera (not mini)
- Firefox Mobile (a.k.a. Fennec)
- Testing mobile sites on Nokia Series 60 and Meego (part 13)
- Testing mobie sites on Windows Mobile (Mango, others) (part 14)
- Conclusion (part 15)
