I recently had the great pleasure of attending An Event Apart in Washington, D.C. and was not surprised at this year’s overall theme: Go mobile.
We’re seeing more and more users browsing on what we currently consider “mobile” devices. But honestly, it’s only a matter of time before we’ll consider a “desktop” computer obsolete. That doesn’t necessarily mean users won’t be using desktops, however: It just means those desktops will be more like mobile devices. We are already seeing a high number of touch-enabled laptops and desktops, plus tablets that are closer to the size of a desktop. Yes, it is high time to make the transition.
According to StatCounter, mobile browsing has increased from 11% to 17% globally in the past year. That means roughly one out of every six visits is done with a mobile device. Meanwhile desktop has dropped 7%.
So what are the lessons here? Where do you start?
1. Make sure your digital media is designed for touch first. The minimum touch area is much smaller than a non-touch device. So if you make it touch friendly, it will automatically be more than desktop friendly as well.
2. Design one website that can be used for all devices. You do not need to have six different websites, all with different content and photos! That’s a maintenance nightmare! Make your content count. Remove the fluff and keep the content focused on what the user needs. I cannot stress this enough. Do not leave out important information just because you are designing for mobile. Find a way to include all the important information and still keep it at an acceptable size. The last thing you want to do is frustrate your user by having them exceed their data plan. It is impossible to know what resolutions the future will hold so adjust your design with breakpoints when the design starts to “look bad,” rather than at specific standard resolution sizes. This will help you prepare for what may come next. For example, if you have three columns with a picture and some text, play with expanding and shrinking the page. When the columns become visually hard to read or start to look bad, add a breakpoint and adjust the look. Maybe you need to change it to a single column or adjust the text to wrap around the image.
3. Be careful of hover and drop-down menus. Many touch devices cannot read a hover state so your information or menu may not display. That being said, there are many developers working on ways to make hover states readable on touch. With Leap Motion being released to the world, we may see this as a viable option in the near future.
4. Test, test, test. Try as many different devices as you can including phones, tablets and desktops. If you do not have a ton of devices at your disposal, try downloading an emulator.
5. Have a little fun. You can spice up the look with some extraordinary fonts as headers. Just keep the paragraphs and important information in an easy-to-read, standard font. Use color and design elements. With Cascading Style Sheets (CSS), you have a ton of options to create graphical design elements on the page. And the best part is that CSS has a relatively small effect on the file size. And yes, you can still use images.
Remember, the need for a fluid, resizable website is only going to become more demanding — and important — with each passing day. Has your company gone mobile yet? If not, what are you waiting for?
Slides courtesy of Luke Wroblewski
