1. Responsive Design in WordPress
January 14, 2014

2. About Me Founder, Illuminate WP Co-Founder, Stacked Agency
Meetup Groups
Lead Organizer WordCamp CT 2014
Service
Thank you mentors!
Call me anytime:
Clintonwarren.com

3. What we’ll cover What is responsive design?
Elements of Responsive Design
How this changes the design process
Responsive Design Options in WordPress
Case Studies

4. What is Responsive Design?
An approach to web design in which a site is crafted to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (Wikipedia)
Ethan Marcotte, A List Apart, Responsive Web Design (May 25, 2010)
No longer a ‘luxury’

5. Don’t get left in the dust

6. Statistics

7. Elements of Responsive Design
Fluid Layouts
Media Queries
Flexible Images/Media
Responsive Menus
Flexible type

8. Fluid Layouts Benefits vs. fixed-width layout; drawbacks
Target / Context = Result
Fixed-Width (based on pixels)
Fluid Layout (based on %’s)

9. Media Queries Snippets of code placed in theme stylesheet
Looks at the capability of the device and checks for:
Width & Height of browser window
Orientation
Resolution

10. Media Query Breakpoints
Browser widths that have a media query declaration to change the layout once the browser is within the declared range
320 px — Mobile portrait
480 px — Mobile landscape
600 px — Small tablet
768 px — Tablet portrait
1024 px — Tablet landscape/Netbook
1280 px & greater — Desktop

11. Flexible Images & Media
Snippet of code to make images and video resize relative to size of container
- Different videos depending on screen size and device
- Retina Images

12. Responsive Menus Full Horizontal Select Box (ex. RoomTemp)
Custom Dropdown (ex. Daystar)
Off Canvas

13. Flexible Typography
All typography size, padding, and margins set relative to a ‘base font size’
This makes it easy to adjust all typography with a single media query, changing the base font-size up or down

14. How this changes the design process
Simpler layouts
3+ layouts
Mobile up vs. desktop down
Designing on a grid
Checkout mediaqueri.es
Use Browserstack.com

15. WordPress Options
Plugins
Themes
Custom Builds

16. Plugins WP Smart Mobile WP Touch Advantages Disadvantages
Easy to setup
Work nicely on most blogs
Disadvantages
Limited ability to customize
Start to fall apart on more traditional websites
Not truly responsive

17. Themes Avada U-Design Canvas Themeforest.net Advantages Disadvantages
Easy to setup & configure
Cross browser tested, all programming done for you
Can support different types of sites
Disadvantages
Limited design options
Can have steep learning curve
Bloated

18. Custom Built Themes Advantages Disadvantages
Full control over design and functionality
Lightweight
Disadvantages
Labor intensive
Requires heavy coding & testing

19. Case Study #1 – Daystar Fully custom e-commerce theme
One of my first responsive sites
Lessons learned:
Information architecture
Better collaboration with designer
Spend money on QA testing
Simpler design

20. Case Study #2 - Aculytics
Using the Builder theme
Lessons learned:
Work more closely with the designer, be very clear that we need to work within theme constraints
Better information architecture

21. Case Study #3 –Teamqsi.com
Hired by Schlar Consulting Group in New Haven, given specs for theme modification
Using Modernize theme

22. Case Study #4 – Flaster Law
Fully custom theme built at Kim Ronemus Design
Numerous media queries and extensive testing

23. Responsive Frameworks
Based around a fluid grid (except Skeleton); some contain user interface elements and additional features
Skeleton
Twitter Bootstrap
Zurb Foundation

24. Closing Thoughts