Bmoresponsive: Responsive Goodness!

June 17, 2014 | Tim Clayton

Bmoresponsive bannerResponsive goodness. Great speakers. Awesome venue. All in our backyard? Yes, please! TBG was excited to see Bmoresponsive arrive on the conference scene this year.

Ethan Marcotte, in A List Apart, introduced us to responsive web design a few years ago with the principles of fluid grids and flexible media. Little did we know that we would need to reexamine all of our working processes and strategies in light of these seemingly simple principles. How could we anticipate the implementation challenges we would face when our pixels turned to percentages and our image requests made our little phones want to turn off and go to sleep?

Bmoresponsive presentationBmoresponsive dove into this complex world of responsive design from a variety of viewpoints. Process. Technical. Implementation. Strategy. The variety of speakers was representative of the diverse viewpoints we must address as we tackle building websites – for a variety of platforms and devices – today and in the future.

So what did we learn?

1. Ask the hard questions. Don’t just “responsify.”
We all know that responsive design can be “cool” and “fancy.” Changing the width of our browser and seeing all kinds of elements move and transform is great. But let’s not just make squishy sites with fancy effects.

Responsive design is a broader concept that must take design of the entire user experience into account. This includes making hard decisions about what is necessary on a page.

Do we really need a carousel? Or can we focus our content and reduce clutter?

Do we really need a dynamic third party sharing option on this page? Or can we streamline our server requests and let users share the page via a simple link?

What happens if a user has a slow connection? Is this page going to take fifteen seconds to load or can we defer some of our images and logic until they are needed?

Responsive design should include making decisions about how to manage page weight, loading and limit server requests. Responding to the needs of users with less than optimal internet connections is part of the job.

2. A good user experience begins with a good builder experience.
As an industry, we talk a lot about creating a good, simple user experience. But the paradox of responsive design is that it has often resulted in a much more complex building experience – one that disrupted established processes and had us working around the clock to meet new needs and solve new problems.

Developing a working process that we enjoy and helps us solve problems as a team makes it easier to focus on creating a good experience for our website users.

What can we do to manage the additional complexity?

  • Automate tasks that are repetitive with build systems and tools
  • Break our designs into modules to better understand their core aspects
  • Build style guides to help understand the components of our website
  • Collaborate more frequently to understand what makes our team members’ lives easier.

A focus on and better understanding of our working process is good for us and ultimately good for the end product – and for the user experience.

3. Use the simple, safe solution.
HTML. CSS. JavaScript.

Complexity and risk goes up with each layer in our web stack. If we inherit an old site with XHTML standards, browsers are very tolerant and will continue to render the page.

If the browser doesn’t understand a CSS property, it will skip it and move on to the next property. We can use this type of error handling to our advantage with progressive enhancement by building layers of display complexity within our sites.

JavaScript. This is where we can really get into trouble. Programming languages have rules and with rules come real errors that stop your program. For this reason, JavaScript should be used to enhance, not as a basis or requirement for display.

By taking advantage of our stack and solving our problems in the lowest possible level of our stack, we reduce risk and complexity while providing better accessibility for all users.

4. Hooray! Many of TBG’s conclusions and working processes were validated.
As we build our process and working techniques, we always ask – is this the best way to do things? The internet doesn’t stop, new tools are constantly released, new process buzzwords pop up. It can cause even the most diligent web worker’s head to spin trying to keep up with the latest and greatest. And so we work, evaluate, iterate on our process and learn new skills as necessary.

But it was great to hear other firms generously share their inner workings and see that we have come to similar conclusions in our process, as we leverage:

  • tighter collaboration between departments and skill sets
  • more abstraction in our CSS, with object-oriented naming standards for consistency within the team
  • style guides to create a visual roadmap for our styles and maintain consistency throughout a build as well as during post-launch maintenance
  • heavier focus on designing modular elements that maintain their integrity in multiple page layouts.

Bmoresponsive was an engaging and fulfilling day of listening to speakers, meeting up with old friends in the industry and making new connections. We look forward to diving deeper into some of the new ideas presented as well as solidifying some of our more established responsive methods. We know that part of this business is staying on our toes, asking the hard questions and cutting through the noise to find the simple solution in a complex and ever-evolving environment. We look forward to meeting again next year and seeing how far we have come.

About the Author

Tim Clayton

I am a UX Designer at TBG. When not working on websites, I am likely to be found on a run, at the pool, or hanging out with my family.

Leave A Reply

comments powered by Disqus