Website Design Across Devices & Mobile UI/UX

by Alex Stetson

Let me tell you something you already know: there are a zillion different smart phone and tablet devices on the market, each with its own variable screen size, resolution, favored browser, etc.

What you don’t know: “How will my site design render perfectly on every single mobile and desktop device and browser?”

The simple answer is it won’t. It’s become quite literally impossible to complete browser testing for compatibility on every device and browser, for every size screen, and all resolutions—there are just to many devices, variables, and combinations.

Responsive design addresses this this issue of design compatibility across platforms, which has become increasingly relevant, thanks to our beloved mobile devices.  A responsive website design will automatically resize and change to fit into the screen size you are viewing it on, while still retaining key elements of the page.

Having a responsive site design definitely improves the odds of having your website look pretty good on most devices.  The way it works is your web designer defines 3 or so pixel ranges, and designs a separate layout/design for each range.  The largest pixel range is optimized for desktop, the middle range for tablets, and smallest for smartphone size.

Check out an example of this on smashingmagazine.com. As you resize your browser to make the screen smaller, the advertisements on the right side of the page drop out of view; if you size down even more so that your browser is as big as an iPhone screen, the top nav disappears completely and is re-instated as a drop down menu.  The design scales down incrementally depending on the screen size. The mobile user is left with the essentials of the page they’re viewing.

Notice how the navigation changed according to browser size in the example above.  These sort of considerations are paramount to delivering a superb user experience on any device, and these user interface details should be valued more than a design’s ability to render perfectly, everywhere.

Takeaway: Don’t be a freak. Instead of obsessing over design perfection on every single device, browser, etc, consider spending more time and effort on improving user experience on most devices; designing better interfaces for the majority of users.

The only question that remains is where, at what browser size, should you begin crafting your design? Now that so many visitors are mobile, should your mobile design come first? How & when should a site design begin with a smartphone design, and then end with the desktop design? What impact does this have on user experience and the design itself?

That’s a story for another day… stay tuned.

About Alex Stetson

Alex heads up Fresh Tilled Soil’s marketing efforts both on and off the web; she's dedicated to building and growing Fresh Tilled Soil's brand experience...