I decided that, having the bare bones of my website up and running, I should work from the top down fine-tuning it, so yesterday I started to work on the navigation bar.
I mentioned in a previous post that I was really going to try to make the site responsive, so I’ve been working on that. Sometimes on my laptop I’ll have a web page open with my browser only taking up half of the screen, and I really wanted my website to be able to cope with that. I’m still playing around a little with placement, so I’ll be making small changes over the next couple days.
I’d really like to take the narrowest version of the design further though- I think the menu will separate into buttons, and some or all of the content may disappear. I’m not too set on exactly how it needs to look just yet, but that’s what this is about- playing around and finding out what I can do!
The most impressive feature I discovered was definitely the @media query. I applied it twice, specifying different browser widths, so that the navigation first moves down, tucking the menu below the logo, and then becomes vertically orientated as the browser narrows further. You can read more about the @media query, and check browser support at w3schools.
The @media queries alone weren’t enough though. When I tested it on my ipad and mobile the changes didn’t take effect. I confirmed that both had screen sizes that should have triggered changes to the layout, but nothing seemed to happen. I looked into responsive design further and found out that I was just missing one line of code: a meta tag. Mobile browsers automatically try to display web pages that are 980px wide- about the width of a desktop browser, and will zoom out to make it fit on the screen. Adding this handy bit of code made sure that the site was displayed at the correct scale (100% zoom) :
<meta name=”viewport” content=”initial-scale=1″>
Looking through google search results pages about the issue, I came across a tutorial about it on Tuts+. There are some really good points made down in the comment section of the tutorial- certainly enough opinions to go round!
Lesson learned. I struggled enough with this that I won’t be making the same mistake again!
Google has been amazing; as always. I found two great new resources from them: HTML5 Rocks, and Google Developers.
I’ve been reading some really good articles about people doing responsive web design. Brad Frost on HTML5 Rocks talks about creating a responsive site starting with the mobile version. I really like that article, and it makes a lot of sense to me: if making the website accessible is so important to me, maybe I should start with the mobile version.
The Multi-Device Layouts in the Web Fundamentals section on Google Developers is proving a pretty great find. I’m loving that there’s text as well as videos [and also loving the fact that I actually understand it all!]
With so many people using smartphones now can we really afford to make sites that aren’t responsive?
Part Timer 