With the release of the iPhone 5, there was a lot of hype that it was going to affect mobile site design. However, at least for front-end developers like myself, it was not some groundbreaking change that would force us to create separate designs for different iPhones. The fact is, most designers and developers create their CSS in mind with support for a wide array of mobile devices that use multiple platforms and screen sizes.
Android is quite similar to iPhone as both use webkit-based browsers by default. So with these two platforms in mind, here are some easy steps to making sure your custom site design works exactly how you want it to:
Know your requirements
Know what platforms you/your client/your company will be supporting and which ones they will be focusing on. If you only need to support iPhone and Android, a very easy way to reduce mobile CSS file size is to only use -webkit and W3C CSS styles. If you do need to support mobile Opera and mobile Firefox, see if you can create separate CSS files for these browsers and add their -o and -moz styles in there. This can keep loading times down by breaking down the CSS into more digestible chunks based on the device.
Telephone link
When I first started mobile development, one of the most annoying and frustrating things to override was the blue link made on iPhone for phone numbers. iPhone automatically assumes any string of numbers that matches its telephone algorithm should be turned into links that the user can call just by tapping the number.
This is how you override that:
a[href^=tel]{color:#000000;}.
This makes all phone number links black by default. And that is pure CSS even thought to this day it looks more like a jQuery selector, at least to me.
Flexibility is key
While not all projects call for a responsive design, it is always a good idea to make all your widths flexible. By this I mean use percentages. Width 100% on the html, body, and the first wrapper div are the best place to start.
I also recommend using percentages as much as possible in the internal areas because then you have the starts of a highly responsive design.
Single column
This one is pretty much a given, but a mobile site should be a single column design, at least when in portrait mode. This is because you generally have very little screen size to work with and by making the basic layout more than 1 column you are making it even smaller. You can get more creative in landscape mode, which is what makes responsive design more powerful, but if you’re new to mobile, sticking to one column will make your life easier.
Loading time
There are many factors of loading time outside of our control, but one of the easiest ways to speed things use is reducing the size of the CSS. There are numerous ways to do this but my preferred method is to create basic and generalized classes that I can use repeatedly. From there I use a second class to make specific alterations to each area. And always make sure to minify your CSS, but keep an unminified version with comments so you can go back and make quick edits when the time comes. These same rules also apply to any JavaScript files you create. Dividing your CSS by device (if possible, as mentioned above) can crunch the sizes too.
Images
Use CSS3 background gradients in place of images where it makes sense. These load much faster on slower connections like 3G. Also play around with carved images as much as you can to reduce their file size as much as possible. I try to make all my images under 2kb, but ideally less than 1kb is best.
Also consider graphic spriting, which puts a number of graphics together one one larger image. While it makes the resulting image a bit larger, it reduces the number of times the phone needs to reach out for graphics. One graphic call can function for multiple spots, and that ultimately is faster.
CSS 3
While we’re on the subject of CSS 3, the reasons we largely avoid it in desktop browsers is because of support. Mobile devices, by the nature of being newer, support these features much more broadly, and techniques you can execute in CSS are almost always going to be lighter in load time than a graphical equivalent. If you’ve been holding off, now’s a good time to experiment.
JavaScript events
One of the thing developers tend to overlook when creating a mobile site from an existing one is changing the JavaScript events to be more mobile friendly. If you are reusing the same JavaScript from the main site, replace the click events with touchend. Even better if you are using the latest version of jQuery, you can specify both in an on event $(‘#yourID’).on(‘click, touchend’, function(e){}); This helps register tap events better than click alone, which requires a slightly longer time to be pressed. It also means you do not have to create a new event; simply modify the one you have and it works, even if the element is added after the document ready with AJAX.
Think small, then big
That’s all the advice I have for you this time, but I have one more thing I would like to add. I am a big advocate of small screen first. If you have control over a project from the beginning, make the mobile site first! It is so much easier to expand a design than it is to shrink a desktop site down to mobile. And most of all have fun! Developing for mobile lets you try out all the latest CSS3 and HTML5 elements that desktop browsers may not support yet.
Have questions about mobile design or a technique you like to employ? Share it with us in the comments or tweet us @Pixafy!
Related posts:
