Automatically adjust page layout and font sizes

<head>

…

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

…

</head>

Eventfy without viewport tweak

Eventfy with viewport tweak

Use responsive layouts

@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



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! Setting this up was simple, I created a CSS class "", and in the @media with "" sections I override it with a "". This way all the extra content that fits nicely in the big PC browser window but doesn't in smaller devices gets hidden.

Many people these days rely more on their mobile devices - phones, tablets etc - to access the Internet than on desktop / laptop computers. As such, it is a common requirement in many websites today that we design / test / tune the usability not just for different computer browsers but also for mobile devices.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: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:Just include this single line in the head element of all your HTML pages:This is how www.eventfy.com looks like in the iPhone without and with this single-line code:It may not look like a lot but with this minor tweak users don't need to constantly zoom in and scroll horizontally in every page. Also, it does not break usability in PC browsers.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: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.