Thinking Mobile: Designing for different devices

When designing anything for the web — consider that will need to be scalable — starting with a giant monitor the size of a small television, down to a mobile phone. If you are designing a website, or web-page, the entire design must be made to work on multiple sized devices. If you are designing a digital ad, then likely you will need a few sizes for desktop, and a few alternate sizes for mobile. And yes, this does mean whatever work you thought was involved add 30% more to deal with mobile. It can’t be skipped, because a huge portion of web traffic is mobile.

Below, a digital ad designed for a mobile device and for a desktop computer.
Thinking Mobile Digital Ads

So how does this work? Nowadays the preferred method to deliver digital content across different sized devices is called “Responsive Web Design” or “RWD”. RWD uses a fluid grid to rearrange, scale, shrink, hide, or reveal content to make it look good on any screen size.

This actually works in the code using HTML, CSS, and JQUERY — however it’s up to the designer to define the rules. It’s the designer’s job to use target devices (see the importance of specs — in a previous blog) to create unique mocks ups of a select design on each target device. Essentially the designer is defining behavior (i.e. scale this, hide that, swap in this) in addition to setting new style rules unique to mobile, such as how the menu looks and behaves.

In its simplest form a responsive web design first scales, and then at a certain “breakpoint” begins to stack or wrap. It essentially “wraps” the way text wraps when it hits the right margin of the page, but instead of a word wrapping imagine a whole “block” being pushed down.

Thinking Mobile Thumbnail

From a design process point of view the takeaway is this, don’t forget mobile, and don’t leave it to chance (e.g. let the coder figure it all out.) Once a look and feel has been established mobile mockups need to be part of the game plan.