intro to-responsive-design

Intro to Responsive Design

#ctxnmdesign

Hello. I’m Michael.

#ctxnmdesign

I have two questions for you.

#ctxnmdesign

Who are you?

#ctxnmdesign

Who are you?

#ctxnmdesign

(for real, I’m asking)

What the heck is responsive design?

#ctxnmdesign

Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

#ctxnmdesign

http://en.wikipedia.org/wiki/Responsive_web_design

#ctxnmdesign

Responsive design is the future of mobile web.

#ctxnmdesign

Responsive design is the future of mobile web.

The web by default is responsive.

#ctxnmdesign

DID YOU KNOW...

Basically, it’s nothing new.We just gave it a name.

#ctxnmdesign

By 2015, more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline

devices.

#ctxnmdesignhttp://www.idc.com/getdoc.jsp?containerId=prUS23028711#.UTFwQuugkig

#ctxnmdesign

With the help of this guy...I can help explain responsive design.

#ctxnmdesign

With the help of this guy...I can help explain responsive design.

Really? Gumby?

#ctxnmdesign

#ctxnmdesign

Think about it. What is Gumby?

Can we see an example of this “responsive design?”

#ctxnmdesign

#ctxnmdesign

Sure.

#ctxnmdesign

Very nice.But I have another question.

#ctxnmdesign

How many devices are we talking about?

#ctxnmdesign

#ctxnmdesign

The Number Of Smartphones In Use

Passed 1 Billion in 2012.

http://techcrunch.com/2012/10/16/mobile-milestone-the-number-of-smartphones-in-use-passed-1-billion-in-q3-says-strategy-analytics/

So what’s a solution to getting our website to look good on 1 Billion devices?

#ctxnmdesign

#ctxnmdesign

Well, we don’t have a 100% easy solution, but we

do have a few tools to help us along.

#ctxnmdesign

Media Queries

#ctxnmdesign

/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */}

/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {/* Styles */}

/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {/* Styles */}

/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}

/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}

/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}

/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) {/* Styles */}

/* Large screens ----------- */@media only screen and (min-width : 1824px) {/* Styles */}

/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}

#ctxnmdesign

Responsive Grids

#ctxnmdesign

Skeletonhttp://www.getskeleton.com/

Golden Grid Systemhttp://goldengridsystem.com/

1140 CSS Gridhttp://cssgrid.net/

Have you ever made a site with those techniques?

#ctxnmdesign

#ctxnmdesign

Yes.

#ctxnmdesign

MHMRAuthority of Brazos Valley

Old site.

What’s wrong with the site:

What’s wrong with the site:

1. Out of date

What’s wrong with the site:

1. Out of date

2. Donors don’t know where to donate

Way down at the bottom of the site?! Ain’t nobody got time for that.

What’s wrong with the site:

1. Out of date

2. Donors don’t know where to donate

What’s wrong with the site:

1. Out of date

2. Donors don’t know where to donate

3.It’s not mobile friendly

What’s wrong with the site:

1. Out of date

2. Donors don’t know where to donate

3.It’s not mobile friendly

4. No CMS (but thats a different story)

What we did to help:

What we did to help:

1. Gave it an up to date look and feel

What we did to help:

1. Gave it an up to date look and feel

2. Moved the donation button up to the top

What we did to help:

1. Gave it an up to date look and feel

2. Moved the donation button up to the top

3. Used a responsive grid and media queries to make the site look good on mobile devices

What we did to help:

1. Gave it an up to date look and feel

2. Moved the donation button up to the top

3. Used a responsive grid and media queries to make the site look good on mobile devices

4. Added Drupal for the CMS

New site.

New site.

The new site should launch in the next few weeks.

That’s all that I have.

#ctxnmdesign

Any questions?

Thank You!

#ctxnmdesign

mike@thematthewsgroup.com | @mumptastic