Brad Parbs
Plugin Developer
Worked on over 100 WP sites
C
ore contributor for 3.5
wrote the book “How to be Awesome”
WordPress Designer
Saturday, October 27, 12
Slide 3
Slide 3 text
@BradParbs
BradParbs.com
Brad BradParbs.com
@
Saturday, October 27, 12
Slide 4
Slide 4 text
Who are you?
* Run a WordPress Blog
* Created a business site
* Know nothing about WP
* PHP Guru or CSS Master
* John Stamos
I love
WordPress!
Someone who needs
to use responsive design!
Saturday, October 27, 12
Slide 5
Slide 5 text
Why do we need Responsive Design?
Over 1.2 billion
mobile web users
In the USA, 25%
only use a mobile
device
Saturday, October 27, 12
Slide 6
Slide 6 text
Well, that’s nice.
But I don’t care
about stats.
Responsive design is the future.
Saturday, October 27, 12
Slide 7
Slide 7 text
What makes up a theme?
Saturday, October 27, 12
Slide 8
Slide 8 text
Saturday, October 27, 12
Slide 9
Slide 9 text
the magic of CSS!
Saturday, October 27, 12
Slide 10
Slide 10 text
A little history on website design
Saturday, October 27, 12
Slide 11
Slide 11 text
“Building a website with tables
is like building a website in Excel.
Using a spreadsheet. It’s dumb.
Really dumb.”
-Bill C
osby (not really)
Saturday, October 27, 12
Slide 12
Slide 12 text
100% Flash sites
Saturday, October 27, 12
Slide 13
Slide 13 text
fluid grid systems
Saturday, October 27, 12
Slide 14
Slide 14 text
responsive design!
Saturday, October 27, 12
Slide 15
Slide 15 text
Saturday, October 27, 12
Slide 16
Slide 16 text
Saturday, October 27, 12
Slide 17
Slide 17 text
https://status.heroku.com/
http://www.bostonglobe.com/
Saturday, October 27, 12
Slide 18
Slide 18 text
http://robot-or-not.com/
http://colly.com/
Saturday, October 27, 12
Slide 19
Slide 19 text
http://thinkvitamin.com/
http://www.pelicanfly.co.uk/
Saturday, October 27, 12
Slide 20
Slide 20 text
http://stuffandnonsense.co.uk/projects/320andup/
http://hellofisher.com/
Saturday, October 27, 12
Slide 21
Slide 21 text
So what actually makes up RWD?
1. Fluid/Flexible Grid System
2. Responsive/Adaptive media
3. Media Queries!
Saturday, October 27, 12
Slide 22
Slide 22 text
flexible grid system
Breaks the site content in blocks that can be moved around.
Sized using ‘ems’ or percentages NOT pixel widths.
pxtoem.com
Figure out your widths:
Saturday, October 27, 12
Slide 23
Slide 23 text
adaptive media
Images and Videos that resize themselves
wordpress.org/extend/plugins/wp-fluid-images/
WP Fluid Images
Responsive Video Embeds
wordpress.org/extend/plugins/responsive-video-embeds/
FitVids for WordPress
wordpress.org/extend/plugins/fitvids-for-wordpress/
Saturday, October 27, 12
Slide 24
Slide 24 text
media queries
CSS that gets applied for specific cases
C
an target device widths, rotation, etc
Reformat sites and move things around
Saturday, October 27, 12
Slide 25
Slide 25 text
http://brrad.com/queries
clear your floats
change font size
float things left
change your nav
Saturday, October 27, 12
how the #%&! do I test on all of these?
Saturday, October 27, 12
Slide 36
Slide 36 text
Some things to think about...
* L
ook at stats, optimize for
those devices first
* Simplify your site for all
devices, desktop, and mobile
* Don’t be afraid to go test at
the AT&T store
Saturday, October 27, 12
Slide 37
Slide 37 text
always strive to make your site
beautiful, no matter what
Saturday, October 27, 12
Slide 38
Slide 38 text
Struggling with integrating this?
Ask for help on WordPress.org
Talk to people here!
L
ook how other themes do it
Google!
Saturday, October 27, 12
Slide 39
Slide 39 text
More useful plugins!
wordpress.org/extend/plugins/responsive-select-menu/
Responsive Select Menu
WP Orbit Slider
wordpress.org/extend/plugins/wp-orbit-slider/
Meteor Slides
wordpress.org/extend/plugins/meteor-slides/
Saturday, October 27, 12
Slide 40
Slide 40 text
Things to
think about
Saturday, October 27, 12
Slide 41
Slide 41 text
So, let’s recap.
Media queries rock!
L
ots of cool plugins out there to help
Responsive web design is the way to go
Your site can work anywhere & everywhere
John Stamos loves WordPress
Saturday, October 27, 12
Slide 42
Slide 42 text
@BradParbs
BradParbs.com
[email protected]
Go make your site
responsive
right meow!
Slides:
brrad.com/pvd
Saturday, October 27, 12