Mobile Friendly Web Design Made Easy
Unlike a lot of people I still browse the web, check my email, and send instant messages using my computer – not my cell phone. My Razr2 uses 3G technology so I do get broadband speed, but I personally don’t see the point of surfing on a 2.2” screen. With that all being said I know that I’m part of an increasingly shrinking minority.
Yesterday, I happened upon a Blogging Q&A article on DailyBlogTips.com. One of the questions was about making blogs mobile friendly. I agree with the answer that was given but curiosity led me to check out how 6bdesign.com looked on my phone:
It actually looked pretty good! It wasn’t quite as eye-catching as it is on a computer monitor but it was at least navigable. I also decided to check out the link to the dotMobi Emulator; a site that emulates what web pages look like on a Sony Ericcsson K750 and Nokia N70. 6bdesign.com didn’t look quite as good and the navigation was pretty messy:
I’m not too troubled by my discovery, but if 6bdesign.com were a site that received lots of mobile visitors, I would be. Just in case your site does receive lots of hits from people on cell phones, here is an easy way to make their experience browsing your site a little better using simple CSS:
Make a separate style designed especially for mobile visitors. Keep in mind that floats, frames, pop-up windows, drop-down menus, and large images probably won’t display correctly on a mobile device. Also, you may want to use display: none; to block your images if your images are too big to display. Also think about how your navigation will look. Remember to keep it simple! You want to make your content accessible first and foremost. Once you’ve finished with the CSS, you can add it to your page. There are 3 ways to do this. Just make sure that the media type is for your mobile-friendly CSS is defined as handheld:
- Link to the style sheet:
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">
I prefer this method. It’s the most effective way.
- Import the style sheet:
<style type="text/css" media="handheld"> @import "mobile.css"; </style>
Although this method will allow the page to load faster on mobile devices, it isn’t supported by all browsers and devices.
- Use inline style:
<style type="text/css"> @media handheld { body { background-image: url(/images/plain-bg.jpg); } h2 { font-size: 14px; } p { font-size: 10px; } } </style>Since this method defines the styles in the <head> section of your page, it isn’t as preferred as the first method. Anytime you can link to a style sheet you should - it makes your page load faster and allows search engines to index the content of your page more efficiently.
I hope this helps. Please feel free to leave a comment if you have anything else to add!
