Where to begin? There are W3C standards, there are User Agent vendor woes and there are the conflicting interests of various content creators. These three things contribute greatly to a subject which, just lately, has become irksome to me.
Web Design and Mobile Devices.
The Problem
I believe that it's an important area, one that should have the attention of every web designer whose work is not limited to office intranets and other dens of iniquity. It is a widely accepted fact that content is increasingly consumed through mobile devices, some have even questioned the long-term prospects of desktop computers for casual users. This makes it all the more frustrating that designing for the Mobile space is such a patchwork.
I always work to published standards (or reasonably stable drafts), as I believe all designers and developers should. I miss the xhtml2 project, but I do like HTML5. CSS3 is a dream come true, or at least it should be.
Since CSS2.1 the standard has included 'media queries' that should allow a designer to specify certain sets of rules depending on the display media in use. Considering what a boon this could be, I wonder why it does not find better support in the mobile space!
In point of fact, I have come across an excuse or two. The one that seems to really explain the behaviour that I have seen is the problem of poor implementation by designers: It seems that up until now many of the few designers who bothered with handheld styling at all were so lackadaisical that the results convinced mobile browser developers that the handheld rules were best ignored. I dread to think how badly they must have been written.
Many mobile browsers, notably Opera Mobile, now render non-handheld styles by default. So ingrained is this behaviour that the browser engine actively chooses '@media screen' as distinct from '@media handheld'. I have read that the reason for this is to provide users with a better browsing experience based on the more supported screen styling.
It probably works for some websites, even on a mobile phone. On a tablet it's likely no problem at all. But, for a layout that tries to be artistic, that spreads itself against the available screen width (note: It's important to make sure that a layout will resize to suit the widest possible range of displays.) it can be simply silly! Especially with a page designed for a landscape aspect ratio and accessed in portrait.
So it becomes necessary to replace certain rules. A browser that's ignoring handheld styles robs us of the obvious, most standards-compliant route. There is a pretty good solution though, so long as we have support for other media queries allowing the use of different rules depending on screen width and other features.
We can then use those media queries to activate certain features for large screens and others for small screens, but we shouldn't have to. It is especially troublesome because various mobile service providers supply their own browsers on smartphones, leaving open the possibility that theirs might not support either handheld styles or media queries.
What's more, the disuse of handheld stylesheets encourages developers and designers not to use them, increasing the momentum of this particular downward spiral. The mobile web space moves further from the ascribed standards; standards that many have worked so hard to improve and spread.
Some situations call for targeted styles vastly different from each other. Treated badly this could lead to unwieldy use of dimensional media queries, but there are solutions.
The Solution
A relatively easy solution is to import different stylesheets, in whole, depending on the media queries. It's standards compliant and avoids bloating the served files, but unfortunately there are UAs out there that do not select media queries and may ignore any import directive served with one. A default file can be served, but it rather negates the benefit of the technique.
We can handle the issue on the server side, attempting to determine the user agent based on the HTTP header. It's a nice approach in theory, where PHP or similar technologies serves only appropriate content. Unfortunately it isn't reliable, as the user agent string can be readily altered.
The best thing to do, then, is combine techniques. Write forgiving style sheets, use media queries for both device and dimension based differentiation and employ user agent detection on the server. It's a patchwork solution to a patchwork problem.
A lot of people won't bother, but I (and hopefully others) think that it's important to properly employ web standards. These methods allow us to target mobile devices; if the practice spreads it will be noticed by UA vendors and they will move back to standards based handheld style implementation. After all, if handhelds are the future of the internet, then the internet needs to be designed for them.
The Future
Why is it so important to support standards like this? Because we're going to need a solid foundation to build the internet of the future upon.
e-Readers are feasible, increasingly popular devices now. Some of these have, as will more in the future, network connectivity. Knowing this, people will want to use their e-Readers to access the internet. But how should that be handled? Should they follow the current trend and default to screen rendering, or should they use handheld or print styles?
Handheld
Pros
They are handheld devices.
They share the portrait aspect ratio with mobile phones.
Cons
e-Readers (esp. with e-Ink) don't handle multimedia well.
Screen
Pros
e-Readers tend to have pretty good resolution.
Cons
Again, printed v. rich media issue.
e-Readers have relatively small screens.
e-Readers are usually in portrait aspect.
Printed
Pros
e-Readers are designed to simulate printed media.
Print styles are designed for clear reading, like a book or newspaper.
Print styles aren't likely to include multimedia content.
Cons
Traditional print media wouldn't support hyperlinks, whereas e-Readers could.
I'm sure there are other pros and cons for all three of those media types, but I think my point is served; it's going to be a contentious and confusing issue when it gets attention. Some will see it as a new way to serve literature or news, others as another e-commerce vector, countless other opinions will abound. What matters is what becomes most commonplace, which may be a new media type and a matching set of style trends.
In order that that most commonplace approach may be smoothly identified and implemented it must be supported in standards. Only a standards based web, in both the desktop and mobile space, can give us the groundwork for that.
Showing posts with label w3c. Show all posts
Showing posts with label w3c. Show all posts
Saturday, 26 February 2011
Wednesday, 18 August 2010
3D HTML?
It's 2010 CE and 3D is the big gimmick of the year: IMAX and realD in cinemas, nVidia's 3D Vision kit, fascinating prototypes for true-3D displays and even 3D posters! It may be a passing fad, or it may be a rumble foreshadowing the avalanche to come ( albeit years from now ).
I have dreamt since childhood of the kind of immersive 3D technology that I saw in Star Trek's holodeck. Of course I don't believe any such thing is around the corner, but I can not deny the power of today's three-dimensional technology: I sat in the IMAX theatre at London's science museum and placed my hand in a spacesuit glove, felt fleetingly as though I were really there. Since then I have believed that 3D displays must become the norm, perhaps in my lifetime.
It's 2010 CE and HTML5 — although not yet finalised — is on the minds of web developers around the globe. I count myself among their number, the actual state of my career notwithstanding, and have been studying the current documentation with gusto.
Inevitably the changeability of the web is prominent in my thoughts at this time. There are conflicts between supporters of Flash and of the HTML5 proposals; meanwhile GPU hardware acceleration is coming to web browsers!
The innovations in these areas — 3D displays and improved web technologies — seem to have little or no crossover. But I feel ( and a brief Google reveals that I'm not entirely alone in this ) that there is room for synergy here.
Since its creation HTML has been designed for and rendered on two-dimensional displays, the only practical technology of the time, but part of this looks set to change. As 3D displays become available and, eventually, commonplace these 2D rendered documents will be thrown onto a virtual surface by display managers of the era. That's fine as far as it goes, but if no alternative is made available then I believe there will be much frustration not only for developers but users ( or consumers ) as well.
I'm going to discuss briefly where web design has been and where it might be going. Then I'll cover a little of the possible technical detail of what I'd like to see.
In the beginning HTML was a simple beast, a mechanism to tag ( or "mark up" ) parts of text on the internet ( "hypertext" ). This HyperText Markup Language included elements such as headings, paragraphs, tables and, most significantly, hyper-links. This was a pivotal moment in the history of IT, the creation of a clear way for users to navigate the internet through what would come to be known as the World Wide Web.
Time passed, use and expectations from users grew, so HTML and related standards changed and grew. We're now well accustomed to richly formatted web pages using complex styling ( through Cascading Style Sheets ), which improved designers' control over font sizes and element positions. Many people now regularly view video online, which would scarcely have been conceivable when HTML began.
HTML5 promises closer integration of multimedia content, greater flexibility of display and even integration with low-level keyboard input. These are all nice embellishments to an established technology, but are the standards developers missing a trick?
All of these impressive developments have been, as I mentioned earlier, two-dimensional. We have greater control than ever over the layout of our documents, but almost all of that control is exercised on the X and Y axes. There is also the z-index property accessible through CSS, but this is no more than a layering facility to ensure that various objects don't obscure each other.
As well as relative position we can, of course, specify the height and width of various display elements. But what we can not, yet, define is a depth. Of course this is only natural, as objects in HTML have never had a depth any more than images printed on a piece of paper.
Now imagine that you have a simple layout in HTML4 and CSS2, with two content boxes. The first box, 300px square, is positioned at 0px,0px. The second box, 150px square, is positioned at 250px,250px. One box overlaps the other; if we give the first box a z-index of 1 and the second a z-index of 2, then the smaller box is displayed in front of the larger.
Imagine that this basic layout is displayed on one of the upcoming 3D monitors, in a 3D window manager not unlike KWin4 or Compiz. We may see a browser window standing proud of the desktop, with a completely flat page displayed therein. Now let's take a step forward in this imaginary interface.
Keeping things simple, the first z-index will still be 1 and the second z-index will now be 20. Assume that the web browser is no longer a simple 2D display, but has its own 3D display capabilities. Now we have two completely 2D boxes, but one hangs slightly in front of the other; as the user looks from one box to the other, his eyes focus slightly differently and he gains a sense of depth. In this implementation we have the cardboard-cut out style of 3D familiar to anyone who has used the red-and-green spectacles of old.
What I've outlined so far is perfectly achievable with current standards, but it's not very interesting. But by now I think you can see where I'm going with this.
Imagine that our display elements have instead the proportional properties of width, height and depth. Now z-index has a whole new meaning, because our display elements can have an actual presence on the Z axis. 3D solids, positioned in 3D space. Let's go back to our CSS example, with some new properties:
Here a minimal change to existing standards, with the addition of two properties and the alteration of another, allows two solid boxes to hover before the user's eyes on their fancy 3D display, intersecting each other in an interesting way. This simple implementation has the additional benefit of being more or less backwards compatible, as it would still work on a 2D display. If z-index were assumed to be in the same unit as the last specified coordinate it would make backwards compatibility even smoother ( z-index: 250; instead of z-index: 250px; because the unit would be implicit ).
Nice, yes? But ultimately unsatisfying, perhaps. I see two solutions: add more minor improvements, or create a whole new approach. First, a possible minor addition to what we have here.
Here I'm suggesting that the new box models include extra parameters, so that content from elsewhere ( here, a pair of paragraphs ) can be placed by compliant browsers onto the appropriate faces of the 3D objects. They have no independent existence in a 3D context, but could still be separately displayed in a 2D context. What's more, user agents not supporting 3D can safely drop the new declarations.
I feel that this provides a good intermediate state between what we have today and what we might achieve in a future where 3D displays and user interfaces are commonplace and well understood. I'm tempted to discuss ideas I've had for a more comprehensive 3D adaptation of HTML, but perhaps that should wait for another post.
Coming back to the present then, I know that what I've outlined here is not likely to see implementation. Perhaps ( almost certainly ) we shall see something conceptually similar in years to come, but unless we start discussing the options now we'll have a lot to figure out when the time comes.
HTML5 isn't expected to be finalised for a few years yet and it's still fairly malleable. I don't expect to see wholesale change at this point, or particularly sweeping additions, but the process of adding, removing and reworking various elements is still ongoing. This is true not just of HTML5's elements and properties, but also of CSS3. The truth is that coming standards are much in flux at this time.
Even if the new standard doesn't end up including much in the way of 3D capabilities, I hope that we will at least gain a 3D context for the canvas element. It would be a useful start and show that the web is as forward looking today as it was at its inception.
I have dreamt since childhood of the kind of immersive 3D technology that I saw in Star Trek's holodeck. Of course I don't believe any such thing is around the corner, but I can not deny the power of today's three-dimensional technology: I sat in the IMAX theatre at London's science museum and placed my hand in a spacesuit glove, felt fleetingly as though I were really there. Since then I have believed that 3D displays must become the norm, perhaps in my lifetime.
It's 2010 CE and HTML5 — although not yet finalised — is on the minds of web developers around the globe. I count myself among their number, the actual state of my career notwithstanding, and have been studying the current documentation with gusto.
Inevitably the changeability of the web is prominent in my thoughts at this time. There are conflicts between supporters of Flash and of the HTML5 proposals; meanwhile GPU hardware acceleration is coming to web browsers!
The innovations in these areas — 3D displays and improved web technologies — seem to have little or no crossover. But I feel ( and a brief Google reveals that I'm not entirely alone in this ) that there is room for synergy here.
Since its creation HTML has been designed for and rendered on two-dimensional displays, the only practical technology of the time, but part of this looks set to change. As 3D displays become available and, eventually, commonplace these 2D rendered documents will be thrown onto a virtual surface by display managers of the era. That's fine as far as it goes, but if no alternative is made available then I believe there will be much frustration not only for developers but users ( or consumers ) as well.
I'm going to discuss briefly where web design has been and where it might be going. Then I'll cover a little of the possible technical detail of what I'd like to see.
In the beginning HTML was a simple beast, a mechanism to tag ( or "mark up" ) parts of text on the internet ( "hypertext" ). This HyperText Markup Language included elements such as headings, paragraphs, tables and, most significantly, hyper-links. This was a pivotal moment in the history of IT, the creation of a clear way for users to navigate the internet through what would come to be known as the World Wide Web.
Time passed, use and expectations from users grew, so HTML and related standards changed and grew. We're now well accustomed to richly formatted web pages using complex styling ( through Cascading Style Sheets ), which improved designers' control over font sizes and element positions. Many people now regularly view video online, which would scarcely have been conceivable when HTML began.
HTML5 promises closer integration of multimedia content, greater flexibility of display and even integration with low-level keyboard input. These are all nice embellishments to an established technology, but are the standards developers missing a trick?
All of these impressive developments have been, as I mentioned earlier, two-dimensional. We have greater control than ever over the layout of our documents, but almost all of that control is exercised on the X and Y axes. There is also the z-index property accessible through CSS, but this is no more than a layering facility to ensure that various objects don't obscure each other.
As well as relative position we can, of course, specify the height and width of various display elements. But what we can not, yet, define is a depth. Of course this is only natural, as objects in HTML have never had a depth any more than images printed on a piece of paper.
Now imagine that you have a simple layout in HTML4 and CSS2, with two content boxes. The first box, 300px square, is positioned at 0px,0px. The second box, 150px square, is positioned at 250px,250px. One box overlaps the other; if we give the first box a z-index of 1 and the second a z-index of 2, then the smaller box is displayed in front of the larger.
div #box1 {
width: 300px;
height: 300px;
z-index: 1;
}
div #box2 {
position: absolute;
width: 150px;
height: 150px;
left: 250px;
top: 250px;
z-index: 2;
}
width: 300px;
height: 300px;
z-index: 1;
}
div #box2 {
position: absolute;
width: 150px;
height: 150px;
left: 250px;
top: 250px;
z-index: 2;
}
...
<div id="box1">Some content here.</div>
<div id="box2">Some more content.</div>
...
<div id="box1">Some content here.</div>
<div id="box2">Some more content.</div>
...
Imagine that this basic layout is displayed on one of the upcoming 3D monitors, in a 3D window manager not unlike KWin4 or Compiz. We may see a browser window standing proud of the desktop, with a completely flat page displayed therein. Now let's take a step forward in this imaginary interface.
Keeping things simple, the first z-index will still be 1 and the second z-index will now be 20. Assume that the web browser is no longer a simple 2D display, but has its own 3D display capabilities. Now we have two completely 2D boxes, but one hangs slightly in front of the other; as the user looks from one box to the other, his eyes focus slightly differently and he gains a sense of depth. In this implementation we have the cardboard-cut out style of 3D familiar to anyone who has used the red-and-green spectacles of old.
What I've outlined so far is perfectly achievable with current standards, but it's not very interesting. But by now I think you can see where I'm going with this.
Imagine that our display elements have instead the proportional properties of width, height and depth. Now z-index has a whole new meaning, because our display elements can have an actual presence on the Z axis. 3D solids, positioned in 3D space. Let's go back to our CSS example, with some new properties:
div #box1 {
width: 300px;
height: 300px;
depth: 300px;
z-index: 1;
}
div #box2 {
position: absolute;
width: 150px;
height: 150px;
depth: 150px;
left: 250px;
top: 250px;
z-index: 250px;
}
width: 300px;
height: 300px;
depth: 300px;
z-index: 1;
}
div #box2 {
position: absolute;
width: 150px;
height: 150px;
depth: 150px;
left: 250px;
top: 250px;
z-index: 250px;
}
Here a minimal change to existing standards, with the addition of two properties and the alteration of another, allows two solid boxes to hover before the user's eyes on their fancy 3D display, intersecting each other in an interesting way. This simple implementation has the additional benefit of being more or less backwards compatible, as it would still work on a 2D display. If z-index were assumed to be in the same unit as the last specified coordinate it would make backwards compatibility even smoother ( z-index: 250; instead of z-index: 250px; because the unit would be implicit ).
Nice, yes? But ultimately unsatisfying, perhaps. I see two solutions: add more minor improvements, or create a whole new approach. First, a possible minor addition to what we have here.
...
<div id="box1">Some content here.
<p id="para1">This goes on the upper face of the first box.</p>
</div>
<div id="box2">Some more content.
<p id="para2">This goes on the right face of the second, smaller box.</p>
</div>
...
<div id="box1">Some content here.
<p id="para1">This goes on the upper face of the first box.</p>
</div>
<div id="box2">Some more content.
<p id="para2">This goes on the right face of the second, smaller box.</p>
</div>
...
div #box1 {
width: 300px;
height: 300px;
depth: 300px;
z-index: 1;
top-face: #para1;
}
div #box2 {
position: absolute;
width: 150px;
height: 150px;
depth: 150px;
left: 250px;
top: 250px;
z-index: 250px;
right-face: #para2;
}
width: 300px;
height: 300px;
depth: 300px;
z-index: 1;
top-face: #para1;
}
div #box2 {
position: absolute;
width: 150px;
height: 150px;
depth: 150px;
left: 250px;
top: 250px;
z-index: 250px;
right-face: #para2;
}
Here I'm suggesting that the new box models include extra parameters, so that content from elsewhere ( here, a pair of paragraphs ) can be placed by compliant browsers onto the appropriate faces of the 3D objects. They have no independent existence in a 3D context, but could still be separately displayed in a 2D context. What's more, user agents not supporting 3D can safely drop the new declarations.
I feel that this provides a good intermediate state between what we have today and what we might achieve in a future where 3D displays and user interfaces are commonplace and well understood. I'm tempted to discuss ideas I've had for a more comprehensive 3D adaptation of HTML, but perhaps that should wait for another post.
Coming back to the present then, I know that what I've outlined here is not likely to see implementation. Perhaps ( almost certainly ) we shall see something conceptually similar in years to come, but unless we start discussing the options now we'll have a lot to figure out when the time comes.
HTML5 isn't expected to be finalised for a few years yet and it's still fairly malleable. I don't expect to see wholesale change at this point, or particularly sweeping additions, but the process of adding, removing and reworking various elements is still ongoing. This is true not just of HTML5's elements and properties, but also of CSS3. The truth is that coming standards are much in flux at this time.
Even if the new standard doesn't end up including much in the way of 3D capabilities, I hope that we will at least gain a 3D context for the canvas element. It would be a useful start and show that the web is as forward looking today as it was at its inception.
Subscribe to:
Posts (Atom)