How to Code Responsive CSS Using Media Queries

Learn how easy it is to code a responsive web page with the use of media queries. Easy enough for beginners!

Welcome to the world of User Experience (UX) web design! In my opinion, you have chosen the correct path of going down the responsive website route rather than a mobile site or even an app site. Coding responsive websites is easier than you think and it’s really fun too!

Introducing Media Queries

Media queries are the 1 tool that you will need to learn to start coding responsively. Don’t worry, the name make it sound more difficult that it actually is. In reality, it’s just a meta tag and some very easy lines of CSS.

A media query is basically a line of css which says “hey! if this screen size matches this range of pixels, use the following CSS”. Take the following for example:

@media screen and (max-width: 800px) {
.head {background:blue;}
}

The example basically says “Hey, if the screen size is no larger than 800px, make “.head”‘s background blue.” Starting to get it? Not so scary is it?

The important META Tag

Now, this is all well and good, but there is a missing link to get this to work. You need to include the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

That basically allows you to reference the screens size in your CSS. Just pop that into your head before your CSS and your good to go. Without it, it just won’t work.

Writing your first CSS media query

Now it’s time to write that media query. Lets go with one for screen sizes of 320px wide or less. This is your common mobile phone. So, lets say we wanted to change the width of .head to 100% and the background color to black if on a mobile. We would do it like so:

@media screen and (max-width: 320px) {
.head {width:100%;background:black;}
}

Easy! I bet the gears in your brain are starting to move now as you start thinking of how you are going to change the elements on the page with different css. It’s just strait CSS and best of all, it’s easy to test. You don’t need hundreds of devices, just resize your browser window and you will see your responsive css kick in. Pretty cool? Don’t get carried away, it can get pretty hypnotic and you will start finding yourself playing the ‘responsive/not responsive game’ on everysite you visit now.

Writing for different screen sizes

Ok, so you have written a css media query for a screen smaller than 320px wide. What about the others? It’s up to you which you pick. Remember, you only really need to code in different breakpoints where the css is going to change. So, you may say that it only changes at mobile, tablet and desktop.

How to write efficient media queries

It’s important to limit the amount of times you run a media query in your CSS as it does put a little more memory strain on the browser. So, make sure that you try to contain all your changes by screen size, not by class or elements.

Bad Example:

.head {width:900px;}
@media screen and (max-width: 320px) {
.head {width:100%;background:black;}
}

.nav{height:50px;}
@media screen and (max-width: 320px) {
.nav{width:100%;background:black;}
}

Good Example:

.head {width:900px;}

.nav{height:50px;}

@media screen and (max-width: 320px) {
.head {width:100%;background:black;}
.nav{width:100%;background:black;}
}

See how the good example only runs the media query once? It’s cleaner and lighter on the browser.

Going further

That’s everything you need to know really. If you want to go further, there is plenty more reading on the net. It might also be worth looking at some of the common responsive frameworks. The 2 popular ones are Twitter Bootstrap and Zurb Foundation and I have written a¬†Twitter Bootstrap vs Zurb Foundation¬†post which helps weigh up which framework to choose for a project.

7 Steps to Solve Coding Problems Faster

 

You’ve got an error, and you haven’t a clue what is going wrong nor do you know where to start in troubleshooting. I’ve seen it time and time again with programmers wasting precious time because they haven’t gone through the correct steps when it comes to troubleshooting coding errors/problems/bugs. So, here is my 7 steps to success for fixing coding problems in the quickest fashion. Keep your code clean with professional New York web design firm.

1. Walk through the code yourself

You are your worst enemy. More likely than not, you have made a mistake yourself. But that’s ok, you are only human. Walk through your code, from the top, line by line, to ensure all the logic is correct. Keep a look out for any syntax issues like using = instead of == (that gets me all the time).

2. ‘Can you hear me now?’ technique

Credit to Verizon for their late 90s TV adverts. The idea is that you echo/print out ‘can you here me now’, ‘hello world’ or ‘loser’ throughout your code until you start spotting where the echo isn’t coming through as it should. This is particularly handy for WSOD (White Screen of Death) problems.

It’s also worth echo’ing about variable values to see when they change.

3. Have a fellow coder have a look

If you work in a team, get your fellow coder to have a look. You’d be surprised what they will spot within 10 seconds that has taken you an hour. Yeah, they will probably put you down for it, but hey, it’s all good.

4. Google It (for 10 minutes)

More likely than not, there is someone else who has had the same problem. Google is your friend!!! Google the actual error or what you think someone else might google to find an answer like ‘PHP isn’t assigning my variable’. In most cases, this solves the problem. BUT, don’t spend more than 10-15 minutes doing this.

5. “StackOverflow It”

You, your fellow coder and Goolge can’t find the answer quickly. It’s time to throw it to the mass programmer community that is StackOverlow. Probably the best Q&A site for programmers since discussion forums were the cool thing.

But, make sure you craft your question well (and check previous questions). Here are some quick ‘mini’ tips for crafting a good Stackoverflow question:

  1. Be clear and to the point with your question’s title.
  2. Be clear and to the point with your question. Programmers are lazy and sigh when they see a page with at least 2 paragraphs.
  3. Provide example code if possible (make sure you remove any passwords/etc)
  4. Don’t get defensive. These guys are here to help. It’s not their fault they are programmers and thus lack social skills.
  5. Oh, and make sure you mark a correct answer. It will help you in the future.

6. Keep Googling It

While your stackoverflow question is ‘boiling’ away, keep Googling. You’d be surprised what you might end up finding after. BUT, if you do find an answer at this stage, make sure you answer your own stackoverflow question.

7. Sleep on It

Sometimes, having some time away from the problem and clearing your head makes things so much more obvious. Don’t continue bashing your head agaisnt a wall. Walk a way from the problem, find something else to do for a while. When you come back to the problem you might see it in a different light and know the solution.