My current twitter avatar

zaccary price

Front-end developer and designer, currently based in Helsinki, Finland

On Creating a Mobile Web

03 Nov 2012

In a world where devices are getting more portable as well as more numerous and have better access to a universal web, the concept of ‘responsive design’ is becoming more attractive every day. Being able to effectively use the same web on a device the size of a credit card, the same as you would on a desktop computer is, I believe, one of the greatest leaps in the internet’s relatively short history. Yet, as much of a logically sound idea responsive design may be, on first hearing of it, it is still stuck with the stigma of being a gimmick. It is abuzz word that is thrown around to attract customers or to show off skills of would-be designers or developers. It is a part of the HTML5 hype that is circling around the opinion-o-sphere that is web-media. However, it really goes, or should go, far, far beyond that. A mobile-friendly web is a must-have in the near future. Mobiles are becoming the primary way we access the net and we simply cannot avoid this trend. Responsive design is not a gimmick or anything like it, it’s a completely necessary, if over-hyped, method of designing the web.

A brief history of grief

But, before I give further insight into my own approach to responsive web, let me tell you a story of how my web-designer(ish) life came to be. My expansion into the web industry, for lack of a better description, has been shaped to a large extent by personal experience. I started looking into web design, or development, back when I first started high school at the lowly age of 12. My first website was a masterpiece, a crowning achievement of a week or so of work. All it was, was a blank page with a marquee (remember the marquee tag?) at the top that read “Under Construction”. It was, however, enough to launch me into a world of creating content for the web that would be shaped constantly for the next 9 years up until this very day. It was also the beginning of a new way of looking at the web, now I had a glimpse of how it works, I started to see how it really didn’t work for the most part.

Looking into web design made me see the inadequacies of what already existed around me. Websites then were just entering the ‘web 2.0’ hype phase, and overly-Photoshoped graphics and miniscule text were at the height of their popularity. I, for one, deplored this look increasingly as time went by. Filter-mangled graphics were an eyesore and had no reasonable purpose except to drag user’s barely-DSL speed connections down to something that could give continental drift a chance of catching up. I did try and follow the trend of graphic-based web design, making complex layouts, full of bevelled edges and shiny embossed buttons, but for the most part, I could never get it to work. It simply didn’t sit right, all I could see was the vivid colours and pseudo-3d design shouting at me from the page. It came as a great relief when, eventually, I discovered CSS style sheets for the first time. Their ability to add graphic qualities in subtle ways, without running performance or a user’s eyes, was a revolution to my young developer-self. I started to become increasingly repulsed by the still shiny and plastic design that existed all around.

the tides change

A few years on, I was working in Dominoes Pizza, as a lowly Customer Service Officer, taking orders and scrubbing dishes and organizing the freezer on weekends for a pittance. Yet, even though I had the same value as an answering machine, I still had to train, using their website-based lessons I had to complete. Their website, to put it lightly, was dreadful. Actually, it was not only dreadful, it was a damn-right debacle. It literally sucked the life out of my old desktop PC, and I don’t mean the limited ADSL we bad at the time. It literally used up all available physical performance just to have it open and that was before I had to navigate it’s shocking interface. It took at least an hour to figure out where these lessons I had to learn were and by the end of it I was so frustrated and angry I gave up on the whole thing. Much to the dislike of my managers. Yet, despite this probably causing me to lose that job, it gave me a renewed passion to create a better web. One that preferably didn’t melt the computer, or the user, trying to access it. As a result, I have tended to be quite minimalist in my approach to web design, something which is mentioned quite a bit my customers and casual observers alike. I continued to progress like this, yet I was in for another lesson that would fire me into a new, modern way of thinking about the web.

Such as it was, I became suddenly aware of the new realities of web design. Web design must be made mobile.

All was well, I was messing around creating websites for myself, maybe learning a thing or two in the process. Until one day I was taking an ‘introduction into web design’ class at university, as an easy credit or two. After my tutor shared a few useful links with us, I read up on the increasingly popular method in which websites could be created in such a way that they would scale down for mobile phones. Such as it was, I became suddenly aware of the new realities of web design. Web design must be made mobile. Now, after that moment and the tutor that inspired it, I wound up in a situation in which my only access to the internet was through a recently purchased mobile phone and the free WiFi at a train station in town. I was forced to sit for as long as the battery held out, fiddling around on a screen the size of a business card, which had the processing power of a low-spec digital watch, and somehow use the internet. The same internet, no less, that everyone had been using for almost 20 years. It was a horrible experience. Websites, for the most part, weren’t anything close to usable on a device as small as what I was stuck with. I was forced to constantly zoom-in, pan around and rotate the screen to try and use any of the content, or functions or anything else. I would often click the wrong link, as they were far too small to be interacted with using my finger, which was to a mouse pointer what a tree trunk is to a toothpick. Clicking the wrong link meant I had to wait 5 minutes for the primitive processor to work its way through the new page, loading all the content, the graphics and anything else and when this was finished with, I had to go back and start it all over again. By an hour and a half, I had done what on a desktop would take me 5 minutes. My battery was dead, I was angry and in no mood to continue. One measly task (maybe) was completed after the whole ordeal. Something had to be done.

the crusade against frustration

Before this I was already quite interested in creating mobile-friendly websites as much as possible even if I didn’t need to, at least with as far as satisfying clients went. When a client wanted a simple website that had no frills and no fancy extras, like a site that catered for mobiles, I felt saddened that it wouldn’t have this added means of intractability. I was tempted to just do it anyway whether the client protested or not. The later week or so of torture that I went through was merely the last straw in a tirade of woe at the lack of mobile web access. The web must be mobile, to avoid making it so would be to deny the obvious truth, that mobiles, however slow, cumbersome, cheap and generally useless they may be at times, are still a fantastic means with which to access the internet. Their only real drawback is the web itself, it is this that is the cause for all the heartache and suffering that users endure. Such as it is, I want to cure this pain which I myself still feel, I commit myself to making everything as mobile-friendly as humanly possible, and damn the expense.