intro to-responsive-design
TRANSCRIPT
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?
