How to become responsive. We will go over the various methods & styles used to make your site responsive. We will discuss CSS media queries, FitText.js, FitVid.js and responsive slideshows.
Vector Search -An Introduction in Oracle Database 23ai.pptx
Responsive Web Design & WordPress
1. Hello Responsive Web Design
This is a presentation on Responsive
Web Design
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
2. Hello Responsive Web Design
I am Dan Gavin.
I like design, beer, food, bikes and WordPress.
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
3. Hello Responsive Web Design
“ We can design for an optimal viewing
experience, but embed standards-based
technologies into our designs to make them
not only more flexible, but more adaptive to
the media that renders them.
- Ethan Marcotte
alistapart.com/articles/responsive-web-design Buy
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
4. Hello Responsive Web Design
Be responsive.
Desktop Mobile
Twenty Eleven Theme
twentyelevendemo.wordpress.com
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
5. Hello Responsive Web Design
Be responsive.
Desktop Mobile
Jason Santa Maria
jasonsantamaria.com
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
6. Hello Responsive Web Design
Be responsive.
Desktop Mobile
Jason Santa Maria
jasonsantamaria.com
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
7. Hello Responsive Web Design
Be responsive.
Desktop Mobile
Russ Maschmeyer / Strange Native
strangenative.com
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
8. Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
9. Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
10. Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
11. Hello Responsive Web Design
What it takes to be responsive.
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
12. Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System
• Scalable Images / Video
• Media Queries
• Organization
• Crying
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
13. Hello Responsive Web Design
Adaptive Grid Systems
960.gs 1140 CSS Grid
Golden Grid System 12 Column Grid
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
20. Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video
• Media Queries
• Organization
• Crying
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
23. Hello Responsive Web Design
“ The toughest challenge in implementing
the responsive bits was fluid media. A lot of
trial and error went into finding the right
CSS solution, but what’s cool is we’ve been
able to apply it to many more themes that
we maintain on wordpress.com
- Lance Willett
simpledream.net/about
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
24. Hello
/* Images */
.entry-content img,
.comment-content img,
.widget img{
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*=”align”],
img[class*=”wp-image-”]{
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full{
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
@iamdangavin | iamdangavin@gmail.com
25. Hello Responsive Web Design
Flexible Media (Video)
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
26. Hello Responsive Web Design
Flexible Media (Video)
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
27. Hello
/* Media / Videos */
object,
embed,
iframe{
max-width: 100%; /* Make sure embeds fit their containers */
}
@iamdangavin | iamdangavin@gmail.com
28. Hello
FitVid.js
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Supports: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter
* Add your own video vendors
Fitvid.js
<script src=”path/to/jquery.min.js”></script>
<script src=”path/to/jquery.fitvids.js”></script>
<script>
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
jQuery(“#thing-with-videos”).fitVids();
});
</script>
@iamdangavin | iamdangavin@gmail.com
29. Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries
• Organization
• Crying
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
30. Hello Responsive Web Design
Media Queries
Think of it like conditional comments... But within CSS!
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
31. Hello
@media
/* Media = Smallerscreens */
@media only screen and (max-width: 1023px){
.your-style-here{ }
}
/* Media = iPad / Orientation: Landscape */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape){
.your-style-here{ }
}
/* Media = iPad / Orientation: Portrait */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait){
.your-style-here{ }
}
/* Media = Mobile / iPhone Orientation: Landscape */
@media handheld, only screen and (max-width: 480px) and (orientation: landscape){
.your-style-here{ }
}
/* Media = Mobile / Orientation: Portrait */
@media handheld, only screen and (max-width: 480px) and (orientation: portrait){
.your-style-here{ }
}
/* Media = Mobile / All others */
@media handheld, only screen and (max-width: 767px){
.your-style-here{ }
}
@iamdangavin | iamdangavin@gmail.com
32. Hello Responsive Web Design
CSS3 Media Queries
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2
transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+,
Safari 3+ and Chrome already offer native support.
code.google.com/p/css3-mediaqueries-js/
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
33. Hello Responsive Web Design
Resources on Media Queries
• w3.org/TR/css3-mediaqueries
• coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-
version-of-your-website/
• css-tricks.com/css-media-queries/
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
34. Hello Responsive Web Design
Resources on Media Queries
• abookapart.com/products/responsive-web-design
• alistapart.com/articles/responsive-web-design/
• alistapart.com/articles/fluidgrids/
• coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
35. Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries - ✓
• Organization
• Crying
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
36. Hello
Organization
/* Media = iPhone*/
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />
/* Media = iPad*/
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" href="tablet.css" />
/* Media = Core*/
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
@iamdangavin | iamdangavin@gmail.com
37. Hello Responsive Web Design
What it really takes to be responsive.
• Adaptive Grid System - ✓
• Scalable Images / Video - ✓
• Media Queries - ✓
• Organization - ✓
• Crying
@iamdangavin | iamdangavin@gmail.com | www.iamdangav.in
