by Firefly Partners • 08.21.2013
I don’t know about you – but I am getting a little sick and tired of amazing technology advances around here. Phones, mobile operating systems, tablets, phablets. Just when you get a great looking, user-friendly website launched it seems there’s another device that makes it look crappy. Read on and learn how to decide what type of mobile/responsive option will work best for your needs and budget.
Jargon Demystified
Before we dive into the deep and of the pool, let’s define some terminology:
-
Device Detection: This is code that determines the physical device being used to look at your website If the device matches a pre-defined list of mobile devices, an alternate design can be displayed.
Fluid Layout: The design is coded using percentages rather than fixed width values so that it expands/contracts based on screen size.
Break point: Some defined pixel width at which different CSS is introduced to produce a different visual display. An iPhone has a different break point than an iPad, and an iPad Mini has yet another.
-
Responsive Website Design (RWD): Website design and development that uses a fluid layout and break points to produce a design that expands, contracts and gracefully changes depending on the width of the screen on which the page is being viewed.
What Type of Mobile Option Do I Need? What are the Main Differences & Similarities?
Now let’s take a look at a variety of common stops on the great mobile circle of life. As you read, think about where you currently are in your online ecosystem growth. Do you have time to start small or do your strategic directives require a whole new responsive website?
Mobile Forms
This is a great option for folks who don’t need a full mobile only or responsive site. Depending upon your online tools, it’s pretty standard to be able to add a mobile form to support your next campaign. Device detection can also be added to “desktop” versions of forms to redirect mobile users to the mobile version.
Mobile Version
If you have a website that you are happy with (and if it was built before 2009 you should not be happy with it – but that’s another blog post entirely), the best option for you could be creating a simple mobile version of your site and using device detection to serve it up. Combined with mobile forms, this option gets you really far without the time and financial impact of designing a fully responsive website. In this model, the mobile design is fluid – expanding and contracting based simply upon screen width. The navigation is equally simple, typically a subset of the full site navigation. Site pages display in a vertically stacked manner so your visitors just scroll up and down to see the content. Take a looky at the Nature Conservancy Canada mobile site that we designed and just launched a few weeks ago. Want to blow your mind? Look at it on your phone and desktop browser to see the differences in presentation!
Standard Responsive Websites
Here’s where many of our early adopting clients have landed. This flavor of responsiveness is well-suited for those organizations that need a site refresh or major overhaul without requiring a significant amount of advanced technical underpinnings. This is pretty much today’s version of the website design and development project we’ve all come to know and love. The site’s design elements begin to stack on top of each other in order to be viewed on a tablet or phone but they don’t really change order or appearance. The navigation options for smaller screens are simple yet can handle one or two levels of sub-navigation. Mobile forms are generally assumed to be part of this approach to provide a smooth and consistent experience for the visitor. Responsive design is not just for websites – we’ve applied this approach to add responsive functionality to peer-to-peer fundraising sites like the Orphan Drive for IRUSA.
Advanced Responsive Web Design
Otherwise known as ‘the full magilla’. You’re a perfect candidate for this if you want your tablet users to see a version of your site that is designed especially for that device and phone users will see their own version. Slide shows – a common homepage element – can appear or disappear depending on the screen size. The navigation options can be a bit more complex here as well. This approach would include a wireframe and design for each break point, so you are able to make adjustments in traditional website project revision rounds. Sometimes a designer will start with the wireframe for the smallest screen and add more elements as they wireframe the larger break points. Other situations call for starting with the traditional desktop site and modify/move/remove elements to accommodate a great user experience on phone and tablets. Mazon is using WordPress for their fully responsive website.
Whew – that was quite a tour and I didn’t even cover Google Glass. (No idea how we’ll all handle that one!) If you’re considering your mobile options and want to get some down-to-earth advice, contact us!
