Presented by Brad Frost.
Principles of Adaptive Design
Ubiquity
- Stephanie Rieger: “Diversity is not a bug… it’s an opportunity.”
- Give people what they want when they access the web.
Flexibility
- Embrace the squishiness!
Performance
- 71% of mobile users expect mobile sites to load as fast if not faster than desktop counterparts.
- 74% of mobile visitors will abandon a site if it takes more than five seconds to load.
- You have 5 seconds of someone’s time.
- 86% of responsive websites have same page weight for mobile and desktop.
- Performance Is Design. A highly performant website is that much closer to being a solid web experience.
- “You can’t mock up performance in Photoshop”
Enhancement
- Responsive Design != One Size Fits All
- There is a difference between support and optimization: The goal is to explain to stakeholders that the goal is to support as many devices as possible, but to optimize for the ones that are in budget/scope/etc.
Future-Friendly
- Acknowledge and embrace unpredictability
Demo Time
- Demo links
- Scale up images slightly for a boost in apparent quality. Could this be a better solution than doubling all images?
- Social icon loading is heavy.
Carousel Best Practices
Avoid the “Mystery Meat Carousel of Crap!”
- Make sure you actually need one
- Cycle through like items
- Only load what you need
- Be explicit with navigation
- Dots to indicate pagination on a carousel is ineffective.
- Next/Previous is better. Also include “x of y” indication.
- Give hints that other content exists
- Show partial content from next or previous slide.
- Treat touch as an enhancement
Auxilary Content
- Conditional loading: Scott Jehl calls it aggressive enhancement.
- When scrolling on mobile, we’re always scrolling through a singular type of content.
Ben Franklin: “When you’re finished changing, you’re finished.”