sheen effect image

Tze-chiu Lei

Web Developer

Share

Tag: mobile

Responsive now!

OK, I just finished re-styling this site to be responsive!  Let’s call this phase 1, ‘cuz the blog’s hidden on small screens.

If you really miss the blog on your smartphone, please leave a Comment!  I’ll monitor this post, and if enough Comments say include the Blog on small screens then I’ll do it.  I just don’t think people read and respond to blogs on a phone, that’s all.

The site-image hover popup with site details are not ported yet to touch-screens — a TODO item for later.

Bottom line, you won’t have to squint when you view Tze1.com on a phone anymore.  I’m planning to redesign the whole layout this Summer, so this pass was a quick one.

Feature-Detection v. Browser-Sniffing

Whenever cross-browser support includes mobile, use browser-side feature-detection for styling/functionality, and server-side browser-sniffing for desktop/mobile content management.

Ever since I learned a few years ago that best practices discourage browser-sniffing for cross-browser support, I’ve been using feature-detection instead.  However, for mobile support my challenge goes beyond styling and functionality…

Because mobile data plans are expensive, I need to also manage the amount of content sent to devices.  Using feature-detection to hide desktop-only content from mobile browsers won’t help on this count — the device has already downloaded the desktop content and wasted that bandwidth, before feature-detection occurs browser-side.

What I needed for mobile support content management was server-side browser-sniffing.  I don’t think there’s any other way to manage what kind of content gets sent out in the first place.  This would enable me to send only mobile content to mobile browsers — the server would omit sending any desktop-only content, thus saving bandwidth.

Server-side browser-sniffing would also give me the option of redirecting mobile browsers to a completely different subdomain, say m.tze1.com.  For now though, I think I’ll stick with just one domain to preserve maintenance efficiency.

So, does the feature-detection best practice still apply?  Yes, but only browser-side and for styling and functionality.  For desktop/mobile content management, use server-side browser-sniffing.

Google could only help me to a certain extent on this topic, because most online articles would focus on only styling/functionality or only content management.  Browser-sniffing would always be discouraged in styling/functionality articles, but always cited as the only way to implement desktop/mobile support in content management articles.  It took me quite a while to figure out that the two categories of articles were not actually contradictory but rather complementary!  This is why I’m posting here, because I could see other developers scratching their heads like I did about this topic.

Hope this helps someone!  As always, please chime in and let me know YOUR thoughts!  🙂