IRCE Workshop: Two Approaches to Responsive Web Design: Pure and Hybrid
This is IRCE workshop Two Approaches to Responsive Web Design: Pure and Hybrid, presented by Brendan Falkowski, Founder - Gravity Department. You can find Brendan on Twitter as @Falkowski.
There's a lot of ways to talk about responsive design, but from a frontend aspect, responsive web design is:
- Fluid grid
- Flexible content
- Media queries
You deliver the same HTML to every device, and the CSS customizes the view.
There is some waste with responsive design - it serves desktop-specific bloat to all devices, slowing mobile browsing.
Mobile first is a reaction to this design, but designing for the weakest devices first.
Responsive can be slow - but blame the implementation, not the technique.
Most current responsive sites are rushed, and are underperforming - not due to responsive design, due to implementation.
Adaptive design is any variation in response to the environment - for instance, providing enhancements to store locator by adding a 'find by GPS' button.
Most companies choosing adaptive layout aren't ready to modify their desktop site and are using it as a shortcut vs mobile-first responsive design.
A user's context and goals shouldn't be inferred by their device's characteristics.
M-dot + t-dot sites means you have three codebases - expensive and annoying, discrepancies create a bad user experience. Broad changes incur massive technical debt.
Build a mobile site that's fully responsive, mobile-first, and use it to eventually replace your desktop site.
Dynamic serving inspects the user's device, and returns a different site depending on what platform they're on - serve different CSS, basically.
Responsive Design with Server-Side Components - RESS - blends fundamentals of responsive with some dynamic serving. One RWD site with different component variations being served.
No platforms support component-driven variations today.
RESS is the only bridge between responsive design and delivery optimization.
RESS is good for SEO because Google now executes CSS and JS when crawling sites.
Resizing your browser usually won't trigger RESS variations, so it's hard to tell if someone's using RESS.
RESS survey - 326 people using RWD, only 17 using RESS.
RESS can break caching or CDN technology - so technology hasn’t caught up with RESS yet.
RWD !== Proxy (m-dot) sites !== Dynamic Serving !== RESS. Can't compare apples to apples.
Each RWD strategy has trade-offs.
Google supports 3 approaches for mobile design today: 1) RWD 2) Dynamic Serving 3) Proxy sites (separate URLs for mobile and desktop)
Google's suggestions hit at pitfalls in each approach. Proxy sites force you to compete against yourself. Splits your page-rank.
Incorrect/incomplete proxy/m-dot sites penalize your SEO rank. Only 4.5% of IR 500 gets this right, and it hurts their SEO
Apple’s new hand-off technology to move from phone to tablet to desktop is going to make mobile-specific sites look very bad.
SEO industry wants “desktop SEO” and “mobile SEO” to sell 2X as much work, but search engines don’t like this. Google mobile search prefers responsive design.
People make websites slow, not responsive design. Almost all sites are slow today (RWD or not), and they don’t have to be slow.
You need a frontend gatekeeper to keep your site fast - no matter if it’s responsive design or not.
Brendan showed how fast different sites are, and disproved the 'Magento is slow' and 'Responsive is slow' arguments by showing how 3 of his best-practice-following, fully-responsive Magento-based sites are faster than 99% of the sites on the Internet. The quality of your implementation drives your performance.