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.”
VIEW IN ENGLISH ❏
Con un recién instalado DDR y “minipage” bilingüe W3C mobileOK , UMI se une a jugadores importantes como Google, Facebook, Twitter y Netflix en la elección del RWD “dispositivo-consciente” en lugar del “dispositivo-agnóstico”.
United Medical Industries – un servicio de eliminación de desechos biomédicos más conocido como “UMI” y basado en Miami – completó recientemente una serie de adiciones y mejoras a UmiWaste.com destinados a aumentar la visibilidad web de este para los generadores de residuos hospitalarios en toda la Florida por ampliando su acceso a través del Móvil Web. El objetivo de UMI presidente José Yero fue hacer el sitio web HTML5/CSS3 W3C-válido más “responsivo”, que en la jerga del desarrollo web significa a optimizar experiencias espectador a través el adaptacion flexiblemente de la presentación del contenido para asegurar una lectura fácil y navegación sencilla a través de la más amplia gama de dispositivos – escritorio, portátiles, y tablet a las móviles navegadores.
“Hay dos escuelas básicas de pensamiento cuando se trata de entregar en RWD [diseño web responsivo],” explica Bruce Arnold, el desarrollador web desde Miami cual Yero retenido para diseñar el sitio original y hacer todas las actualizaciones. “El enfoque dispositivo-agnóstico para diseño y desarrollo web responsivo omiso lado-servidor navegador olfateando y detección del dispositivos y se basa en lado-cliente CSS preguntas de los medios combinados con formatos fluidos y imágenes flexibles. El enfoque dispositivo-consciente para diseño y desarrollo web responsivo abraza lado-servidor navegador olfateando y detección del dispositivos a través de repositorios de descripción de dispositivos (DDR), PHP/MySQL y jQuery (Javascript). Mi opinión es utilizar preguntas de los medios, presentaciones fluidas y las imágenes de tamaño en forma de porcentajes cuando sea necesario, pero para diseño web responsivo en realidad la detección de dispositivo confiable es necesario.”
Para lograr eso para UmiWaste.com, Arnold instalado una “WURFL DDR” para permitir la detección lado-servidor del dispositivos vinculado a una base de capacidades y – a diferencia de CSS preguntas de los medios – permitir una base común de contenido para ser formateado para un dispositivo específico (por ejemplo, Amazon Kindle o el iPhone de Apple), plataforma (por ejemplo, Android o iOS) o el navegador (por ejemplo, Opera Mobile o Safari) sin imponiendo ninguna carga adicional en tableta o teléfono inteligente CPUs. Para los teléfonos móviles no tan inteligentes – o aproximadamente el 75% del mercado de Internet móvil – esto también permite la redirección de URL a una “minipage” nueva bilingüe (Español/Inglés) W3C mobileOK, que aún más antiguos teléfonos celulares que tienen microbrowsers tal como Openwave o Obigo puede manejar.
UMI no es la única empresa tomando el enfoque dispositivo-consciente para diseño web responsivo. De acuerdo con una Smashing Magazine artículo de opinión reciente de Ronan Cremin y Luca Passani titulado “Server-Side Device Detection…“:
“Si bien muchos diseñadores [dispositivo agnóstico] abrazan la naturaleza flexible de la Web, con detección dispositivo [dispositivo consciente] usted puede ajustar la experiencia para adaptarse exactamente a las necesidades del usuario y el dispositivo que estén utilizando. Esto es a menudo el principal argumento para la detección de dispositivos – le permite ofrecer una experiencia con contenido pequeño para los teléfonos de características, un rico JavaScript mejorada de soluciones para smartphones, y una experiencia magra de vuelta a los televisores, todo desde la misma URL. En mi opinión, ninguna otra técnica tiene este rango expresivo hoy. Esta es la razón por la que Facebook, Google, eBay, Yahoo, Netflix y muchas otras marcas de Internet más importantes utilizar la detección de dispositivo [y] por qué Twitter recientemente abandonó su enfoque lado-cliente [dispositivo agnóstico] en favor de un enfoque lado-servidor [dispositivo consciente].”
Tags: css3, ecommerce, html5, internationalization, javascript, jquery, mysql, php, semantic web, shopping carts, web 3.0, wordpress development
Many people and the media tend to treat “web design” vs “web development” as interchangeable phrases when actually they are interdependent processes. Some generalize by saying a “web designer” is concerned with how the website LOOKS while a “web developer” is focused on what the website DOES, but even that’s an oversimplification:
HOW A WEBSITE LOOKS is a function of aesthetics and accessibility. Stated another way, how a website looks depends on both how it was designed and how it is delivered. The web designer’s responsibilities in this regard typically include the creation, selection or assimilation of color palettes, backgrounds, foregrounds, gradients, overlays, fonts, copy, imagery, screen layout, and that all-important intangible “look and feel”. The web developer’s contributions include the website template, architecture, navigation, user agent access and the World Wide Web Consortium (W3C) Semantic Web (Web 3.0), WAI/WCAG/Section 508 and Mobile Web standards compliance requirements associated with each.
WHAT A WEBSITE DOES can be viewed as a function of medium and mechanics. In this context, “medium” refers to format and content while “mechanics” refers to behavior. Here the web designer combines the application of hypertext markup language (e.g. XHTML or HTML5) for messaging and cascading stylesheets (e.g. CSS or CSS3) for presentation in such a way as to create a web browser rendered result that is visually appealing and – for marketing and sales web pages – psychologically compelling. The web developer adds animation, interactive behavior and transaction processing capabilities to the mix using dynamic scripting languages like PHP, relational databases like MySQL, server-side CGI applications written in Perl, client-side unobtrusive Javascript programming, jQuery plugins and AJAX updates, and increasing popular Mobile Web apps.
Yes, “web design” and “web development” are different concepts. But hopefully we have shown here that these processes are inextricably intertwined … two sides of the same coin … and the Yin and Yang of website creation. Give us a call and we’ll show you how we bring the two together to create winning business and ecommerce websites!
Tags: css3, design, designers, designs, develop, developer, developers, ecommerce, florida, html5, javascript, jquery, miami, miami beach, mobile apps, mobile web, mysql, perl, php, semantic web, w3c compliance, w3c standards, w3c validation, web 3.0
