Session 1: This week we will begin looking at ways to make our templates responsive to devices with different dimensions like desktops, laptop, tablets, and mobile phones. One of the best techniques available are media queries. Essentially, media queries allow us to insert logic into our CSS that changes the properties assigned to certain rules when the maximum or minimum screen width goes above or below a specified value.
CSS Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site. Open the overview to see the complete list, and find for each media query if your browser applies these.
– cssmediaqueries.com
Relevant resources:
MDN: CSS media queries
Gallery of Sites Using Media Queries
Media Queries Explained on W3Schools
Session 2: No class due to artist residency.
http://webfieldmanual.com/
This website is a really useful because it provides links to so many great resources for all aspects of web design. I read through it this summer and it really helped me a lot in my process.
http://www.typewolf.com/
This website is awesome if you are looking for typography inspiration. It’s nice to see the different fonts in action and to see how other designers paired them with other fonts.
http://www.html5rocks.com/en/tutorials/video/basics/
I found this website helpful in explaining how to implement an html 5 video in a really simple and clear way.
http://demosthenes.info/blog/903/Preflight-Your-Video-For-Delivery-in-HTML5
This article was helpful in explaining how to prepare your video for the web to make sure it loads properly and doesnt slow down your website.