WordUp Austin: Designing Flexible Content

In his presentation at WordUp Austin inaugural event, Jason Weaver discusses responsive web design principles and web building techniques around WordPress.

Mobile First

  • Make one WordPress theme to rule them all
  • Build small, then outwards adding layers
  • Progressive enhancement

Coding

  • For example, as a default style rule set fonts smaller.
  • For screens bigger than 640 pixels, set font-size to 100%

Flexible Helpers

  • Modernizr

    • Feature detection
    • respond.js
    • html5shiv

Complex Navigation

  • Content first navigation
  • Hide menu on small sizes, if Javascript is enabled (i.e, smart phone)
  • Use simple jQuery slideToggle menu
  • Might be some accessibility issues

Hover Navigation Approach

  • Drop downs
  • Multiple level
  • Using click events
  • FlexNav

Images in Responsive Design

  • Keep number of images, file sizes low
  • Delivering low-resolution images for mobile device is tough
  • Adaptive images
  • jQuery plugin HiSRC 
  • There are challenges.
  • With retina displays and use of mifis, screen width is not always true representation of bandwidth
  • Ultimate goal is to download only one image, rather than two
    or more

Leave a Reply

Your email address will not be published. Required fields are marked *