Responsive Design & the Mobile Worker

What exactly is Responsive Design? The simple answer: Making digital media viewable across all devices and resolutions.

Take your company website, for example. It looks great on your desktop computer, right? But when you view it on your phone, it doesn’t look nearly as nice if it wasn’t developed using responsive design techniques. Images will be too big, the navigation may be impossible to tap and the download time may kill you.

Designers/developers must write the code in a way that looks great no matter what device it is viewed on. Basically, we have to use something called media queries. Media queries are pieces of code that allow us to put details around objects. So we can say if a web page is being viewed on a device with a 460 pixel width, display it like this. But if the web page is being displayed on a device with a 800 pixel width, then display it like that.

It actually goes well beyond just the width. We can decide what to display based on the following factors:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

We can tell your website if it should use high-res images for Retina Display or no images for a phone display. We have a ton of options. Responsive Design is in its infancy and we are discovering new ways every day to make this logical way of thinking possible. The sad fact is we haven’t quite developed the best way to do this yet. Right now we have to write tons of lines of code to account for all the different resolutions, as well as older versions of browsers that do not support the latest and greatest best practices. But each time we launch a new digital page, we get closer. We make it better.

It’s funny: I remember a friend telling me seven short years ago that everything would soon be touch based. Hmmm. I did not think so. Touch was hard to deal with back then. It was too painful to make an area we could “tap.” And now look at us. We have adapted to touch, and in fact we prefer it. Years ago people hated it. It was frustrating and an annoyance because we did not understand it. Once we learned how to do it, designers and developers began to find ways to make it usable and easy.

In the not-so-distant future, we are going to see even more screen types. Even more? How is that possible? Think about it, almost everywhere we look could contain a screen of some sort. Watches, sunglasses and car dashboards, just to name a few. Dare I say even newspapers will one day be on some form of electronic device? I can remember watching a Harry Potter movie and seeing a video story of sorts in a newspaper one of the actors was holding. I thought wow, I cannot wait until we have the ability to do that. It will be so cool!

I know what you are thinking… outrageous! No way that will ever happen. By why not? I am not saying today or tomorrow, but some day. We are building the logic now so that no matter what screen resolution you view something on, it look good. Now all we need is the technology to make a screen that thin and inexpensive so it can fit in the paper.

So how does this affect you? Well maybe you are a Mobile Worker, for example. You spend your days going from appointment to appointment. They are always in a different spot and you have to capture details at each appointment. You may need to take photos, maybe even video. You need directions to get from point A to point B. You may even need to get updates on the fly about an emergency appointment. To achieve your daily routine you would need several items: a computer, a camera and a GPS. This is where Responsive Design could greatly improve your day and process as a Mobile Worker. If you have an app, then you may only need a simple tablet. It can take photos, allow you to add notes and even give you directions to your next appointment. You would not have to carry around a bag full of expensive equipment.

The Mobile Worker app could schedule all the appointments and interface with someone back at the office with ease.

Want to get even fancier? Why not make it talk to all your current systems? The Mobile Worker app could schedule all the appointments and interface with someone back at the office with ease. Sure, they may be viewing the app on a desktop, but with Responsive Design it’s no problem at all. So now if you are out at one appointment and there is new appointment that must be dealt with right away, you can get an instant update on your Windows 8 tablet. And if you need to transmit information or photos back to someone in the office, you can do so with a click of a button or a tap on a screen.

But wait, there’s more! Now let’s say you are at home, and there is an emergency for work that you need to take care of. The scheduler goes into the app and enters a new emergency appointment. You will not know that appointment exists unless you have your tablet up and running right? Wrong! The app could send a text to your phone with a link to the new emergency appointment, You could go in from your phone and view the important information and get started. Obviously, I don’t think you would want to read every detail about the appointment on your phone, but we could easily make that happen if you did.

That is the beauty of Responsive Design and the Mobile Worker. We are at a place in the digital society where we can greatly improve the job process and quality. We can make sure everyone who needs to access certain information has the ability to do so from any device.

About Allison Christman

Allison Christman is a UI/UX Digital Designer focused on the human factor. She loves to create something great and then improve it after usability testing. Allison focuses mainly on desktop, mobile and SharePoint websites, and has been using the Adobe Web Suite of products (including Flash and Dreamweaver) for over 13 years. She creates most websites with CSS and HTML. Allison also creates Windows 8 apps and responsive design including CSS3 and HTML5.