Simple isn’t so simple.

playground.ace.ed.ac.uk/~dmsp_amys/will/index.html

I started into building a “simple” responsive website and quickly discovered that such a thing doesn’t exist. The whole premise is straightforward, but the end product is never without complication. There are about 50 ways to do everything. Adaptive font sizes? Using em units works, but only on initial loads or page refreshes. JavaScript? Again, that works. But it’s clunky.

I tried to focus on essence of an adaptive website. The reason is exists in the first place. People access sites from many different devices, on different platforms, and with differing screen resolutions and pixel densities. With all of these things considered, what is the most important part of a website? Displaying the content in a way that makes the user able to navigate it and comprehend it.

So I just created a basic layout-swapping and adaptive-sizing page using a placeholder image and some dummy text. It’s not extravagant, nor is it beautiful; but it shows how media queries work and the basic principle behind adaptive sites.

If this was an elaborate, complete design, I would have used em units for everything because px units don’t convert directly on screens with various pixel densities.

2 thoughts on “Simple isn’t so simple.

  1. Looking good 🙂

    Couple of things.. Not sure what you mean by ems only working on initial page load or refresh?

    You might get some quirky unexpected behaviours because you don’t have a doctype. Stick <!doctype html> at the very top of the page to use the HTML5 doctype. This article is very old and any actual code is out of date, but it explains the principles of this: alistapart.com/article/doctype

    And, I hate to be nit-picky, but you’ve not got your final closing } on your stylesheet. I’m surprised that’s not caused any problems actually! That might be because of your lack of doctype. Oh isn’t web development hilarious.

    Looking forward to hearing about all the problems you had tomorrow!

    • I see all the { } in their correct places. If they weren’t correct, my text editor would’ve gone mad I think.

      I fixed the DOCTYPE. I have a few templates that I usually work off of. I didn’t this time and I forgot one of the little bits. Figures.

      See you later!

Comments are closed.