Back in June when I was working at Rogers, I was assigned with the task of creating a mobile-friendly microsite. One of the magazines that Rogers Publishing creates was going to have a QR code on the cover and they wanted their readers to be directed to this microsite when they scanned it with their phones.
From what I learned in school, to convert an HTML/CSS site to a mobile-friendly version, you just dumb down the CSS a lot and presto! It's ready for a hand-held device. Kinda sorta.
I ran into some issues. It worked when I tested it in a simulator, but on my iPhone, it didn't. Surprise, surprise.
I learned from my coworker that Opera has a mobile emulator (which you down download here) and used it to test my progress.
I have an iPhone 4, so I figured I better test it on my phone just in case and sure enough, issues. I played with my CSS as far as my knowledge would take me and then let a CSS-whiz coworker take a look. I think she basically redid a lot of my code because I'm a total noob at this stuff still, but the most important things I learned from everything is: why the iPhone drives developers batty and the use of !important.
I scoured the internet to find a solution for the discrepancy between my site working in an emulator, but not on my iPhone. I came across this article, which explains that because Apple is full of themselves and knows that their iPhone is capable of displaying a full web page because its resolution is so magnificent, its mobile browser refuses to read the lovely mobile-friendly CSS you've just written.
I think Apple missed the point. As an iPhone user myself, I hate having to zoom in on a web page my phone has decided is just fine to display in the desktop version, completely disregarding that my astigmatic eyeballs don't do well with 3pt type. Just because the iPhone can display desktop versions of sites doesn't mean it should.
The work around is that you have to force the iPhone to display your site in its mobile layout. From what I understand, the iPhone does read your mobile CSS, because its browser is still recognized as a mobile browser, but it overrides that recognition and goes back to the desktop version. In order to force the iPhone to stick with your mobile CSS, you have to use !important in your CSS.
This is a pretty good article explaining the use of !important. Basically, what !important does is, when written within one of your CSS rules, it tells the browser that that rule is the most "!important" and to display this rule regardless of anything else in the code or other CSS files like your desktop CSS.
So, for example, keeping the width of the page narrow is very important for making your CSS work on an iPhone:
#PageContainer {
width: 320px !important;
background-color: #666;
}
By adding !important as I did above, it forces the mobile browser to display the PageContainer's width as 320 pixels regardless of anything else within your CSS that might be conflicting with it.
I used !important for other elements besides the width, but I think it's best to play with your CSS and see where you need it since your site may be different from my mine. I used the width as an example because that's where I was having the most frustrating time.
In conclusion, less is more on all mobile devices, including iPhones. It makes usability friendlier and easier to navigate. When the iPhone tries really hard not to read your lovely mobile-friendly CSS, use !important in your CSS rules to force it to display the way you want it.
Hope this helps somebody!
No comments:
Post a Comment