A long time ago in a galaxy far away I wrote an article about how wide a web page should be. The answer at the time could be summed up as "960 pixels". Such simple times we lived in! Then along came inventions such as, the wheel, fire, the internal combustion engine and, more recently, tablet computers.
Back in the old days, the PC era, you knew pretty much what sort of screen people were looking at your site on, it was somewhere between 800x600 pixels and 1600*1000 pixels - but most people were in a much narower band of about 1000 by about 700. Anybody with a smaller screen knew they were going to have problems - and anybody using a very big monitor would never have the browser full screen, so everything was lovely. We had our rules and we could keep on making sites to the same 960 pixel grid system and my article rocked. But then we all started geting mobile phones with web browsers and companies like Amazon and Google started to subsidise 7 inch tablets to try and oust Apple from it's market dominance, and before you knew it, my article was out of date and web design had changed dramatically.
Things have changed so much that we can't even count the size of screens in pixels any more. Back in the PC era, pixel density was about 72 per inch - and pretty constant. As devices have got smaller the amount of pixels in them has increased dramatically to the point where a 4.5 inch phone can have as many pixels as your 23 inch TV. The standard unit of measurement has even changed from the pixel to the reference pixel, which is an optically consistent unit. Which is a bit like quantum physicists finding particles smaller than an atom, yes, it's definitely all gone a bit quantum!
Technology to the rescue
Reading a standard 960 pixel wide web site on a mobile device can be quite a frustrating experience. Lots of zooming, panning and cursing as you once again fail to find what you want. Luckily for us there is a solution and it's called "Responsive Web Design". The idea is that we create a framework that folds and unfolds to fit the screen you are using. As the page gets narrower columns drop away and the site becomes loger and thinner. You can try it with this site - if you are on a PC, make your browser window smaller and see what happens. The underlying technology is very clever and forunately Drupal solves most of those problems for us, leaving us to think about the not so tehnical aspects such as, which bits of content to remove from the mobile version to keep it readable and engaging.
Many of the early mobile sites used JavaScript to check screen sizes and redirected users to a separate mobile version. The great thing about responsive techniques is that there is only one version of the website and only one version of the content. This makes it easier to maintain and also means that you arer not penalised by Google for having duplicate content.
Google love responsive web design
Another plus to having a responsive site is that Google ranks responsive sites higher than non mobile friendly sites to anybody searching on a mobile. Which makes sense, Google wants to send people using small screens to sites that are viewable on small screens. This fact alone makes it a no-brainer, mobile sites are no longer a luxury, they are the only possibility. Anybody building a website in 2013 needs to be making it responsive.