Buy me a coffee
Coding from scratch:
  • 1.  Introductions
  • 2. Domain & Hosting
  • 3. Conventions
  • 4. Web languages
  • 5. The First Files
  • 6. First layout
  • 7. Adding some content
  • 8. Styling the menu & stuff
  • CODING FROM SCRATCH: 3. CONVENTIONSFollow the rules, because otherwise your users will mess up

    Resolution & Pixels

    In digital imaging, a pixel is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.

    Aaand thank you Wikipedia. All clear ? No ? Why not ? Because that didn’t make any sense. Here again for normal people: A pixel is a measurement. More precisely, it’s the measurement of our resolutions. That means that I can tell that my screen is 1920 pixels wide, whilst yours might be 2400. It’s the number of squares you have on your screen and they each have their individual colour. Together they form an image. But because there is such a huge number of them, you won’t notice actual squares, just a nice looking image. Unless the quality of your image is terrible, then you would see them.

    What is important to remember is that everyone has a different amount of pixels. And that results in all of us having a varying resolution. And that sucks. Because I want to make my website work for you, for me and for my cousin. Not to mention the tennis club. What I’m getting at is that web design is very much focused on its audience. I’m not making a website for me (well, kind of for me...) or my clients. But for my clients’ clients. They’ll be reading the website or buying stuff from it. If they can’t see it or if some parts are cut off, people start losing visitors. Potential clients. And I don’t have to tell you that that is bad.


    What we all need to follow are certain conventions. Because everyone online should be able to use and view your site. But if your menu only pops out when you double click the screen, 90% of your visitors won’t see your menu. Even though it may be the best menu in the world. You can be creative, as long as you follow certain rules (You can bend them, but dont break them).

    One of the mentioned conventions is the placement of your website. Nowadays websites will get a fixed width and are placed in the middle. Height-wise there’s not really a restriction. People scroll and that won’t change any time soon. But they will only scroll vertically, not horizontally. When was the last time you got mad because you had to scroll horizontally on one of those old, annoying sites ?! So a fixed width and a website in the middle and top of our page works best. What I usually do is look at the person with the oldest screen to make sure he/she can also enjoy our awesome website. One of the “oldest” resolutions today is 1024 pixels. Notice, that I’m ignoring the height because of reasons stated before. That simply means that my site has to be smaller than 1024. Now you’ll notice that it’ll be reduced to about 990 or 960. The scrollbar on the right also takes up its space on the page and using a 1000 pixels is just a bit too much. Most designs divide your website into columns (two to four usually), so I’ll pick a value that is divisible by 3 or 4. In case that was too fast remember: a website has to work for all resolutions. Smallest resolution: 1024. Scrollbar also uses space so take that into consideration. Using columns will make things easier for you so pick a width that is divisible by the number of columns you will be using (usually 3 or 4).

    Browsers & Platforms

    If we talk about conventions we talk about problems. One of those problems is Internet Explorer. If you’ve ever made a website yourself, you’ll simple smile and agree with me here. It’s not an outrageous claim and it’s not to be mean towards anyone. But IE is just bad. The way browsers work is they show you the stuff that’s on the internet. And that’s good. But to show that stuff, websites have to be made. And those have to work in all browsers. But the web lives and evolves. We can do so much more than we could only a year ago. That’s why most browsers evolve with us. Chrome, Opera, Safari and Firefox all have the luxury to update automatically. And with that update we can do new stuff. We can do cool stuff. Internet Explorer works a little bit differently. Every version is a stand-alone version. That means you can have multiple ones installed on your system. Or not the recent one. I know so many people with Internet Explorer 8 as their main browser. Still. Version 8. That’s an old version. For those who don’t know: we’re currently on IE 11. Why do they use it ? Mostly it’s: they don’t know any better or they can’t because of technical restrictions. And that’s sad. But you can’t expect an old browser like IE8 (from 2006) to understand the code we are using now. So our websites will not work on those browsers and that’s annoying. For us, but more for our user. They didn’t do anything wrong, they just don’t realise they are using old software. So it’s up to us to fix it. And that’s how the everlasting war against IE started and why web designers don’t like IE (the old versions).

    Enough about that rant. Here are some solid number you can focus on.

    Now, depending on your locations, you’ll have to remember that some browsers will be more popular than others. You can always use the statistics from your website to personalise those numbers a bit. If you’re not doing this yet, no more excuses. Here’s a link to a free way to analyse your data and I’ll also provide a link to make sure you can install it.

    Use the free tool Google Analytics.


    As far as customization on your end goes, most of it will be fixing small problems that just won’t work for that specific browser. You’ll have to make your website work everywhere and on every system, and preferably in the same way. But more and more, people will start focusing on the visual, rather than the content. Superficial much ? So you’ll also have to focus more on the design than in the past. Being unique and creative is necessary, without breaking any main conventions. What that will result into is the use of custom fonts. Pretty easy actually, but remember, some fonts might not work or the quality might be awful. Not to mention that some fonts are crazily expensive. Luckily there are free options that are solid. We’ll look into those. But I will always recommend you use a custom font to step away from competitors but also, if you keep on using the older standard web safe fonts, people will start to feel and think you’re website is outdated.

    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