Mobile meta tags
We can improve users browsing experience on certain devices by using the mobile webkit.Viewport
This meta tag tells the browser how content should fit on the device's screen.
The above example tells the browser to set the viewport to the width of the device with initial scale of 1.0. We can turn off zooming by setting user-scalable=no or can limit the scaling level.
You can also set the width to a pixel value (e.g. 320px) but note not all devices have same width so it's better to stick with device-width and let browser take care of the rest.
You can look into some device specific settings on Android and iOS to further improve user's experience.
Home Screen Icons
iOS and Android devices also accept a rel="apple-touch-icon" (iOS) and rel="apple-touch-icon-precomposed" (Android) for links. They get used as icon on the user's home screen when they bookmark your site.
CSS3 Media Queries
Media queries enables the content's presentation to be customized to a specific range of output devices without having to change the content itself.
Screen Sizes
The example below shows how we can target mobile devices
A media query with the "only" keyword will cause non CSS3-compliant browsers to ignore it. The following example would target tablet screen sizes.
Some of the styling changes that you should enforce:
- Reduce extra whitespace/padding across the site. Space is premium!
- Remove :hover states. They'll never been seen on touch devices.
- Adjust the layout to be single column.
- Remove the box-shadow around big container div. Large box shadows reduce page performance.
- Remove opacity changes. Changing alpha values is a performance hit on mobile.
CSS Frameworks
In context of responsive design CSS frameworks have many benefits. A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices. Here are few you can look into:
No comments:
Post a Comment