Tweet
Tweet

Slide 1

Slide 1 text

Responsive Design Thursday, September 13, 12

Slide 2

Slide 2 text

Brad Parbs Designer/Developer Worked on over 100 WP sites 6 Plugins on WordPress.org wrote the book “How to be Awesome” WordPress Fanatic Thursday, September 13, 12

Slide 3

Slide 3 text

Brad Parbs Designer/Developer Worked on over 100 WP sites 6 Plugins on WordPress.org wrote the book “How to be Awesome” just discovered effects in Keynote WordPress Fanatic Thursday, September 13, 12

Slide 4

Slide 4 text

@BradParbs BradParbs.com [email protected] GitHub.com/bradp Thursday, September 13, 12

Slide 5

Slide 5 text

Who are you? Thursday, September 13, 12

Slide 6

Slide 6 text

Who are you? * Run a cool website Thursday, September 13, 12

Slide 7

Slide 7 text

Who are you? * Run a cool website * Make websites Thursday, September 13, 12

Slide 8

Slide 8 text

Who are you? * Run a cool website * Make websites * Only came for pizza Thursday, September 13, 12

Slide 9

Slide 9 text

Who are you? * Run a cool website * Make websites * Only came for pizza * PHP Guru or CSS Master Thursday, September 13, 12

Slide 10

Slide 10 text

Who are you? * Run a cool website * Make websites * Only came for pizza * PHP Guru or CSS Master * John Stamos I love RWD! Thursday, September 13, 12

Slide 11

Slide 11 text

Who are you? * Run a cool website * Make websites * Only came for pizza * PHP Guru or CSS Master * John Stamos I love RWD! Someone who needs to use responsive design! Thursday, September 13, 12

Slide 12

Slide 12 text

Why do we need Responsive Design? Thursday, September 13, 12

Slide 13

Slide 13 text

Why do we need Responsive Design? Over 1.2 billion mobile web users Thursday, September 13, 12

Slide 14

Slide 14 text

Why do we need Responsive Design? Over 1.2 billion mobile web users In the USA, 25% only use a mobile device Thursday, September 13, 12

Slide 15

Slide 15 text

Well, that’s nice. But I don’t care about stats. Thursday, September 13, 12

Slide 16

Slide 16 text

Well, that’s nice. But I don’t care about stats. Responsive design is the future. Thursday, September 13, 12

Slide 17

Slide 17 text

What makes up a website? Thursday, September 13, 12

Slide 18

Slide 18 text

the magic of CSS! Thursday, September 13, 12

Slide 19

Slide 19 text

the magic of CSS! Thursday, September 13, 12

Slide 20

Slide 20 text

the magic of CSS! Thursday, September 13, 12

Slide 21

Slide 21 text

A little history on website design Thursday, September 13, 12

Slide 22

Slide 22 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) Thursday, September 13, 12

Slide 23

Slide 23 text

100% Flash sites Thursday, September 13, 12

Slide 24

Slide 24 text

fluid grid systems Thursday, September 13, 12

Slide 25

Slide 25 text

responsive design! Thursday, September 13, 12

Slide 26

Slide 26 text

Thursday, September 13, 12

Slide 27

Slide 27 text

https://status.heroku.com/ http://www.bostonglobe.com/ Thursday, September 13, 12

Slide 28

Slide 28 text

http://robot-or-not.com/ http://colly.com/ Thursday, September 13, 12

Slide 29

Slide 29 text

http://thinkvitamin.com/ http://www.pelicanfly.co.uk/ Thursday, September 13, 12

Slide 30

Slide 30 text

http://stuffandnonsense.co.uk/projects/320andup/ http://hellofisher.com/ Thursday, September 13, 12

Slide 31

Slide 31 text

So what actually makes up RWD? Thursday, September 13, 12

Slide 32

Slide 32 text

So what actually makes up RWD? 1. Fluid/Flexible Grid System Thursday, September 13, 12

Slide 33

Slide 33 text

So what actually makes up RWD? 1. Fluid/Flexible Grid System 2. Responsive/Adaptive media Thursday, September 13, 12

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

flexible grid system Breaks the site content in blocks that can be moved around. Sized using ‘ems’ or percentages NOT pixel widths. Thursday, September 13, 12

Slide 36

Slide 36 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: Thursday, September 13, 12

Slide 37

Slide 37 text

adaptive media Images and Videos that resize themselves http://fitvidsjs.com/ FitVids.js Thursday, September 13, 12

Slide 38

Slide 38 text

media queries CSS that gets applied for specific cases C an target device widths, rotation, etc Reformat sites and move things around Thursday, September 13, 12

Slide 39

Slide 39 text

http://brrad.com/queries clear your floats change font size float things left change your nav Thursday, September 13, 12

Slide 40

Slide 40 text

Thursday, September 13, 12

Slide 41

Slide 41 text

Thursday, September 13, 12

Slide 42

Slide 42 text

Thursday, September 13, 12

Slide 43

Slide 43 text

Thursday, September 13, 12

Slide 44

Slide 44 text

everything float: left; Thursday, September 13, 12

Slide 45

Slide 45 text

everything float: left; margins, padding, width adjusted Thursday, September 13, 12

Slide 46

Slide 46 text

float: right; float: left; Thursday, September 13, 12

Slide 47

Slide 47 text

Thursday, September 13, 12

Slide 48

Slide 48 text

Thursday, September 13, 12

Slide 49

Slide 49 text

how the #%&! do I test on all of these? Thursday, September 13, 12

Slide 50

Slide 50 text

how the #%&! do I test on all of these? Thursday, September 13, 12

Slide 51

Slide 51 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 Thursday, September 13, 12

Slide 52

Slide 52 text

always strive to make your site beautiful, no matter what Thursday, September 13, 12

Slide 53

Slide 53 text

Struggling with integrating this? Ask for help online! Talk to someone here at Web414! L ook how other sites do it Google! Thursday, September 13, 12

Slide 54

Slide 54 text

More useful things! http://tinynav.viljamis.com/ TinyNav Twitter Bootstrap http://twitter.github.com/bootstrap/ Zurb Foundation http://foundation.zurb.com/ Thursday, September 13, 12

Slide 55

Slide 55 text

Things to think about Thursday, September 13, 12

Slide 56

Slide 56 text

So, let’s recap. Thursday, September 13, 12

Slide 57

Slide 57 text

So, let’s recap. Your site can work anywhere & everywhere Thursday, September 13, 12

Slide 58

Slide 58 text

So, let’s recap. Responsive web design is the way to go Your site can work anywhere & everywhere Thursday, September 13, 12

Slide 59

Slide 59 text

So, let’s recap. Media queries rock! Responsive web design is the way to go Your site can work anywhere & everywhere Thursday, September 13, 12

Slide 60

Slide 60 text

So, let’s recap. Media queries rock! L ots of cool things out there to help Responsive web design is the way to go Your site can work anywhere & everywhere Thursday, September 13, 12

Slide 61

Slide 61 text

So, let’s recap. Media queries rock! L ots of cool things out there to help Responsive web design is the way to go Your site can work anywhere & everywhere John Stamos loves Responsive Web Design Thursday, September 13, 12

Slide 62

Slide 62 text

@BradParbs BradParbs.com [email protected] Go make your site responsive right meow! Slides: brrad.com/web414rwd Thursday, September 13, 12