Created

Jan 15, 2014

Responsive Design: A Process Not a Plugin

Posted by Tiffany Olejnik
file

Responsive design has become a popular buzzword, everyone wants to use it, but the initial start can be a daunting process. It's become commonplace to stay connected to the online world 24/7. Your web experience carries over from your desktop computer at work, to your mobile/tablet device on the bus, to your television and gaming consoles or even your car's console interface. With the demand to maintain a seamless experience across all platforms, responsive design has become a key solution for web developers to tackle this ever-growing environment. 

Responsive is a front-end development technique for developers to achieve mobile, tablet and layouts across varying breakpoints. Responsive design uses a combination of fluid grids and CSS media queries to create designs that adjust while still keeping the site both attractive and usable. It requires a vigorous planning process and thorough research for your site's usability. Once achieved, however, responsive design reduces the cost of maintaining your web and mobile sites and ensures that your content remains updated, and your brand image remains consistent across all channels. 

Given you may already have familiarity with responsive design, today’s post will focus on clarifying some key challenges and pain points for making the switch to responsive design.

Responsive vs. Adaptive: What works for me?

Responsive and adaptive are used as different front-end development strategies in achieving the same goal of implementing a mobile site. Both methods allow websites to be viewed on various devices and provide visitors with a better mobile user experience. The key difference is responsive is treated as a single website, whereas adaptive can be treated as two separate mobile and desktop websites. Responsive can be an all-encompassing website to build and maintain, but it does come with it's technical considerations. Developers can’t re-arrange content on the site arbitrarily. The content can show/hide and morph in style, but must be in the same structured order. If your mobile experience varies much differently from the desktop, adaptive may be the best route to take. 

Moving from a fixed-width website to a responsive site is not always a feasible solution. Fixed-width sites don't need to take mobile-first design into account so the content will be structured differently.  The code is engineered in a less flexible way, and rebuilding the templates and stylesheets almost certainly takes less time in development than retrofitting an old fixed-width layout.

Ultimately, it comes down to the target audience and goals. Understand what the site's users are looking for and how they interact on different device environments. Your website might serve a purpose as informational, but your audience may be using it for strictly social purposes on mobile. Tailor your strategy to deliver the most relevant content in the quickest and shortest path possible. While responsive may be the 'latest and greatest', it might not always be the most effective solution for your mobile strategy. Analyze what your mobile requirements are, and work with your front-end developers to decide on the best implementation method. 

Mobile First

The key for planning 'mobile first' in responsive design helps keep the focus on many variables such as mouse pointers versus fat fingers, device capabilities, loading times, and content hierarchy. This plays a part in establishing the most important content on the site and determining a clear, short path for users to access what they are looking for. It can eliminate unnecessary elements, reduce page load times and utilize built-in device features such as geo-targeting. As you work outward in the layout, you can enhance for wider screens rather than attempt to squeeze in. 

Content Hierarchy

Spend the time/effort/budget to define your content before starting the design. Talk to your stakeholders, legal departments or anyone else with a vested interest ahead of time, or you may be scrambling later to implement a solution in a 'hacky' way. Determine your site architecture and prioritize content. Go in depth with specific elements; Not just header versus footer, but also the search bar if it’s key in the tablet experience, or perhaps social actions if your users are more drawn to them in the mobile environment. Condense menus that may contain unnecessary links in a specific environment. The elements can morph in design or be hidden, but the order of the structure must be the same. Hiding and showing elements at various break-points plays into the content strategy.

Breakpoints

Instead of trying to pre-determine each break-point, design comps serve their purpose as more of a mood board. A single JPG only shows a portion of the layout potential of a fully flexible responsive site. Coding the HTML and CSS structure involves a level of experimentation. Determining break-point centers around how real content will shift and reflow at various widths, so this layout can’t be pixel perfect. It's important to see how real content will interact with visual elements, so steer away from using 'Lorem Ipsum'. This entails a bit of 'QA' time to play around with the code; use min-width media queries from the smallest view and shuffle code to work outward from there. Be sure to test on desktop, tablet and mobile concurrently while developing.

Above all, allow your developers and designers to help lead the way. Don't be afraid to sketch, prototype and discuss. Responsive design requires open communication and seamless collaboration. It takes a few steps to rethink how you approach web design solutions, but with the right planning and anticipation for challenges ahead, you’ll be able to implement your new solution responsive design smoothly and successfully.

This post was previously published on the Adobe Digital Marketing blog, January 16, 2014.

COMMENTS

ADD A COMMENT