This two hour webinar will focus on the fundamentals of responsive design including why is it important, how it can be leveraged on existing sites, how new sites can be designed with responsiveness in mind, and how CSS media queries are used to make it all happen.
##Why is responsive design important?
In the beginning, web designers only had to worry about a single platform for their sites - desktop browsers. Soon, smart phones hit the scene and many sites opted to have a (sometimes completely) separate mobile site. Now, with the explosion of devices of all sizes, what are we to do? Create a separate site for each device? The solution that makes the most sense is "responsive design" - design a single site that can adapt to virtually any device size. The responsive design of the site then automatically adjusts itself based on the device width.
Most responsive web sites are built on a "fluid grid" that is based on percentage widths, instead of absolute pixel widths (the days of pixel-perfect web design are long gone!)
##Fundamental concepts
"One" example attached below. Start by making a copy of one_start.html (name it one.html) and working off of the copy. Go through each section below and uncomment relevant code in one.html.
###Fluid Grid
* Utilize percentage widths, not pixel widths for HTML layout grid elements
* Utilize the "max-width" CSS property
* Calculate percentage widths with: target ÷ context = result
###Image widths
* Have images fill up their container, then set their width to 100% (and height to "auto", if necessary).
###Media queries
"Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen)." _via Wikipedia, see link below_
@media screen and (max-width: 590px) {
...css in here...
}
Support for media queries is surprisingly quite strong across all modern browsers. Support for older versions of browsers is available via various workarounds, but is often not necessary as modern non-desktop devices have web browsers that support media queries (iOS, Android, Kindle, etc...)
###Viewport Metatag