The increased resolutions on newer smart phones, Retina Display to borrow Apple’s terminology, allow for much crisper images on the mobile view of our websites, but they cause problems for us as developers. There are several different methods for using these images, and most of them are rather cumbersome. It also makes the development more tiresome since you have to produce two images even in the development phase. We have found a few shortcuts in both areas.
The web developer plays an essential role in the process of building and refining a mobile-friendly website. Choosing the right responsive framework and staying up-to-date on evolving web standards can make the process of going mobile easier and more effective. By working with designers and communicators, developers can build a usable and accessible “mobile first” website that scales to fit any screen size.
You’re sitting at your computer with your web development ‘arme de choix’, staring at a blank page, wondering where to start…
If you’re like most of us (and statistically, you are) when you start busting out the div tags, your instinct is to design for a desktop and use clever automagical media queries to gradually remove content and functionality as the viewport shrinks.
A few years ago, I was messaging a friend and offered to email him a file, making the assumption he would simply pull it up on his computer when he got home. His response was more jarring to me than it should have been.
“I don’t have a computer.”
The idea that my friend might only get online through his phone did not even occur to me. It should have, because I had already been developing mobile-friendly websites for a little while, but it didn’t. With the evolution of mobile devices and cloud services, more and more people don’t really need a computer on a daily basis.
Google Chrome makes it pretty simple to see how your page will look on a variety of mobile devices using its built-in Emulation view.
The article above lists instructions for Chrome 32. As of this writing, Chrome 34 is available. The instructions on accessing the Emulation View are a little, but not substantially, different now.
For Macintosh, click on View > Developer > Developer Tools (CMD+OPT+I). Click into the developer console and press Escape. Select Emulation from the view window, and select the device you would like to emulate.
For Windows, click on Menu > Tools > Developer Tools (CTRL+SHIFT+I). Click into the developer console and press Escape. Select Emulation from the view window, and select the device you would like to emulate.
Also, here is a link to the PDF version of our presentation to download and review.