As mobile web continues to grow, web design feels the pressure to keep up, but the “new” approach to web development is a return of an older idea. At RSR, we’ve compiled some best practices for developing sites that will be accessed from a myriad of devices. Let’s start with how the web has evolved since I uploaded my first website in 1996.
In 1996, I uploaded my first website to an early web host called Geocities. The site had a black background, green text, and a flaming skull GIF on the homepage. It looked great after all the hours of work building and testing it on my computer. When I looked at it on my friend’s screen however, the site was squashed into the left half of his large monitor. Realizing that it wouldn’t display seamlessly on every screen was heartbreaking.
I went back to my books, eager to find a solution. I learned that to get a site to fit and fill a screen, two different sizing approaches existed: “fixed” or “relative.” A fixed-width site set to “500px wide” will fill half of a 1000-pixels wide screen, and only a quarter of a 2000-pixels wide screen. Alternatively, setting a site’s width to “100%,” a relative measurement that changes with each screen size, will expand to fill all the space available on any given screen.
I changed the width of my site to “100%.” The site then properly displayed both on my small screen and on my friend’s. Setting a site to respond “relatively” is a practice that still holds true today. When you pull up simple fluid-width websites designed in the 1990s on a modern iPhone, they will often appear correctly, even though a device this small did not exist back when these sites were emerging.
The Photoshop Era
As the Internet evolved, the look and feel of websites became more important. Starting in the early 2000s, a new wave of web designers began using Photoshop to draw detailed designs that could be “sliced” into fixed-width HTML web pages. The results were beautiful, but only functional on desktop devices. Despite this limitation, this approach remained sustainable. Sites displayed smoothly on desktop PC screens which most commonly had a resolution of 1024-pixels wide.
It wasn’t until the iPhone was introduced in 2007 that the idea of experiencing the web seamlessly from a mobile device was planted into the minds of consumers. Fixed-width sites designed for a single screen size were no longer viable.
Since then, the mobile web has continued to grow and will soon surpass the number of people using desktop computers. The mobile revolution introduces the need for a new approach to web development. Web design is steadily returning to a fluid-width approach.
______________________________________________________________________
Our approach to building responsive sites has been refined over dozens of commercial projects. Through these commercial projects, we have applied and tested the following best practices for developing sites that will be accessed from a plethora of devices:
1. Rapid Prototyping.
Rather than having a designer build a detailed Photoshop “comp,” validate your ideas by collaboratively creating simple prototypes using HTML5, CSS3 and Javascript. It’s important for the technology and design teams to work together. The results are prototypes that can be easily tested and refined. This ensures that a site’s final design will properly function across devices as early in the development process as possible.
2. Abstract What You Can.
Open-source software has created an ecosystem of thousands of creators working on tools to help developers. Many open-source front-end frameworks provide a well-tested starting point for responsive web projects. For mobile development, here are a few we are particularly excited about:
-
Bootstrap from Twitter – provides an easy to use toolkit for constructing responsive HTML5/CSS3 prototypes.
-
AngularJS – allows creating high quality web applications using Javascript.
-
Compass / Susy – a toolkit for creating responsive grids.
3. Test Early, Test Often.
Use emulators (software simulations of hardware devices) to test across popular mobile platforms during development. We use Apple’s iOS Simulator, the Android emulator from Google and BrowserStack, a hosted tool that simulates hundreds of popular mobile devices.
Once the site looks good in emulators, grab a real device to test it on. Sometimes there are quirks that don’t show up until you have the real device in your hand. Build a device lab of common mobile devices that anyone in the agency can pick up and use to test what they’re working on.