Managing Responsive Projects
Mobile friendly web content and mobile development have been pushed to the forefront with Google’s announcement earlier this year of ranking mobile ready sites higher. The change in Google’s ranking algorithm alone is a call to action for delivering mobile-friendly content. In addition, a Google study found that local web searches lead 50% of mobile users to visit a retail location within a day of their search. Smartphones have become the primary entry point to the Internet with the number of mobile-only internet users exceeding desktop-only users in the US.
Focus on content, not the container or form factor
We often think of the modern web design workflow like this:
Your Modern Web Design Workflow:
1. Start with HTML that Just Works™
2. Style for 300px wide viewport
3. Add mqs at sensible breakpoints
— Jonathan Stark (@jonathanstark) July 9, 2015
We need to think and work in terms of device perfect, not pixel perfect designs and layouts. Trying to replicate layout compositions for every possible device and screen size is time-consuming and nearly impossible. It’s better to focus instead on a content first approach, by conducting a content audit and optimizing the content presentation to display with readability and feature sets that individual devices can support. Think of your site as a collection of systems and not a “web page.” Design your responsive layout in terms of style guides and style tiles, content and content blocks.
Think Agile. Responsive requires an agile approach to project managing. This is because content, design and development happen in tandem. The project team needs to sketch, test, and iterate designs and concepts in a mobile first approach. Prototype, test, and validate your design assumptions. Keep the project team focused on the user experience by testing the perceived design solution and validating the actual user interactions through an iterative design approach and incorporate user testing into each project sprint.
Responsive design allows you write once and publish everywhere. But you will also need to think in terms of a responsive content strategy and content management. Having a flexible grid only solves one part of your responsive design work; responsive content strategy will give control over the presentation of your client’s content. An important part of the design process is having the client identify the key message and priority for content. Allow content to flow in a logical and coherent manner from screen size to screen size. Look at how sidebars and columns will expand and collapse in the page to have the content order to be cohesive and makes sense when scrolling from top to bottom. Use proportional typography to enhance readability of your pages on different screen sizes and depth. An easy way to achieve proportional typography is to work with a modular scale to create a balanced scale for your UI presentation in relation to screen sizing and pixel depth.
Pro Tip: Note the type and models of devices of the decision makers at client meetings. Make sure you offer a design solution for those particular devices.
Test on Multiple Devices
Don’t simply resize the browser. Browsers currently have device emulators built into their development tools to help you see how your UI designs will display on various screen sizes and devices.
Ideally, you will want to work with real devices. Using the built-in Device Preview feature in Dreamweaver you can view real-time changes on devices.
Build a Device Lab
I put all of my devices into a four drawer tool chest. When a project gets to a testing phase, I work from the top drawer, which holds the most common phones, and go down the drawers to older or more obscure phones and devices. Top drawer display or interaction errors are a high priority fix or show stopper; prioritizing errors in subsequent drawers can be a judgement call.
A device lab does not need to be an expensive endeavour. Ask family and friends if they have used or unwanted devices that they would be willing to part with. Often cell phone stores will have demo or old device stock at discounted rates. A device lab should include a current iPhone and/or iPod Touch, a mid-level Android smartphone, a high-end Android smartphone, a Blackberry smartphone, a Windows smartphone, an iPad, and an Andriod tablet. WiFi enabled devices will simplify your device testing. If you aren’t able to invest in a device lab, check if there is an Open Device Lab project in your area that you can use.
Don’t leave testing on real devices until the end of your responsive project. Start early and make sure that basic layouts and interactions are working before proceeding with additional design and development work. Testing early on devices will help identify and bottlenecks in development and will keep your project team focused on being proactive versus reactive. Fix one bottleneck at a time. Nothing can throw a wrench into a project timeline like a series of assumptions about technologies or platforms.
Performance is Design
More optimization means less jank. Remember that the performance and load times of your pages are integral parts of the user experiences on your responsive site, just as much as the UI aesthetic. Layouts may look amazing, but if you are not conscious of page weight and load times, many users will not stick around to see your final page presentation. Consider using either smart or background loading to optimize UI performance. Make performance an explicit part of your project plan and outcomes. Test your download performance in real world situations. How will your site perform under low connectivity or inconsistent network connections? Performance is often an overlooked as part of the user experience. Poor performance will lead to low engagement and a high abandonment rate.
Responsive projects require a higher level of collaboration and communication. Have project teams test and iterate continually throughout the design and development cycles. Test on real devices early in the project to proactively search for potential bottlenecks with implementation for different technologies. Work with flexible and scalable grid systems. Focus on the content and not the form factor. Create device-perfect experiences.