CSS:
  • 1.  Floats & clears #1
  • 2. Floats & clears #2
  • 3. Positioning #1
  • 4. Fullscreen background
  • 5. CSS filters
  • 6. Making a menu
  • 7. CSS 3
  • 8. Responsive webdesign
  • CSS: RESPONSIVEYour website needs to work on mobile devices!

    Nowadays if you want to make a website, you are also obligated to make it responsive. I think Google saw to that when they said websites with no mobile version will suffer in SEO-ranking. So go here and check if your site is all set and good to go in accordance with Google. Now, making a website mobile friendly can be done in two major ways. The first one is supplying your visitors with a whole new site that is specifically made for mobile devices (design and UI) and is by far the best method. However, it does cost money and effort to set it up and you do have two websites to maintain from that point on. The other way is making your website responsive. So, depending on your visitors screen, you adapt your design via CSS without touching or changing the content ( HTML). It’s a little bit easier for updates because if it’s done right, you never have to touch the HTML code. I’m going to look at responsive webdesign and show you just how easy it can be.

    Unpredictable

    The idea is providing multiple designs for the visitor depending on what mobile device is being used by him/her. I think that logic is bulky at best, seeing that with new devices are coming out every second that have unpredictable behaviours and screen sizes. I mean look at the new watches from a certain fruit company where you can check stuff like mail and messages. We don’t know where the web is going and to be honest it’s exciting and scary. We designers/developers have to make sure it all works on all devices and that’s why a more open way of approaching it, is working with the actual screen width. Ignore what specific mobile device is being used and just utilise the given pixels as good and optimal as possible. If the user visits your website with a device that has a 320 pixels width, use those 320 pixels, whatever the device may be.

    Resolution vs. Screen size

    Now, it’s important to note, that there is a difference in screen quality between devices and that causes major problems. I know that my old screen of a couple of years old has a worse resolution than let’s say my current smartphone, although my old screen is literarily 10 times bigger. That means that often the available pixels on smartphones will be the resolution, not the actual screen size. And if I make a website that needs to be responsive, I’ll provide a design for screens smaller than, let’ say 500 pixels. Yet my smartphone has a resolution of 1920x1080, way above those 500 pixels. The result: your smartphone will show the website very, very, very tiny and the user will have to zoom in and out to navigate to different parts of content. And that is wrong. The user can zoom if they really want to, but it should actually never be necessary. Everything should be big enough to read and the user should only scroll down or up, like with a desktop website. Zooming in and out makes everything less fluent and difficult to navigate. What we have to do is make sure the browser looks at the screen size and not its resolution. How? With a simple, one line piece of HTML code:

    <meta viewport="width:device-width">

    No zooming allowed

    Well, this is the most simplistic version but it’ll do the job. Add this part to the head of all your HTML documents, preferably in some sort of template. Now this will make the browser use the screen width, rather than the resolution. It doesn’t however keep the user from zooming in and out. I prefer disabling that, as there is no need for it, if we do our jobs correctly. Zooming might also lead to unwanted actions as mobile devices require our fingers to make certain actions. So we’ll expand our code a little bit, putting the initial zoom scale to a 100%, as well as the maximum and minimum zoom levels. Now, nobody can zoom in and- or out.

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    Making different designs

    Step 1 has been completed and we now look at the screen size of our user. But we’ll have to provide different actions linked to those screen sizes. We’ll have to make multiple designs for multiple screen sizes. Usually, you make about 4: extra small (smartphones), small (tablets), normal (desktop), big (bigger screens). If you are lazy or just don’t have the time, you can get away with making two: a mobile one and a desktop one. You can make way more than 4, in theory the more the better, because you’re optimizing the UX by adapting to their screen, but always try to aim for a minimum of 4.

    Media queries

    The way we provide different designs is via CSS media queries. With those we can ask what the screen size is, and depending on that, execute certain parts of the code. This code can be in a whole separate file or all collected in just one CSS file. I’ll start with the first example as it’s easier to show and keeps things very clear. The moment you’re making a big website you might want to spread it over different files because your file might get to big, making your website slower and your code a little bit more chaotic.

    I hope you understands the basic of adding a CSS link to your HTML so I’ll post that code below (copy paste it baby):

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
        <title>RWD #1</title>
        <link rel="stylesheet" type="text/css" href="style.css">
      </head>
     
      <body>
      </body>
    </html>

    And then open up said CSS file and we’ll add a media query together:

    @media screen and (min-width: 0px){
      body{
        background-color: yellow;
      }
    }

    What I’m doing here is saying that if the screen size is at least 0px wide, make the body yellow. As in, give my page a yellow background. Check it out, your page should be yellow, even if you size the window way down. But that makes sense, this code will only be executed when our window is at least 0px wide. But it always is. Next step, next media query:

    @media screen and (min-width: 720px){
      body{
        background-color: red;
      }
    }

    Build it up, don't break it down

    You can add a certain minimum value, or maximum value, or even both. But the best way of doing this is, gradually build up. That way, the mobile version is loaded first and if the user has a bigger screen, the desktop version is shown. This is the best way of doing it, because a desktop almost always uses cable or WiFi, whilst a smartphone might be using 3G. We don’t want people to spend their monthly bandwidth on downloading your 3 Megabyte background image they won’t even see.

    Mobile always get priority

    Our second media query makes our background red if the screen is bigger than 720 pixels. But we continue:

    @media screen and (min-width: 0px){
      body{
        background-color: yellow;
      }
    }
    @media screen and (min-width: 720px){
      body{
        background-color: red;
      }
    }
    @media screen and (min-width: 960px){
      body{
        background-color: blue;
      }
    }
    @media screen and (min-width: 1440px){
      body{
        background-color: green;
      }
    }

    So far the logic behind responsive webdesign. What you have to do now is go and look where your code needs adjusting. We’ll continue with a more practical example I the next tutorial. Make your window smaller & bigger to see our result. It should look like this:

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy