CSS and responsive design

I got an email from Google the other day informing me that my website was unfriendly to mobile users, which I pretty much knew anyway, but I decided to go investigate, and learned and made some changes that make the site much better, though I still have many pages to edit as of this entry.

The main thing I learned was to use a media query to load an additional external CSS stylesheet if the media is screen and the screen width is 320 or less. Here is a link to a great place to learn about it: w3schools.com CSS media query example.

The other thing I learned about is setting the viewport via a meta tag in my HTML. This is a way to configure the viewing of your webpage on different sized devices. Here is a link for that.

After a lot of fidgeting (if you have used CSS before you know how it is), I made it do what I wanted, and am happy about it. And the end result is it looks and works way better on iPhone and other small screen devices, which is satisfying.