Once upon a time, about an hour away from where I currently live, worked a web designer who loved his Photoshop comps and fixed-width layouts. And well, I don’t want to spoil the ending, but that designer was me.
Then, as I was minding my own business, the web-based creative community went berserk over this newfangled concept called “responsive design”. As any young, bright-eyed, bushy-tailed professional would do, I investigated. After all, the newest, latest thing should always be given at least a passing glance.
What I discovered, however, left me dismayed. An evil mastermind named Ethan Marcotte had unleashed a dastardly plan to make web designers work harder! His book left people ranting and raving about how we needed to “consider mobile users” and “make our websites work on as many platforms as possible”…the heathens.
Of course, I resisted as long as I could. I fought hard and bravely against this tide of good sense and smart business; but it was all for nothing. Then, I fell back on excuses: “But I don’t have any mobile devices to test with!” And that, dear reader, is the point. It turns out you don’t absolutely need one.
Over time, I’ve come up with a few basic guidelines that, should you find yourself without a mobile phone or a tablet, will help you design websites that make things look good on most mobile browsers anyway.
Disclaimer: you shouldn’t be listening to me if…
…you’re building anything bigger than a small, content-driven website. Large websites and application-driven sites should most definitely be tested on actual mobile platforms. I mean, sure, you could probably fake it, but I wouldn’t advise it.
When you’re working with unknown variables, your best option is to keep things stupidly simple. Yes, I’m invoking the almost clichéd KISS rule, because it works.
Do your research
Without a rack full of smartphones and so on, you need to rely on what other people know. Thankfully, lots of time and energy has been spent examining the capabilities of the more popular mobile browsers out there, and how they compare to each other.
Find out what your target audience is, and then find out what kind of browsers they’re using. As always, Google is your friend. Then, all you have to do is design for statistics.
If most of your mobile target market uses Android/iOS in one form or another, you’re in luck! Their default browsers (and most popular alternatives, such as Firefox) are modern for the most part. Advanced layout techniques, basic CSS3 effects, jQuery… these will all most likely render reasonably well.
If your target audience uses other platforms, however, you’ll need to do more specific research about them, and find out what they can and can’t do.
Now, what do you do if you have little to no information about your users? Try to at least figure out where they are. Most websites have, at the very least, a general region that most of their users hail from. Get the stats for that region.
Failing all of that, design for the worst case scenario.
Start here
To make your job a little bit easier, I found a website with a fairly detailed comparison of what the more popular mobile browsers do and don’t support.
And of course, there’s the always popular caniuse.com
Consider using frameworks
I know some designers swear by creating custom code specific to each project, but when you’re working blind, so to speak, reinventing the wheel is not a practical option. Frameworks that have already been tested on mobile platforms take a lot of the guesswork out of the process.
Guesswork is bad. Avoid it.
Now, I obviously haven’t personally tried or tested every framework out there, so you’ll have to find one that does what you want it to do, and research it, comparing it against the capabilities of your intended mobile platform. Still, there are a few you could start with:
Kitchen-sink frameworks
These are the ones you can probably name off the top of your head. They are characterized by their sheer complexity. They bring layout systems, UI elements, and jQuery plugins together in one powerful package.
The most famous of these are Bootstrap and Foundation. I won’t bother comparing them here, so go ahead and Google “Bootstrap vs. Foundation” if you need more details. All you really need to know for now is that in each framework, each component has been extensively tested by a rather large fan-base and is mobile-ready.
Mid-range frameworks
These don’t try to do everything for you, but rather just give you enough to get started. This makes customizing things a bit easier, but the creation and/or styling of more complex UI elements is up to you.
This category includes Skeleton, LESS Framework 4 and so on…
Layout-only frameworks
This is actually my personal favorite category. I prefer to start with a blank screen and a layout system at the ready, which allows me to create the kind of website I want without having to overwrite a lot of CSS, or try to extract specific parts of any given framework.
UI element frameworks
These frameworks, for the most part, don’t seem to concern themselves with layout or page structure. They are designed to provide an easy way to add fancy, mobile-compatible application interface elements (read: widgets).
I’ve only ever tested one, but my research says that the three best (or at least, most popular) frameworks in this category are jQuery Mobile, KendoUI, and Wijmo.
Embrace accessibility
It turns out that accessibility is not just for the color-blind or the completely blind. A lot of the older mobile browsers are so limited in capabilities that it’s pretty much like browsing with all CSS and Javascript turned off.
Your best bet, in this case, is to make absolutely certain that your website is usable under these conditions. Turn all of those pretty things off, and make sure that it’s still possible for users to achieve the website’s goals without them.
Use emulators
Device emulators usually aren’t one hundred percent accurate, but you can test the most important things, like layout and so on. Bugs I’ve encountered are often smaller things, like web fonts not rendering. Don’t worry, they should work just fine on the actual hardware.
But which emulators should you be using?
Android SDK
This one works a bit slowly, but it works like a charm. You have to download the entire developer kit, but it’s well worth having a program that closely imitates not only the Android default browser, but the entire OS. Additionally, you can test your site on a variety of virtual “devices”.
Opera mobile emulator
Another one that works basically as advertised. You download it, pick your “device” and go.
Firefox options
Firefox has several options for testing your mobile content. The first is a simple emulator that mimics the rendering functionality of Mozilla’s mobile Firefox project, codename: Fennec.
It’s not overly complicated, providing you with a simple, resizable window, so it’s up to you to manually set the screen size you want to test.
The second option is an add-on for the desktop version of Firefox. Dubbed the Firefox OS Simulator, it provides you with a whole platform to play with, not just the browser (much like the Android SDK).
Windows phone
I was not able to test this emulator, as it requires installing a very large SDK, and the install was bugged, at least for me. Still, it’s out there for you to test at your own discretion.
Blackberry
Blackberry offers a number of simulators for BB10. Perhaps it’s me, but I haven’t had much success running any of them. I’d love to hear from anyone who manages to make them work.
iOS
Last, but certainly not least, Apple provide a free iOS simulator that can be used to test for Apple devices as part of Xcode. Unfortunately, because it’s part of Xcode, it’s Mac only.
One size fits all
If you’ve got the budget (or can test really quickly, as their free time is time-limited) you can’t go too far wrong with BrowserStack. They’ll allow you to test on many desktops and a huge variety of mobiles. Not as responsive as the real thing, they will show you issues with things like layout.
Final tips
Set the viewport size
Mobile browsers tend to play around with zoom settings, or so my experience has been. If you want your website to look the way it does when you shrink your browser window down to mobile sizes, use this beautiful piece of HTML in the head of your document:
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width; ">
Learn to love the simplicity
Let me rephrase that: minimalism rocks on mobile. The minimalist aesthetic adapts well to smaller screen sizes with fewer tweaks and adjustments, saving me a lot of time. Maybe this seems like a no-brainer to some of you, but I cannot emphasize it enough.
Conclusion
This collage of information is only the tip of the iceberg, of course, and no match for actually testing your websites on real mobile hardware, but it should allow you to get started, and hopefully earning enough from mobile design to afford that device lab you so richly deserve.
How to design for mobile devices, when you don’t have one
No comments:
Post a Comment