While not every website has to cater to mobile devices this article gives some ideas on how you can make new and existing websites more mobile-friendly without requiring lots of coding or duplication.
If you are building a new website from scratch there are few tools that can help kick-start your own project such as:
- Initializr: http://www.initializr.com/
These tools are project skeletons you can use to start your own projects. They already integrate / implement several best practices, proven technologies and tricks that can save you a lot of time.
If you already have a website and you can't rewrite / refactor it on top of one of the projects above then you have few options:
You can write a completely separate mobile site - some sites take this route since this allows full separation between the "PC version" and the mobile version of their sites. The obvious drawback is that now you have 2 sites to maintain.
Another option is to pick few tweaks from the projects above and add it in your existing site. For example, many times we can make existing websites more mobile-friendly with few simple changes:
Automatically adjust page layout and font sizes
Just include this single line in the head element of all your HTML pages:
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
…
</head>
This is how www.eventfy.com looks like in the iPhone without and with this single-line code:
 |
| Eventfy without viewport tweak |
 |
| Eventfy with viewport tweak |
Use responsive layouts
If you use fixed layouts where we position DIVs regardless of the client's resolution users will likely have to scroll horizontally. You can improve things considerably if you use percentages to set the widths of your DIVs. This will avoid the scroll bars but may result in tiny columns for users with smaller screens.
A better approach would be to setup the layout so that it properly adapts to the client's resolution / screen width. Check out Bootstrap's live grid example here. Note that when you open it with your PC browser maximized the 9 columns (those marked with '1') are listed horizontally. When you resize the browser reducing the window width the layout will automatically change so that all '1' columns are stacked on top of each other.
It sure helps if you can use something like Twitter Bootstrap, but if not you can still achieve similar results with custom CSS code. More specifically, you can use the @media tag to query information about your client and tweak your CSS classes. For example:
@media all {
// add common CSS here
}
/*--- iPad ---*/
/*--- full screen mode ---*/
@media (device-width: 768px) and (orientation: portrait) {
.panel {
height : 934px; /*1004-80*/
}
}
/*--- browser mode ---*/
@media (device-width: 768px) and (orientation: landscape) {
.panel {
height : 668px; /*748-80*/
}
}
/*--- iPhone / small screens ---*/
/*--- full screen mode ---*/
@media (max-width: 480px) and (orientation: portrait) {
.panel {
height : 380px; /*460-80*/
}
}
With the code above the "panel" class will be tweaked based on the client's resolution.
You can find a better example of what you can do with CSS and media queries in the www.eventfy.com website. In common PC resolutions Eventfy's top menu bar lists all items horizontally. In smaller screens it consolidate items in a drop-down list to save space. This is what it looks like:
 |
| Eventfy's top menu bar - full monitor resolution |
 |
| Eventfy's top menu bar - browser window resized at 360px width |
 |
| Eventfy's top menu bar, expanded menu - browser window resized at 360px width |
Another thing I did to make better use of small mobile screens is to hide some unimportant content. For example, the long marketing message below the Eventfy title only shows up in big browser windows, and is hidden in smaller devices.
Setting this up was simple, I created a CSS class "details", and in the @media with "max-width: 480px" sections I override it with a "display: none;". This way all the extra content that fits nicely in the big PC browser window but doesn't in smaller devices gets hidden.
Conclusion
- If you are building a new website, consider making it compatible with mobile devices from the start. It isn't extra work if you are doing it from the beginning.
- If you already have existing websites, determine if it makes sense to make them mobile-friendly. Not every website would benefit with support for mobile devices.
- Test your sites with mobile devices. Pick someone to test it and give you feedback, or pretend you are one of your users. Identify main usability items that can be improved (e.g. reduce zooming / scrolling, adjust layout, hide extra content etc).
- Try tools to help improve layout in different devices / browsers without increasing maintenance. These can save you a lot of time coding / tweaking things by hand.
- Implement tweaks to improve usability.
And that's it for now, happy coding folks!
Thanks for the post
ReplyDeletewe have showcased mobile websites
Great insights. I'd also want to add something for the benefit of your readers. When converting your a site to a more mobile friendly one remember to always think of your users. Pay attention to how they can access and interact on your site. See to it that the text is clearly displayed and buttons to click are big enough. If you can, ask them for suggestions, recommendations, or feedback to be able to make your mobile website more effective.
ReplyDelete