Responsive Web Design Makes UMI Mobile Friendly

Posted by: Web Designers Miami Florida in Mobile Web Designers,Responsive Web Design,Spanglish Websites,W3C Compliance,Web Designer Miami on October 28th, 2012

VER EN ESPAÑOL ❏

With their newly-installed DDR and bilingual W3C mobileOK “minipage”, UMI joins major players like Google, Facebook, Twitter and Netflix in choosing server-side device detection over client-side media queries to deliver RWD.

United Medical Industries – a Miami-based biomedical waste disposal service better known as “UMI” – recently completed a series of additions and upgrades to UmiWaste.com intended to increase their online visibility to medical waste generators across Florida by expanding their accessibility across the Mobile Web. The goal of UMI’s hands-on president Jose Yero was to make their W3C standards-compliant HTML5/CSS3 website more “responsive”, which in the latest web development lingo means optimizing the largest number of viewer experiences by flexibly tailoring the presentation of content to assure easy reading and simple navigation across the broadest range of desktop, notebook, tablet and mobile devices and browsers.

“There are two basic schools of thought when in comes to delivering RWD [responsive web design],” explains Bruce Arnold, the Miami web developer retained by Yero for the original design and all upgrades to the site. “The ‘device-agnostic’ approach ignores device detection and relies on client-side CSS media queries combined with so-called fluid grids [web page layouts] and flexible images. The ‘device-aware’ approach, on the other hand, relies on device detection via DDRs [device description repositories], PHP and jQuery (Javascript). My take is to use media queries, fluid layouts and images sized as percentages when needed, but for truly responsive web design reliable device detection is necessary.”

To accomplish that for UmiWaste.com, Arnold installed a comprehensive WURFL DDR to enable server-side device detection linked to a capabilities database and – unlike CSS media queries – allow a common base of content to be formatted for a specific device (e.g. Amazon Kindle or Apple iPhone), platform (e.g. Android or iOS) or browser (e.g. Opera Mobile or Safari) without placing any extra load on tablet or smartphone CPUs. For not-so-smart mobile phones – or roughly 75% of the Mobile Web marketplace – this also allows URL redirection to a new bilingual (Spanish/English) W3C mobileOK “minipage” which even older cell phones with microbrowsers like Openwave or Obigo can handle.

UMI is not the only company taking the device-aware approach to responsive web design. According to a recent Smashing Magazine op-ed by Ronan Cremin and Luca Passani entitled “Server-Side Device Detection…“:

“While many designers embrace the flexible nature of the Web, with device detection you can fine-tune the experience to exactly match the requirements of the user and the device they are using. This is often the main argument for device detection – it enables you to deliver a small contained experience to feature phones, a rich JavaScript-enhanced solution to smartphones and a lean-back experience to TVs, all from the same URL… This is the reason why Facebook, Google, eBay, Yahoo, Netflix and many other major Internet brands use device detection [and] why Twitter recently abandoned its client-side rendering approach in favor of a server-side model.”

Tags: css3, ecommerce, html5, internationalization, javascript, jquery, mysql, php, semantic web, shopping carts, web 3.0, wordpress development

Comments Off

Responsive Web Design Testing: Ten Testers That Aren’t Tests

Posted by: Web Designers Miami Florida in Mobile Web Designers,Responsive Web Design,Spanglish Websites,W3C Compliance,Web Designer Miami on October 12th, 2012

VER EN ESPAÑOL ❏

Over the past week on Twitter I outed ten Responsive Web Design Testers that don’t really test RWD:

Shortly thereafter the dig me paper.li of a webdev wannabe named Simon Manning picked up my links but not my comments, leaving the impression I was praising rather than panning the posers who put them forward. This will correct young Simon’s error:

What most of the seven testers above basically do is render your web page source in “iFrames” with widths set to match the screen resolutions of popular tablet and mobile devices such as the slave-produced Apple iPad and iPhone. That might show you how your media queries, fluid grids and flexible images render within a given iframe in a given browser of a given version, but that is not the same as showing you how your web pages will render on actual iOS, Android or other mobile devices. Why? Because…

iFrames are not iPhones!

#RWD testers that ignore things like device and capability detection via user agent strings and DDRs (device description repositories) give you virtual but not reality. We have website templates with fixed headers on standard browsers but not on tablet or mobile. None of the testers above reflected that. We have web pages where the title text for standard and mobile browsers is not the same. None of these testers reflected that. We have blogs which show the same content in different themes for standard versus smartphone browsers. None of these testers reflected that. We have URLs which redirect not-so-smart phones from web page content they can’t handle to smaller W3C mobileOK pages they can. And none of these testers reflected that, either.

I could go on, but do I need to?

Forget these charlatan testers. If truly responsive web design is what you seek, then mobile friendly web 3.0 front-end development is what you need. If you want broad accessibility like this, your web page source will have to pass meaningful validations like these.