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
-
Flexible Media
- flex slider
- max-width
- height: auto
- FitVids.js
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