Week Five: Applied Responsive Design 1-2
Did you find anything helpful with the way the instructor used Illustrator tools when designing for responsive layouts?
There were a few good things about how the instructor used Illustrator for designing his responsive layouts. For one thing, you can have multiple workspaces open sized for desktop, tablet and mobile which allows you to look at the layouts simultaneously. The instructor also made use of a layer for callouts so that he could make notes on functionality and changes between different layouts. Not something the instructor mentions, but a advantage that I can see, is that within Illustrator it is easier to copy, place and resize elements, so that would make it easier to create the different sized layouts. Illustrator is also good for if your site will be using vector-based images.
What are some HTML5 semantic elements the instructor uses when outlining his HTML document?
Some elements used were <header>, <nav>, <article>, <aside> and <footer>. This is really my first time learning about HTML5 semantics since I only had Web1 and it was only mentioned in passing during that course.
Generally, when designing responsive websites it is good practice to design for mobile first or mobile simultaneously with desktop layouts, rather than design desktop layouts before mobile. In seeing how the instructor analyzes his layouts, explain in your own words why this is a good practice.
It’s a good practice to design for mobile alongside desktop because the elements of your layout may need to be changed and repositioned for the mobile layout. Knowing what the mobile layout will look like beforehand will allow you to position the HTML code in an order that best fits with the hierarchies for both mobile and desktop.
What is a viewport?
Quite simply, the viewport is the device and browser you are using to view the site. For example, a mobile device has a viewport that is smaller than the viewport for a tablet or laptop/desktop. Each has a browser width, some adjustable, which creates the viewport.
ADD THE VIEWPORT CODE TO THE <HEAD> OF YOUR WORDPRESS SITE IN HEADER.PHP
Done. Though most of the viewport code was already included on the Blankslate Header.php.
How does the instructor organize his CSS code?
The first thing that the instructor does to organize his CSS is to figure out what elements, styles and code will be used almost constantly. These codes he includes in the first section of CSS that he calls global styles. These are the base styles that the majority of the responsive layouts will be using. He then organizes his CSS into header styles, footer styles, mobile styles, etc. The important thing is to figure out what code will be the base styles.
Why should you NOT target specific devices in a responsive layout?
You would be smarter to have your responsive layout respond to viewport width changes by specifying exact width breakpoints rather than targeting specific devices. The reason for this is that between devices, the viewport widths can vary greatly, so it is easier to specify 3 different “@media screen and (width)” widths than to have to specify for the multitude of different devices out there. Also, as technology changes, many devices will end up with changing viewport widths over time and many new devices will be introduced and many will go away, so to specify a device that currently exists is very narrow minded with no thought to the future.
Give an example of a media query and explain what it means.
“@media only screen and (min-width:481px) and (max-width:768px) {}”
This code would target devices with a screen width between 481px – 768px and applies the styles included with this query. Any device with a screen size lower or higher would be styled differently.
Explain the reason for using min- max- widths and percentage widths.
The percentage width refers to how much of the viewport is taken up by the element you are styling. For example, a box with a percentage width of 50% would take up half of the browser window. The min- max- widths are a way of controlling the style further by making sure that the element doesn’t get too small or too large. For example, if your element is styled with a max width that is lower than the browser’s window, the element will stop growing, and if the browser’s window is smaller than the min width, the element will have stopped shrinking and likely a scroll bar would appear at the bottom of the screen so you can scroll to see the rest of the element.
Why is it a good idea to use different versions of images on desktop, tablet and mobile devices?
Using smaller sized versions of images for tablets and mobile devices is important because those devices often have a slower connection and data charges, while desktops generally do not. So the smaller images will load significantly quicker than the larger images would.