This week I finished the Web Foundations lessons/quizzes and continued my focus on responsive web design. Once I completed the lessons I continued work on the portfolio website project which is due in a couple days.
Responsive Design
One of the quizzes provided non-responsive html & css files that had to be tweaked to make them responsive. This involved setting relative widths for containers (ex: using width: 100% vs width: 800px) , padding the a tags (to ensure touch targets are easy to hit on smaller screens) and adding the following meta element within the <head> section of the html to optimize the viewport for mobile devices:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Here are a couple explanations that go into more detail on the viewport meta tag:
- Using the viewport meta tag to control layout on mobile browsers
- Responsive Web Design – The Viewport
As I was working through the responsive quiz one item that gave me grief was a couple of the sections overlapping. This had to to with a line in the CSS float: left that I missed the first time around. The line just needed to be commented out so the sections would not overlap.
Media queries & breakpoints
Another a focus this week was on media queries and breakpoints. Adjusting the layout of the page based on the size of the browser. Breakpoints are not an exact science as they are (or at least should be) content driven. Basically you start with the smallest screen view then expand until your content gets wonky. Then you create a breakpoint to fix the content layout and repeat this process until you feel you’ve sufficiently handled all the breakpoints for your content.
Mobile-first design
As I researched various articles online regarding breakpoints I am finding that “mobile-first” design is recommended a lot. This was something I only touched on last week and didn’t really understand the reasoning behind it. First reason I’m finding is that designing mobile-first helps keep code simpler and easier to maintain, second it forces you to think about and prioritize content layout, last but not least it will usually translate well to other devices.
Here are few of the articles I read. There were more but these seemed to explain things nicely.
- A Hands-On Guide to Mobile-First Responsive Design
- Creating a Mobile-First Responsive Web Design – This article is 6 years old at the time of this writing but does appear to be relevant today.
- 7 habits of highly effective media queries – this article is 5 years old at the time of this writing but also seems mostly relevant.
Flexboxes
I’m just starting to grasp the concept. Learning by trial and error testing different scenarios to see how they behave. Essentially you create virtual containers (boxes) for content that wrap automatically as you go down in size. Initially I thought the concept would be simple. However any minor typo, div in the wrong spot etc. can result in content in the wrong place and/or all over the place.
I’d like to really get a solid handle on responsive design and whip up a few standard flexbox templates I can use going forward. That will have to wait since to stay on track I will need to get things kicked off with JavaScript next week.
Portfolio website project
My goal tonight is to submit my portfolio website for review. I’ve reworked it two times due to struggles ahem… I mean “learning opportunities” with responsive image sizing within divs and making sure media queries are set properly. Right now I’m working to get my flexboxes to wrap properly at different breakpoints. Once that’s done I’ll run through the project requirements once more to make sure I captured everything and submit it.
Summary of current progress:
Web Foundations (HTML, CSS, Responsive design…)(100% complete)- Web Programming with JavaScript (JavaScript, git, version control, DOM..) (30% complete)
- Exploring JS – Object, Tools and Testing (Accessibility, testing, optimization)
- Front-End Applications
- Building with React
- Extracurricular (jQuery, security) (25% complete)
- Career – Job Search Strategies
- Career – Networking
- Career – Front-End Interview Practice