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 


  • 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 *