Major reductions in data transfer, fewer server requests, and quicker updates are just some of many great advantages to saying no to the use of images in your mobile design. Going image free means having less assets to manage in a mobile specific style sheet, and more importantly, that your pages will adapt more easily to a larger range of different screen sizes thus improving CSS compatibility.
Using a CSS Gradient to Replace Static Width Image Buttons
In case you wish to add a gradient to a button to tie it into your design, an image or a CSS sprite might work well for desktop; however, with so many screen sizes and variations in CSS, supporting a statically sized image button with a CSS controlled rollover becomes a very complex solution which does not degrade very well as CSS support and screen sizes fall away.
The use of CSS3 gradients allows for complex styling, with a complex rollover, while letting the button degrade gracefully. It is also possible to use a variable width for a button using a percentage value based on the screen size without sacrificing quality and usability/readability as you would with an image button.
The following tool can be used to quickly create any gradient you want: http://gradients.glrzad.com
Using “border-radius” to Eliminate the Need for Complex Background Images
Similarly to the gradient effect, in this scenario, what was once too risky to do with CSS (due to browser compatibility issues) or too complicated to do without it, has become very simple to accomplish on modern smart phones, while degrading gracefully on older or non-WebKit devices.
Border radius replaces the need for multiple divs and background images to achieve rounded corners on an element. The Rube Goldeberg-esque combination of elements that made up older attempts at rounded corners have the potential to break a small section of a site on a modern phone, or in the worst case scenario destroy the look and usability of a site when it is rendered on an older phone.
Another advantage is that border radius allows you to adjust the roundness of corners on any element, not only div elements. That means you can safely apply custom styling to something like a button element and achieve a rounded look. This is something that would have previously taken a static image to achieve.
How To Do it:
http://www.css3.info/preview/rounded-border/
Something We Expect to See in the Future
Staying on the topic of making a mobile site look good without using images, something that we expect to see become more and more compatible in the future is the use of text-shadow: while this does work in the latest WebKit browsers, it does not have a lot of backward compatibility, so we suggest staying away from using it as a significant band-aid to help readability. Instead use it to enhance the experience for your users with compatible phones. We have begun using this on sites with great success.
Learn more:
http://www.css3.info/preview/text-shadow/
Example:
m.makeuseof.com
Important Closing Thoughts
While working on mobile, keeping things simple is paramount to a successful design. “Less is more” applies in all aspects, right down to CSS and the number of moving parts on the site. The fewer moving parts you have, the less possibility there is for an older browser to destroy the user’s entire experience!
Continue Reading →
