Austin WordPress Meetup

Bringing together WordPress users of all levels

You are here: Home / Helpful plugins / The future of design: Responsive Design!

The future of design: Responsive Design!

Helpful plugins / by

Announcements:

  • Next month’s first Tuesday WordPress meetup will focus again on Responsive Design, but this time at a more intermediate/advanced level.
  • We will be adding yet another monthly WordPress meetup! The new meetup will be for beginners and bloggers and will focus on the basics of WordPress, content strategies and how to get the most out of a WordPress blog. We will welcome people who have both WordPress.org self-hosted sites and those blogging on WordPress.com. Date and time TBA; keep an eye on the Meetup group for announcements.
  • We also plan to start hosting monthly/twice monthly lunch meetings/coworking sessions. These will be at local restaurants or coffeeshops during the day. If you would like to help coordinate these WordPress lunches, please contact Jackie Dana through WordPress Austin or the WordPress meetup group.

 

Responsive Design, presented by Nick Batik:

Presentation at: http://presentations.pleiadesservices.com/category/designers-guide-to-working-with-wordpress-developers

Responsive design is a way to design a website to display properly on both a large HD television and on small mobile devices like an iPhone or tablet.

Every developer has a different idea of what responsive design is, and how it should be implemented, and even these ideas change regularly.

Raises the questions: How much content do you show, how do you organize it, and how does it display differently on different canvases (devices)?

Responsive design requires collaboration between designers and developers, and also requires information on how people use a site and which devices they are using when they do so, to make appropriate decisions on design.

Chris Coyier of CSS-Tricks.com suggests that responsive design is probably the best thing to ever happen to developers and designers, because they will always be in demand! Check out his site – he has all kinds of tips and tutorials on how to develop WordPress sites, use CSS, and everything in between. He has text and video tutorials that are useful both for beginners and advanced developers alike.

(So what the heck is CSS? CSS stands for “Cascading Style Sheet“. This is how you set all of your design specifications/style for a website.)

It’s worth noting that in a site’s CSS, responsive design can be triggered by the browser window dimensions as well as specific device information.

A couple of free tools: you can The Responsinator to view how a site looks on an iPhone or similar device. StudioPress has a site where you can view your site at different resolutions.

WP Fluid Images (created by our own Pat Ramsey!) is a plugin that makes your images responsive rather than the static size set by WordPress by default when you upload it.  It “replaces the fixed width and height attributes so your images resize in a fluid or responsive design.”

Resizing videos: FitVids for WordPress is a plugin that will scale the video up and down depending on devices.

Other plugins that can make your site more mobile-device friendly:

If your desktop site and mobile device displays are very different, you need to include device detection in your CSS.

 

How does responsive design impact accessibility?
Pat believes it improves accessibility because it allows a site to be device independent. Things like drop-down menus can become an accessibility issue, and a good responsive design offers an option to make these menus more mobile friendly – which will also make them more accessible to users who have an issue using them. Responsive design also works best when your site is designed to be semantically correct, which helps with accessibility as well. This means that header tags are used properly (e.g. using <h1>-<h6> tags in proper hierarchical/outline order instead of to simply change the size of text). With HTML5 you can even use tags like <section> that helps even further in the organization of the information on the site.

 

Responsive themes:
A number of premium theme companies, including Thesis and StudioPress, have created mobile/responsive versions of their themes. For example, WordPress.com has developed a mobile version of Twenty Eleven, called Minileven, that appears when you switch your site to a mobile device. You can view free responsive themes on the WordPress.org Theme Repository. A popular free theme in the WordPress Repository is called, very simply, Responsive.