Web Technologies Need A Complete Overhaul?

Get Started
1

Hi All,

Over the past year especially, it’s become apparent to me that our existing web technology stack, involving HTTP, HTML, CSS and JavaScript, is greatly limiting what can be achieved on the free and open web. The reason is equally apparent, and that is because all of these technologies were invented in the early-to-mid 90’s, when the web was only and its potential unimagined. Standards bodies have done well trying to keep up with the increasing demands of the web, but I feel the more features which are added to these existing technologies, the more obvious it becomes that we need a complete technology overhaul. All the CSS3 and HTML5 features to me, look like hacks, and the reason they look like hacks is because they fall way outside the scope of the original technologies they’re based on.

HTTP, HTML and CSS are great for marking up documents. I’d much rather this combination of technologies than Word and an FTP server, but the web is not longer about documents, or should I say, hypertext. I’m of the opinion that one of two things need to happen, either a new technology stack needs to be developed for web applications, leaving the existing stack to solely take care of serving documents, or, what’s probably more practical, is that we need a more powerful, and less assuming stack of technologies. We don’t know what the web will be used for in 10 or 20 years time, but what we do know is that updating and renewing standards takes a very long time (at least relative to the pace of the web), so any new technology stack needs to be unassuming toward what the web is to be used for, and instead take a more generalised, toolbox type approach, which is easily extendible. In other words, we need a new technology stack for Communication (HTTP), Structure and Semantics (HTML), Style (CSS) and Behaviour (JavaScript).

There are so many inherit problems with the existing technologies, that it’s not even worth detailing any of the specific problems, but to mention just a few improvements that could be made.

  • Better separation of concerns and better semantics. HTML and CSS overlap way too much, and are way too tightly bound to each other. A lot of even mildly complex designs require the use of HTML mark-up which is completely unrelated to the documents structure or semantics, and purely there to be leveraged by CSS. The style layer should be able to generate purely visual elements, which can be created and manipulated without affecting the mark-up of the actual document (the data/content).
  • Common responsibilities should be moved from server-side, to client-side. Form re-population is a good example of something that SHOULD be done client side, albeit with the help of server-side code. The ability to compose a document.
  • Better support for web applications. The assumption that web pages or web locations are comprised of web “documents” severely limits the capabilities of web applications. Web applications should have a new URL extension that allows web applications to change state without ever reloading the page. Currently, hackery needs to be used to achieved fulfill even the most basic needs of AJAX-driven web applications.
  • Better communications. The fact that HTTP is stateless is great if serving documents, but becomes a limitation for web applications. The fact that only clients can send requests (one-way protocol) is another good example of the limitations of HTTP. No native support for sessions is also a problem; cookies are crap, let’s face.

I’ve written this post to hopefully gauge the opinions of other web evangelists, as I’m sure I’m not the only one with this opinion. It would also be good to hear from those who are adamant the current suite of technologies is sufficient for today’s and tomorrows demands.

2

For those interested, I just found this…

http://dev.chromium.org/spdy/spdy-whitepaper

SPDY (pronounced “Speedy”) is Google’s attempt to replace/improve the HTTP protocol. The key feature that stands at to me is the ability for the server to initiate communication to the client. If you’ve been following this thread, you’ll know that this is one of my biggest limitations of HTTP holding back web applications.

3

AAAaaahhh. I played with CSS and HTML for the first time today after a few months break, and immediately was reminded of how inappropriate the HTML and CSS technology combination is for design. I was creating a concept menu to show to my superiors as a replacement for SharePoint’s default navigation, and simply could not reproduce my idea in CSS/HTML because of numerous limitations, and this isn’t even including cross browser problems (I didn’t manage to get that far). So because of today’s CSS and HTML, I simply can’t realise the concept menu I had in mind, at least not in any practical sense.

Every time I touch HTML/CSS, it drives me nuts. I waste so much time trying to work-around the limitations of these two technologies (especially CSS). Using document mark-up to produce something dynamic and flexible (two requirements of today web applications) is just crap. As soon as you try and venture beyond simple document design, you’re smacked in the face. The depressing thing is, is that there’s not even a replacement technology on the horizon. HTML5 and CSS3 still suffer many of the fundamental limitations of their predecessors, and that’s by design.

I wonder why most other people don’t seem to share my frustrations with these technologies. Am I trying to be too radical with what I think are pretty rudimentary application designs?

4

I’m not sure what limitation you are describing here, do you have an example?

You have lost me completely now.

I’ll take a peek when it’s approved.

5

I find CSS very impressive myself. For such a simple language, it can do so much. It’s quite intuitive. I do feel however that it’s not fulfilling the demands of the more leading edge web developers trying to push the web forward.

Even multiple background images is flawed, as it shares the same problem as todays background property. The problem being that you can’t pad the background at all, or more specially, the background colour. If you have an image (even multiple) with transparency which you’d like to apply to the left or right edge of an element’s background, then you can’t set a background colour, as if you do, you’ll effectively lose the transparency of your image. I’m not proposing however that the background property gain attributes like padding, as doing such things will only complicate the specification for web developers and browser developers. A possible solution to such a problem would be the introduction of purely visual elements as I’ve discussed earlier in this thread. Being able to attach visual elements to an XML element would automatically give you support for multiple backgrounds, background padding, and a plethora of other advantages that come with having two elements to style, instead of just one.

Anyway, I’ve attached a zip file containing the concept menu. Simply extract and launch “main.html” in your browser. It’s been tested in IE8, Firefox 3.5 and Chrome 5. It doesn’t work in IE7 though, and right now I don’t have the patience or motivation to try and make it work.

6

Here’s an example…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demonstration</title>
<style>
body {
	background: grey;	
}

.multiple_backgrounds {
	display: inline-block;
	height: 32px;
	background: green url(arrow_outdent.png) no-repeat right;
	padding: 0 28px 0 14px;
}

.multiple_elements {
	position: relative;
	display: inline-block;
	height: 32px;
}
.multiple_elements > .content {
	display: inline-block;
	height: 100&#37;;
	background: green;
	margin-right: 14px;
	padding: 0 14px 0 14px;
}
.multiple_elements > .arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 100%;
	background: url(arrow_outdent.png) no-repeat center;
}
</style>
</head>
<body>
	<br />
	<div class="multiple_backgrounds">Test content here!</div>
    <br /><br />
    <div class="multiple_elements">
    	<div class="content">Test content here!</div>
    	<div class="arrow"></div>
    </div>
</body>
</html>

Note, I’ve attached the “arrow_outdent.png” image.

The first block on this page simulates the same effect as multiple backgrounds. I do this by specifying both a background colour and a background image. The image used has transparency, but as you can see, instead of the background being grey behind the image, it is the background colour of the element, which in this case is green.

The second example fixed this by using multiple elements. It gives me much more control over the compilation of this multi-background situation, without introducing any special or complicated CSS syntax. The obvious downside is of course that you’ve polluted what should be, purely semantic HTML.

The visual elements I refer to would fix the issue of semantics and the many other problems that come as a result of having to put styling hooks in the HTML. You could define a visual block element within the CSS, and attach it to the “.multiple_backgrounds” div. You could then position the visual element at “right: -14px;”. Unless you want to make CSS (or its replacement technology) very complicated, this is the obvious solution.

I’ve been working on a plausible replacement for CSS. The goal being to introduce a level or programmatic control, and a few powerful concepts such as masks, sequences (for animations or changes in style) and of course visual elements, while at the same time keeping everything as close to the simplicity of CSS as possible. So far it’s looking good. I’ll be sure to post it when I think it’s ready for public consumption.

7

Well, it sounds like your mind is made up already.
I simply disagree, like I said - it only takes a quick stroll around the interwebs to see precisely how adequate the technologies really are.

http://www.yellowshoe.com.au/examples/crumby/

I enjoy the boundaries of CSS and seeing how I can move them with a little thinking outside of the square.
When you’re finished with your menu I’d be keen to see how you’ve done it.

HTML and CSS aren’t perfect - but, no technology is.
They are good enough and are continually being improved.

I’m on the side of the fence entirely, I am super impressed with what can be accomplished with just pixels and text.

With enhancements to CSS like multiple background images we won’t need any more hooks in the markup for styling, a single element will be able to represent your ‘crumb’ in it’s entirety.
Even SVG could be used to create the shapes for you so you don’t have to deal with the layering of images.

The web is moving forward, get on board you separatist! :wink:

8

The whole difficulty with my design were the images. Half of the arrow image is actually transparent; the green colour comes from the background of the sub-menu. This was a requirement as this sub-menu colour will change depending on the colour scheme of the site (and in SharePoint you can have many sites). Achieving this required the use of over-lapping elements. At the same time, I had to keep in mind the fact that I wanted these green sub-menu’s to animate out, and animate in. This created a few additional problems when trying to ensure the left and right arrow images were themselves animated.

My point being is that your HTML/CSS example solves a much simpler problem. I’d also like to point out that the solution I came to required the use of non-semantic, purely visual tags. Something else which I despise of today’s HTML/CSS.

9

Well, I created the layout of what you were asking in 3mins.
It currently has usability issues, but that is not a problem with the technologies used.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>crumby menu</title>
	<style>
	* { margin: 0; padding:0 }
	ul {
		border-top: 1px solid #C0C0C0;
		border-bottom: 1px solid #C0C0C0;
		float: left;
		width: 100%;
		list-style: none;
	}
	li, a { float: left }
	a { padding: 10px }
	ul ul {
		background: #ECF5E6;
		float: left;
		position: absolute;
		top: -9999px;
		width: auto;
		border: none;
	}
	ul li:hover ul {
		position: static;
	}
	</style>
</head>
<body>
<ul>
	<li><a href="#">Barren</a></li>
	<li><a href="#">Preggers</a>
		<ul>
			<li><a href="#">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
		</ul>
	</li>
	<li><a href="#">Barren</a></li>
</ul>
</body>
</html>

Granted, the decoration isn’t straight-forward as you’ll probably need 3 background images but the technologies themselves have been used to create far more ‘out-there’ designs than these.

It just takes a simple stroll through the interwebs to show how adequate the technologies really are.

10

I don’t create artistic designs myself (although some times I wish I could). Web application design is more my area of expertise and interest. I did eventually get my concept menu working, but it took way too long (and several long breaks in between attempts), suffered from some inherit problems with CSS (inline-block spacing problem, see here), and I had to make some sacrifices to the design.

What made the design difficult, is that it required the overlapping of elements, which is something that doesn’t lend itself to a technology designed to style documents. There was nothing unreasonable about what I was trying to do; I wasn’t try to use HTML/CSS as a canvas for artwork, merely trying to implement a concept to enhance the usability of an application (in this case, SharePoint).

I won’t post a live example as the behaviour is unfinished, by here’s what it looks like…

Default Menu State - Displays children of the “Grand-Child” element.
http://i31.tinypic.com/fcmn0z.png

On “Child” Mouse Over - Displays children of the “Child” element.
http://i28.tinypic.com/2c0cbl.png

So as you can see, it’s a multi-hierarchical menu as well as a bread crumb. Just a bit of innovative menu design for a web application, made awfully difficult by the fact that the technologies used (HTML/CSS) are not exactly web-application-friendly. The only other way to achieve the same the functionality provided by this menu, would be to use up a lot more vertical real-estate (which would also undoubtedly be uglier) or resort to floating fly-out menus which would normally require more mouse clicker or trickier mouse navigation.

11

By the way, I forgot to mention that animation was always a requirement here. You can generalise and say “The web is not for animation”, but you’d be jumping to unreasonable conclusions. Animations, when used appropriately, act as visual cues which can greatly enhance the user experience, at least during the learning period. Like how Windows by default, animates the restoration and minimisation of windows; without this, a new user may not know where their window just went. In my example above, without animating the expanding and collapsing of sub-menu’s, it may not be immediately clear to the user what just happened. On top of that, good animation can enhance the user experience by giving the impression of a flowing interface. It can have all sorts of psychological benefits. Of course, animation can be abused, but what can’t be abused? You shouldn’t argue against a technology or idea which has clear practical benefits, on the basis that it MAY be abused.

My point here is that HTML/CSS can make it hard to design a good/intuitive user interface, and that’s my biggest annoyance with the current web technology stack.

12

Flash needs to be a much more open standard for it to not just survive, but be more heavily adopted and web-friendly. Propriety software and the web are just not meant to be.

13

Webkit is the web’s future.
I created a maze a little while ago, and recently gave it perspective in Safari. You can play it (in Safari) here http://www.livescript.co.uk/maze/dark/
How will that be used in a website?
http://www.livescript.co.uk/maze/3d/ - gallery of Air Display
http://www.livescript.co.uk/maze/3d/?maze=ieee1993 - clickable links (the first to sitepoint :))

Navigate with the images or with keyboard directions and z/x to strafe.

For those without Safari I uploaded a video to youTube.
http://www.youtube.com/watch?v=McgdzG5LEAA

Like I said before, I’m excited about the future of the web and see no limitations to the new developments already underway

14

I’m not trying to knock your concept design - I haven’t seen it, and so I have no idea what you’re trying to do with it. But most of the time when people try to create things that can’t easily be done within the existing HTML, CSS and scripting technologies, it’s because they’re trying way too hard.

Yes, the existing technology does have some limitations … but I am struggling to think of any times when those limitations really hindered what I wanted to do. Sure, sometimes you have to go about things in a slightly different way, but is that such a bad thing?

I guess what I’m trying to say is … will your site’s users suffer because you can’t implement your concept design? Does it really offer that much more in the way of functionality or usability … or is it just a showcase for your design talent? All too often I see sites that look fabulous (in the right browser and configuration conditions), but that look is at the expense of usability, accessibility and increased download and latency. And from everything we know about surfers, they hate sites that are showing off an artistic design or technical skills when that gets in the way of allowing them to read and interact with the site to achieve their goals.

15

I wonder why most other people don’t seem to share my frustrations with these technologies. Am I trying to be too radical with what I think are pretty rudimentary application designs?

Because they cover everything up with Javascript. Or Flash.

See the Lee.com website for examples of someone using garbage to create garbage. The developers of such sites seem happy, because they think the web == animation junk. Which you can’t do with HTML/CSS… yes, they are inappropriate for such things.

16

You haven’t actually stated what you believe the limitations are.

The reason why not many jump up and down about it is because most people who are front-end developers code with HTML and CSS daily. Sure, there’s a learning curve - once you’re past it though you can be very efficient.

17

No they didn’t.

18

Flash needs to become much more user friendly and less hard programming to survive in the long run i think.

19

In the meantime, people who want this now are happy to use the hacks:

example, Web::Hippie.

20

Other people take the time to learn and understand the actual web as it is, not as they wish it would be. They follow the Tao of the web and go with the flow, the flow of the browser that is. Thus the Web rewards them with good results. You strain and fight against the nature of the Web, and thus it crushes you.