After a few weeks of development, we're proud to announce our new website. In an effort to stay progressive, we've designed the site to be responsive and adaptive. Go ahead and give it a squeeze (and by squeeze we mean resize your browser). Even our featured work section adjusts to the width of your browser! For those considering building a responsive website for your next project, we've got three words for you: Just do it!
As a treat we've put together some lessons learned, as well as some tips, tricks, and tools. Enjoy.
Lessons Learned
Media queries sometimes aren't enough
Early on we used media queries and quickly discovered its limitations. Coding a media query is as simple as specifying your minimum and/or maximum width but it doesn't account for dynamic changes in height and other elements.
If you're looking for advanced functionality and features within your website be ready to a) subsidize media queries with heavy javascript or b) reconsider the site's layout/design in favor of progressive enhancement.
Watch the padding!
Elements with padding can make responsiveness difficult. Padding is rendered differently in every browser so you have to be lenient with widths and margins to make up the difference. If padding is a must then use position absolute on elements, provide fluid/fixed widths, and test repeatedly.
Let go of PPOCD (pixel-perfect obsessive-compulsive disorder)
For years front-end developers have been "pixel pushing" designs into browsers. Websites shouldn't match pixel-to-pixel with Adobe Photoshop. These are different media and require a massive mindset change in our industry. Building a responsive website forces you to step out of your comfort zone and accept that it's okay for your site to look different in a browser than it does in Photoshop.
Tools and Recommendations
Responsive Web Design
Ethan Marcotte has a great article on A List Apart about Responsive Web Design. If you want a more in-depth read, check out his book, also titled Responsive Web Design.
Line 25 has also put together a great collection of articles, tutorials, and showcases of responsive web design.
Content Stacking
And Trent Walton introduces us to content choreography.
Fittext
So you have a 72pt heading and your audience's browser width is 300 pixels? Luckily FitText, written by those awesome Paravel guys, is here to save the day. FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
jQuery Scrollto
jQuery Scrollto allows you to scroll the browser to a specific location. We used it in our menu.
Media Queries
Need inspiration for a responsive website or curious to see how someone else did it? Take a look at media queries, a collection of sites using media queries.
Final Thoughts
While ultimately, not every website has to be responsive, there is no reason why we should continue to build identical experiences for every single browser. Check out the tools above to see how a responsive website can help preserve the overall look and feel of the design, no matter what device your audience is using.
