Design for the Movers Shakers

So many of us have been in the metaphorical side-pocket of Web Design since the Internet began. The thought of the Internet on a cell phone was just a pipe dream then. When you were actually able to get your email on your phone (well, most of the time), everyone thought that was a huge deal! Well folks, things have changed!! Most of us have a smart/web capable phone now, and access more than we ever thought we would on our phones. Thus, we need to start thinking about how we design our sites and pages.
Think mobile!!

The designers/developers that want to stay ahead of the game design for mobile 1^st! What does that mean exactly? Well, there are different standards when it comes to designing for mobile. Here is a great reference from the folks at W3C.
What else is different between traditional webs and mobile?
This can be a little trickier to figure out. Let’s take two different examples. A website that already exists and one that has yet to be built.

Pre-Existing site: Test on all available mobile technology. Android phones, iPad/iPhone, Blackberry and whatever else you can get your hands on. Of course, not all of us have access to each of these. Thankfully there are some online tools and guides to help you with your testing.


“There are add-ons for Firefox that can manipulate the data sent to servers to make it seem as if the user agent is browsing on a mobile device, even when they’re not. To do this, you need an add-on called Modify Headers (for Firefox).
Once you have downloaded and installed this add-on, the new options, Tools > Default User Agent and Tools > Modify Headers should appear in your browser.
To emulate browsing on a mobile device, you need to find the User Agent Profile (UAProf) value of your mobile device, which can be found with a quick search on Google for “user agent” followed by the model of your phone (e.g. see Google results for “user agent ipad“). read more…”

The above method is what has worked best for me. A lot of the “online emulators” only show you how your site will look, not function. For example, ”ipadpeek” looks great but, still allows Javascript (Flash) to run. In case you didn’t know, Apple+Javascript=nothing! You must use jQuery to ensure across the board compatibility. Very important for any type of ad / image rotators.

By using the above mentioned technique, you should be able to debug your current site without much trouble. It still pays to test on actual devices when they are available.

New-Site: When starting from scratch, you can take extra precautions in your design/layout to ensure compatibility. You can design using CSS3, so the site will rescale depending upon the device viewing it. But, just as in traditional web design there are devices that don’t support CSS3. Big surprise huh?!

You could also use Mobile User Agent Detection. Which is pretty much a modified style sheet for each different browser/device. This is probably the best way to ensure that users get the same experience no matter which device they use.

Think of your site as a giant APP. Stay away from Javascript and fly-out menus. That will shut down 80% of the headaches you would normally encounter when designing for both traditional and mobile web.

More to come in future posts!