WordCamp Detroit - Responsive Web Design

by Brad Parbs

Embed

Start on current slide

Slide 1

Slide 1 text

Responsive Design Primer Saturday, October 6, 12

Slide 2

Slide 2 text

Brad Parbs Plugin Developer Worked on over 100 WP sites C ore contributor for 3.5 wrote the book “How to be Awesome” just discovered effects in Keynote WordPress Designer Saturday, October 6, 12

Slide 3

Slide 3 text

@BradParbs BradParbs.com [email protected] Saturday, October 6, 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 6, 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 6, 12

Slide 6

Slide 6 text

Well, that’s nice. But I don’t care about stats. Responsive design is the future. Saturday, October 6, 12

Slide 7

Slide 7 text

What makes up a theme? Saturday, October 6, 12

Slide 8

Slide 8 text

Saturday, October 6, 12

Slide 9

Slide 9 text

the magic of CSS! Saturday, October 6, 12

Slide 10

Slide 10 text

A little history on website design Saturday, October 6, 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 6, 12

Slide 12

Slide 12 text

100% Flash sites Saturday, October 6, 12

Slide 13

Slide 13 text

fluid grid systems Saturday, October 6, 12

Slide 14

Slide 14 text

responsive design! Saturday, October 6, 12

Slide 15

Slide 15 text

Saturday, October 6, 12

Slide 16

Slide 16 text

https://status.heroku.com/ http://www.bostonglobe.com/ Saturday, October 6, 12

Slide 17

Slide 17 text

http://robot-or-not.com/ http://colly.com/ Saturday, October 6, 12

Slide 18

Slide 18 text

http://thinkvitamin.com/ http://www.pelicanﬂy.co.uk/ Saturday, October 6, 12

Slide 19

Slide 19 text

http://stuffandnonsense.co.uk/projects/320andup/ http://helloﬁsher.com/ Saturday, October 6, 12

Slide 20

Slide 20 text

So what actually makes up RWD? 1. Fluid/Flexible Grid System 2. Responsive/Adaptive media 3. Media Queries! Saturday, October 6, 12

Slide 21

Slide 21 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 6, 12

Slide 22

Slide 22 text

adaptive media Images and Videos that resize themselves wordpress.org/extend/plugins/wp-ﬂuid-images/ WP Fluid Images Responsive Video Embeds wordpress.org/extend/plugins/responsive-video-embeds/ FitVids for WordPress wordpress.org/extend/plugins/ﬁtvids-for-wordpress/ Saturday, October 6, 12

Slide 23

Slide 23 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 6, 12

Slide 24

Slide 24 text

http://brrad.com/queries clear your floats change font size float things left change your nav Saturday, October 6, 12

Slide 25

Slide 25 text

Saturday, October 6, 12

Slide 26

Slide 26 text

Saturday, October 6, 12

Slide 27

Slide 27 text

Saturday, October 6, 12

Slide 28

Slide 28 text

Saturday, October 6, 12

Slide 29

Slide 29 text

everything ﬂoat: left; Saturday, October 6, 12

Slide 30

Slide 30 text

everything ﬂoat: left; margins, padding, width adjusted Saturday, October 6, 12

Slide 31

Slide 31 text

ﬂoat: right; ﬂoat: left; Saturday, October 6, 12

Slide 32

Slide 32 text

Saturday, October 6, 12

Slide 33

Slide 33 text

Saturday, October 6, 12

Slide 34

Slide 34 text

how the #%&! do I test on all of these? Saturday, October 6, 12

Slide 35

Slide 35 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 6, 12

Slide 36

Slide 36 text

always strive to make your site beautiful, no matter what Saturday, October 6, 12

Slide 37

Slide 37 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 6, 12

Slide 38

Slide 38 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 6, 12

Slide 39

Slide 39 text

Things to think about Saturday, October 6, 12

Slide 40

Slide 40 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 6, 12

Slide 41

Slide 41 text

@BradParbs BradParbs.com [email protected] Go make your site responsive right meow! Slides: brrad.com/wcdetroit Saturday, October 6, 12