ARROYOCODE

Responsive Web Design, Mobile Websites and Knowing the Audience

Introduction

user

ARROYOCODE

A former IT/IS manager turned developer, husband, and co-creator of three whom have yet to use a WYSIWYG.

responsive web design, user experience, techniques

Responsive Web Design, Mobile Websites and Knowing the Audience

Posted by Greg Arroyo on .
Featured

responsive web design, user experience, techniques

Responsive Web Design, Mobile Websites and Knowing the Audience

Posted by Greg Arroyo on .

Mobile device detection for device/genre optimized views (i.e.: phone, tablet, etc.)? Maybe a Responsive layout to keep things more flexible? In a recent Pew Internet Commentary, 56% of American adults ages 18+ own/use a smart phone. That being said, mobile content will only continue to grow and dwarf standard desktop versions as a primary form of information delivery on the Internet. Aside from Javascript, an rich understanding of mobile-focused web craftmanship is probably the second most important skill moving forward and is a highly sought after skillset of employers, product developers, service sites to name a few.

But what if your target audience is predominantly mobile focused and you wish to provide content tailored to specific devices? What if you want to reach the audience with a consistent, easier to manage UI?

Mobile? Responsive? How Do They Differ?

Mobile sites may or may not be ports of existing desktop sites, but they often make use existing assets with the goal of providing users an optimized web browsing experience tailored to their device. Responsive setups offer more uniformity across various devices and typically are "fluid-like", automatically adjusting or "responding" to usage (i.e.: flipping a mobile phone or tablet between portrait and landscape modes, re-sizing browser windows).

The Responsive Arroyocode Blog

Blog viewed on iPhone 5S and iPad 3

Blog viewed on Windows 7 via Chrome Browser

The Arroyocode Blog makes use of Responsive Web Design techniques to make it's content available to all devices. Its goal? Clean, lightly formated is the most important objective. As you can see, context includes heavy text, code samples and images, maybe even a simple contact form. Being that it isn't necessary to fill viewers screens with anything more than simple navigation and content to read, the Responsive approach made the most sense.

The Case For Responsive Web Design

Aside from mobile first development, responsive web design provides users a friendly way of accessing the same HTML on all devices in a more consistent asthetic manner through the use of CSS techniques. They're built to allow content to simply restructure and flow to fit automatically. If frequent content updates are important, Responsive design and layouts, having a single code base, can be ARE significantly easier to routinely maintain and provide a depth of content through re-positioning of elements in a manner that everything is visible. This is often the opposite perception of mobile sites where you can't necessarily display everything on one screen due to size constraints leading to content reduction or "lack of context".

Common CSS techniques including @media queries

@media only screen and (min-width: 480px) and (max-width: 767px) { }

, responsive image handling

img {  
    max-width: 100%;
}

can have significant SEO benefits (per Google) in the fact that both Googlebot and Googlebot-Mobile user agents automatically detect Responsive Web Design setups provided they have access to site assets (CSS, Javascript, images). Google takes it a step further indicating it's their "recommended configuration".

Responsive sites are nearly always lighter and free from a lot of the interactive components known to slow things down as they're typically designed to account for varying devices, some of which, are hardware-challenged. Speedier, easier to maintain, consistent/common look and feel across varying viewports, why in the world would one ever consider a mobile site?

The Case For Mobile Site Development

Your audience is predominantly mobile-focused, requires fully-functional experience on mobile devices or perhaps you wish to target device genres with specific, well optimized content. The mobile site allows the re-purposing of content of an existing web application or website by offering a different experience, usually via the same URL.

Consider the opportunity of marketing a new Android or iPhone app for a service you might sell. You wish to offer standard content to desktop and tablet users but want to be more "call to action" focused on the limited display sizes of smartphones (i.e.: store locations, contact scenarios, specials, coupons and promotions). Mobile sites have this distinct functionality in that they automatically "redirect" users to mobile versions of a web site/application all the while using the same existing URL.

Using something akin to the following in an MVC application and 51Degrees would automatically return a "phone" specific view by requested URL (i.e.: Index.cshtml redirected to Index.Phone.cshtml):

protected void Application_Start()  
{
...
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("phone")  
{
ContextCondition = Context => Context.Request.Browser["IsMobile"] == "True" &&  Context.Request.Browser["IsTablet"] == "False"  
});
...
}

Being its own entity, content can be developed to be free of additional code required to show, hide and/or re-position elements to make way for a truly focused experience, say links and images pertaining to your app in the online market place.

Hmm... Now What?

Understanding the investment, your audience and providing the quality experience that makes the first-time anonymous viewer a new member of your community or future loyal customer must permeate throughout your development objectives.

Have an opinion on either side of fence? Please comment below.

user

Greg Arroyo

A former IT/IS manager turned developer, husband, and co-creator of three whom have yet to use a WYSIWYG.