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.

3 comments
JTech communications
JTech communications

We are a web development company that can build responsive sites, and one of the main benefits of going responsive is that you can be prepared for situations that you didn't know existed.  For example whatever comes next after phones and tablets could look very different, and it is likely that responsive will be cheaper and easier to adapt to that environment than an adaptive or static website.  The problem with responsive is always the upfront cost, but we have started recommending that any of our clients who are building a site should have it be responsive.  Rebuilding a site with responsive is very expensive, but if you need a new site anyway it should probably be responsive.


Our human interface designer wrote a blog post about some of the design challenges associated with responsive design, it is at https://www.jtechcommunications.com/blog/blog-detail-7 if you would like to read it.

jacobfavre
jacobfavre

"allow your developers and designers to help lead the way" - this is a great point. Developers need to also work with the designers to ensure the design fits into the framework of the site.  Great article.

scottjenni
scottjenni

The responsive are much more attractive then the static design. User love to interact with the design... I like your article..Keep posting