PlumberSurplus.com Ecommerce and Entrepreneurship Blog | About | Contact | PlumberSurplus.com Store

Suggestions for the Future of Web Design

Posted on February 10, 2010 by Trevor

I am primarily a developer. I like to work on the stuff in the background, the stuff that makes our sites work, rather than what our customers actually see. However, in a small IT department you wear many hats, and I tend to also do a lot of design work. In other words, I'm arranging all of the images, text, and so on that you see when you open a web page. I am sure there are others in the same position so I'd like to give a basic introduction about why design work is so hard, and some possible solutions that I'd like to see in the future.

Designing for the Web

Designing for the web is very different from most other types of design. For one thing, its interactive. The layout and content must change over time based on the actions of the user. More importantly, the layout must be able to change based on the capabilities of the user's system, and still look good. When designing a flyer, you may know that your design will be on an 8.5 x 11" sheet of paper, and it will always look exactly the same. Even movies and video games, media known for their dynamic nature, generally have a few standard sizes and easy ways to transition between them. This is not true for web sites.

There are three standard technologies used to display web content: HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), and JavaScript (or ECMAScript, to be precise). HTML is the most basic of the three, and displays the actual content (such as text, links, or images) on the page. CSS is layered on top of the HTML, formatting the elements that HTML displays. CSS determines where on a page an image or block of text appears, what color or font it is, and so on. JavaScript is the closest of the three to an actual programming language; it's primarily used for dynamic effects like reacting to user input or providing functionality not available in ordinary HTML and CSS. However, underlying all of these technologies is the actual system running them: the browser. There are many different browsers used to access the web, and none of them completely follows the standards. Each has its own little quirks and extras, which means that in order to display a web page correctly on all of them, a designer must be very careful with what HTML, CSS and JavaScript he uses.

Layout and Headaches like Internet Explorer

Layout is especially aggravating. It uses a very finicky standard to begin with, and browsers tend to take the most liberties with formatting. The primary offender is Internet Explorer, who being by far the most popular browser for a long time, apparently decided it would be fine to throw out the standards and make up their own. Thus the usual method in web design is to get the web page working in all the other browsers, and then do it all over again for Internet Explorer. This has improved in its most recent versions, but a significant proportion of users have never upgraded: we still get over 10% of our traffic from Internet Explorer 6 users, two versions behind the most current. Please, if at all possible, upgrade to the newest browsers! We web designers will thank you.

On top of the browser problem, as I mentioned, CSS itself has some major flaws. CSS is based primarily on "flowing" text layout, as in newspapers and magazines. However, as we know, static layouts aren't a good fit for dynamic web pages, and this model is far too limited to account for the layouts web designers want. This is mostly fixed by a cobbled-on system of layers and boxes, but many of the solutions are obvious afterthoughts. For example, one way to position a box is using "absolute" layout, which means the box is not part of the page flow but lies on top of it in the exact position you specify. This works pretty well, but it's based on the top left corner of the window, so if the browser is resized all the other content moves around but the absolute box stays still. This tends to break things. One way to get around that is to put the absolute box "inside" another box, so that it moves with it. The way to do this is to mark the other box with a "relative" layout, which means that that box stays in the normal flow, but is offset by an amount you specify. There is no logical connection between the outer box's relative layout and the inner box's absolute layout, but the makers of CSS decided that the former was the right way to indicate the behavior of the latter. This is just a simple example.


Changes That I Would Make

However, the situation is unlikely to improve in the near future. Indeed, it would be unwise to do anything drastic about it, because so much of the web is already set up to work as is: and it would cost the economy billions of dollars to make a major change. So web design is likely to remain in the hands of those of us who have experience in its arcane techniques. But if it could be changed, what should it be like? Well, first, I would drop all pretenses at preserving static layout. Similarities to print are analogies, nothing more. I'd make the box model the primary aspect of CSS, with text flow being a subset for use within boxes. I'd rework the relationship hierarchy between boxes to be more explicit with regard to things like positioning. Finally, CSS files tend to be large, flat, and difficult to navigate and edit. I'd like to change that by introducing variables: named styles that can be applied to several different parts of the page at once. There is already something like this (called "classes"), but it's not nearly as flexible as I'd prefer. I believe those changes would make formatting web pages much more intuitive, opening it up to a much larger group of site creators. I do think it's possible to implement these changes, but it would take a long period of incremental changes. In the meantime, I'll be taking on design tasks as well as my more normal development projects.

 


Kohler is arguably one of the most innovative brands in the home improvement industry. The new Karbon faucet has completely transformed the kitchen and more specifically revolutionized the kitchen faucet. Meanwhile Kohler seems to effortlessly create bathroom fixtures that are not only sleek but save water, like the Escale toilet.

blog comments powered by Disqus