I spent Monday morning with our apprentice and was explaining how website design has evolved over the last twenty years. Oh how I wish I has kept some of the early designs by the likes of Microsoft, come to that I wish I could find our very first website. Without realising it, I had explained how hardware – and especially screens – had forced the website design industry to adapt to different rules over the years.
Screen resolutions
When I first started programming, we were using Video Graphics Array (VGA) monitors that supported a screen resolution of 640 x 480 pixels with 16 or 256 colours. You may have seen this screen resolution when starting a Windows PC in safe mode. VGA was superseded by Super Video Graphics Array (SVGA) with a screen resolution of 800 x 600 pixels. During this period I was developing Windows based software solutions and we used a Visual Basic eXtension (VBX) library to manage the user interface as windows were resized. In fact by the time I started developing extranet and intranet applications in 1996 we were using XGA with a whopping screen resolution of 1024 x 768 pixels!
Screen resolutions
Website design
In the beginning website designers (on the whole) created website designs that would work on both VGA and SVGA screen resolutions; in the main they used a scale-able design that worked, regardless of the screen resolution. However as screen resolutions increased beyond XGA designers had to come up with an approach that enables their designs to look great regardless of the screen settings.
Viewports
The viewport (shown in white) has to fit within the various areas (shown in dark gray); in this example 1024 x 768 vs 1280 x 1024 pixels. the solution was to create fixed width designs that say neatly in the middle of the display area. This was fine when comparing the two resolutions above, but many websites were designed for 1024 x 768 using a viewport of 960 (that allowed for a vertical scroll bar and looked silly with the larger screen resolutions now available.
Website designers started creating different Cascading Style Sheets (CSS) to negate this, in effect creating multiple designs for the same website. This was not only inefficient, but also costly to create the HMTL and CSS and then test on a variety of screen resolutions.
Mobile website design
The introduction of smart phones and reasonable connectivity – via wireless networks – provided website designers yet another challenge. Initially designers and developers continued to create multiple versions of websites, in fact many provided stripped down designs and reduced functionality for users accessing systems via mobile devises. It’s hard to believe that Apple launched its’ first generation iPad in November 2010, only 5 years ago! And with it an entirely new user base using a screen resolution of 1024 x 768 pixels.
HTML 5 / CSS 3
HTML 5 and CSS 3 were published in October 2014 and with it a host of goodies that enabled website designers to come up with new solutions for the myriad of devices people now use to access on-line content. Other technologies like JQuery had come of age and provided a rich set of tools for website designers and developers alike. CSS Flex Box Layout is the latest layout model coming to CSS3 (It’s in the W3C’s Candidate Recommendation (CR) stage), but already been widely used to create Responsive Website Designs (RWD) that enable designers to create a website that can be rendered on any device.
The two layouts below use Flex Box, the first is a standard screen resolution and how the site would appear on a desktop or laptop.
Basic responsive website design desktop layout
And here is the same design, but manipulated to work on a mobile device, in this case a screen width of 480 pixels.
Basic responsive website design mobile layout
Flex Box allows you to move HTML5 Semantic Elements and more traditional containers – elements, e.g. div – around and control how they are rendered to the browser. It would help if the browsers could standardise the syntax, but as ever Microsoft and others don’t and can’t agree on standards!
So you end up with multiple versions of syntax (shown below) to achieve the same objective, so that you can support older versions of Safari, Internet Exploere (because they love to be duifferent) and Chrome (because they [Google] can).
Screen shot taken from https://css-tricks.com/snippets/css/a-guide-to-flexbox/
MobileGeddon
Earlier this year Google announced that if websites were not considered mobile friendly, their Search Engine Results Position (SERP) would suffer. Loosely translated, if you don’t make sure your website is responsive and passes Google’s mobile friendly test they would penalise your site in terms of each search result placement! Google gave everyone fair warning with an article published at the end of February 2015 telling webmaters that they had until 21st April 2015 to get their house in order. On the positive side, Google provided leadership and the website designer and developers were struggling to come up with a standard approach; Google provided that! But at what cost?
Are website designs becoming boring?
The downside to Google forcing the issue is that website design is in danger of becoming boring! Whilst Google has provide a wealth of advice and guidance via Google Developers, it has also hamstrung the creative process. The current fashion of flat, square design hasn’t come about by accident; it is a direct result of designers compromising their designs to meet the needs of both mobile device users and more traditional PC users.
Google’s guidance said that a website content should not differ for mobile users, but a mobile users doesn’t want as much information. A contradiction?
So what we end up with is website designers and internet marketers cutting back on content and design to fulfil Google’s requirements … So who loses out? You – the user of course – with less content, less design but of course that’s fine because you don’t want anything more than a sound bite.
Conclusion
I have seen more and more people ask why websites are so boring, they all look the same (web design is now completely boring is a recent example).
Well, in my humble opinion, website design is where it is today because of the constraints placed upon designers and developers and it is up to us to bring back the excitement. I was working on a design earlier today for a user interface we are developing and whilst our core work is around functionality, it would be remiss to ignore the design aspect.
Responsive Website Design (RWD) layout
Mobile layout
Using HTML 5 / CSS 3 and Flex Box we can render the content and functionality, but there are some design compromises. Here’s another example of a on-line, database applications we are working on at the moment. Again using Flex Box to control the layout.
Responsive Website Design (RWD) layout
Mobile layout
We are currently working on a new website design for our primary website – which is suffering from neglect – and will be taking in the challenges discussed in this article head on.
