For a Future-Friendly Web

• 03 October 2011
• ffly,
• future friendly,
• mobile first,
• mobile web,
• responsive web design,
• web design

I had the tremendous opportunity to travel back to my homeland of beautiful Pittsburgh, PA to speak at Web Design Day, put on by two amazing people, Jason and Val Head. It was a fantastic event with fantastic speakers and a passionate audience. I spoke about the need to think beyond the present web landscape and start to think and act in a future friendly way. Here's the video, slides and notes: View on Slideshare View on Vimeo

• The web is no longer one-dimensional. It consists of a plethora of devices, including smartphones, dumbphones, e-readers, tablets, netbooks, notebooks, desktops, game consoles, tvs and more.
• This is just the beginning. There's lots of known devices coming out right around the corner (Kindle Fire, web-enabled watches and more), but also tons of devices that haven't been realized yet.
• The power of the web is in its ubiquity. The web's superpower is its ability to go to more places than any proprietary solution.
• There's no such thing as future-proof, but we can take steps to be more future-friendly.
• In order to think more future-friendly, we need to reconsider the content we create and the context in which people interact with our content
• People's capacity for bullshit is rapidly diminishing. We need to respect people's time and give them relevant, purposeful content without the extra cruft. Check out Noise-to-Noise Ratio by Merlin Mann
• Content like water. Think of your core content as a fluid thing that gets poured into a huge number of containers. Get your content ready to go anywhere because it's going to go everywhere.
• We've gotten complacent with regards to user context. We assume they have capable machines with large screens when in fact user and device context is far more diverse.
• The historic mobile context (user on the go) is still true, but people are using their mobile devices in a number of different ways. Check out When and Where Are People Using Mobile Devices?
• The mobile web browser is unique. It borrows conversions from both traditional web design but also from native mobile conventions.
• What about apps? "Native Vs Web" Is Total Bullshit. There is a difference between sites and apps. Check out James Pearce's fantastic article that breaks down the differences between sites and apps: Of Sites and Apps
• Invest in your content. Make a strong agnostic API that makes your product/service portable. Web publishing platforms are now in an awkward place where they need to export data to non-web platforms (native apps, in-store experiences, etc). Check out Letting Go by the ever-insightful Yiibu.
• Responsive Web Design isn't a panacea to the diversity issue (nor did it ever claim to be), but it's an important step in the right direction. Embrace the squishiness.
• However, mobile is more than just a smaller screen. Luke Wroblewski's Mobile First strategy tackles the need to design for mobile devices first.
• The combination of mobile-first and responsive web design is a good idea.
• Progressive enhancement plays an essential role in future-friendly design. Check out Aaron Gustafson's Adaptive Web Design and Filament Group's Designing with Progressive Enhancement.
• Structured Content First. Get back to basics. Semantic HTML markup is extremely portable and retains it's meaning no matter what device accesses it.
• Design for Diversity. Does the user have a touch-enabled device? Are they navigating with a mouse and keyboard, D-pad, Blackberry pearl, etc, etc?
• Design for touch. Accommodate for fat fingers (meat sticks) and allow for more direct interactions
• Take advantage of the cascade. Top-to-bottom: go from most global to most specific. Left-to-right: go from most general shared properties (color, background, etc) to most specific (-webkit-box-shadow, etc)
• Progressively-enhance Javascript. Conditionally load scripts to take advantage of device capabilities and avoid breaking experiences. Check out Modernizr and beware of false positives.
• Check out Mobile Web Best Practices for information on how to approach and execute mobile web experiences.
• Separate sites aren't scalable (m.site.com, tablet.site.com, tv.site.com, etc), but many times are necessary because the opportunity to do a full-blown redesign is out of the question. Use this as an opportunity to create what will eventually become the full version of the site. The mobile site might initially be limited due to the constraints of the project (lack of time, money, resources, etc), but nurture it and it can grow into a full-featured, mobile-first, adaptive web site. You can then bulldoze your clunky old desktop-only site.
• Embrace the unpredictability of the future. We don't know what's around the corner, but we need to be ready.
• It's going to be hard, but it's 100% necessary. This requires all of us working on these problems together in order to create a better future for the web.
• Get Future Friendly.

• ← Previous
  Future Friendly
• Next →
  Mobile Web Best Practices Roadmap