CHAPTER 4 Culture of Performance
Getting into the browser early on can help you catch potential perfor-
mance bumps before they have a chance to get completely out of control.
That mock-up where every element has a semi-transparent shadow may
look beautiful, but fire it up on a mobile device and you may notice scroll-
ing is an arduous task. Catching that early allows you to consider other
solutions.
To be clear, those other solutions needn’t be devoid of those kinds of
embellishments altogether. Performant sites needn’t be visually plain or
boring. There’s a series of trade-offs to be made by weighing the benefits
and the costs. Performance and visual aesthetics are both important —
your site needs to balance the two. Getting real — real code on real
devices — as early as possible will help you to maintain that balance.
One of the best ways to allow you to get into the browser early is to
think about your site in terms of reusable components. Have a question
about how that fancy navigation embellishment is going to perform on
different devices? Jump into the browser, develop that component and take
it for a test run.
There are a number of ways to do this. My current favorite is Brad
Frost’s Atomic Web Design approach^19 , which breaks website components
down into their smallest forms allowing you to build, say, a footnote, with-
out committing to building the rest of the page as well. This allows you
to quickly see how different pieces may work at different resolutions and
with different input methods.
The specific tool you use is less important than the end result: being
able to quickly test bits and pieces to catch performance issues before
you’re too far down the road to turn back.MaKe iT aPPaRenT
Another way to encourage thinking about performance optimization
throughout a project is to make key performance metrics of the site (such19 http://bradfrostweb.com/blog/post/atomic-web-design/