This week we are:
- Review this week’s lesson and links
- Continue working on your blog
- Complete the Guest Speaker Availability Survey
- Complete this week’s assignment
- Continue working on your final project
There will also be a Virtual Guest Speaker, Mark Caron, an Associate Manager at Red Hat in Raleigh, NC will have time slots available for an interview. There is schedule Q/As for the Best Time Availability via Survey.
Responsive
Web Design
When it comes to Web Design, we are at the cusp of a major transition. There once was a time when all one needed to do to begin a new site was to simply look up the most common screen resolution, build a container box of this size and begin filling out canvas with images and content.
When mobile devices came about, things changed a little as designers had to accommodate screens 480 pixels across as well as standard monitors. To overcome this issue, many developers began creating mobile versions of their sites, redirecting users to a mobile site with the m. prefix appended to it. While this worked for a while, soon more mobile devices began to appear, and more and more fragmentation began to occur. Tablets, retina screens, phablets, iPhone-minis and every flavor of Android device imaginable soon made it impossible to design a separate site for every possible screen resolution. Even on a desktop or laptop computer, there is a wide range of common screen resolutions, with 10% of the population using a 1024px screen resolution on the low-end and a virtually equal 11% of the population browsing with a resolution of 1920px. Simply setting a container to 750 or 900px is no longer an acceptable solution. Here enters responsive design.
Responsive design is a shift in thinking from ‘traditional’ design. Traditionally, a content box is created and then area painted like a canvas with every element neatly placed in its desired location. With responsive design, our content box is simply a container that is filled with content. The shape and size of this container will be dependent on the screen it is being displayed on.
But how would one go about creating such a container and still have it look good? The solution is two-fold. First, get into the habit of working in percentages and ’em’s instead of pixels. Unlike pixels, ems and percentages are relative measurements. This means that if the letter ‘m’ looks smaller on a device’s screen, this sizing will be reflected in other elements on the page as well. Next, use CSS3 media queries. Resize your browser window and shrink it until your page ‘breaks.’ Make note of this size and set a media query to this resolution. Use CSS to ‘fix’ your page at this size and keep working your way down to lower resolutions until it ‘breaks’ again, ‘fixing’ it will media queries and CSS until it finally looks good across all resolutions.
The links below provide more insights and instructions on how to accomplish this process. Review the links below and apply what you’ve learned to your design.
Responsive Web Design Basics
URL: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/
Responsive Web Design
URL: http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
Learn CSS Grid in 5 Minutes
URL: https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
Duration: 03h 21m
CSS: Advanced Layouts with Grid
CSS layouts are becoming less of a puzzle. After decades of hacking CSS to make multicolumn layouts, the CSS Grid Layout module makes page layout predictable. In this course, take a step back from traditional layout models, and learn how to take full advantage of the new capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive. Join Morten Rand-Hendriksen as he walks through how to create full-bleed layouts, multicolumn layouts, and advanced card-based layouts. He demonstrates how to create dynamic responsive grids that adjust to their available viewport space.
CSS Grid Changes EVERYTHING
Testing Mobile Websites on a Desktop
Download Chrome to computer. URL: https://www.google.com/intl/en/chrome/browser/
Open Chrome to the page you wish to test and hit the F12 key on the keyboard. This will open Chrome’s Dev Tools panel.
With the Dev Tool Panel open, click on the Mobile Device icon on the bottom left.
NOTE: You may need to hit the ‘Esc’ key in order for this submenu to appear.
From this screen, you can choose the model of mobile device you’d like to emulate. The example above shows the iPhone 6 Plus.
