1 / 24

Responsive Design in WordPress

Learn about responsive design in WordPress and how it changes the design process. Discover the elements of responsive design, responsive design options in WordPress, and real-life case studies. Find out about plugins, themes, and custom builds, and explore popular responsive frameworks. Don't get left behind in the fast-paced world of web design!

shawnk
Download Presentation

Responsive Design in WordPress

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: 203-864-8520 • 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 • http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ • http://nmsdvid.com/snippets/

  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 • http://css-tricks.com/video-source-by-screen-size/ - Different videos depending on screen size and device • http://retinajs.com/ - Retina Images

  12. Responsive Menus • Full Horizontal • Select Box (ex. RoomTemp) • Custom Dropdown (ex. Daystar) • Off Canvas • http://css-tricks.com/responsive-menu-concepts/

  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 • http://ia.net/blog/responsive-typography-the-basics/

  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 • 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 • 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 • 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 • http://www.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

More Related