This title might be due to unknowingly plagiarizing dejavu.org – The web as we remember it.
I haven’t visited dejavu.org in years, but I did now as I felt I need to wax nostalgic. This might be due to my recent tinkering with my websites‘ layouts.
As a child I crafted 200-faced paper polyhedra whose plans I developed from images of crystals in mineralogy books. I am maybe in the same state of mind today when I am moving around pixels, editing style sheets or debugging my home-grown content management system for these sites. This is raking my virtual Zen garden.
It is an anachronistic approach to what should today be interactive, responsive and created from templates. However, it really reflects some doubts of mine about what the web has become.
The web has been a quiet place. My sites have always been my secret fortresses on the web, only known to the most persistent stalkers. A new colleague in a project greeted me once appreciatively with You are The Subversive Element, aren’t you? As an aside: I have found that so-called personal websites – that ought not to interfere with business according to common wisdom – are perfect filters to single out people who are fun to work with.
I think there is no better exercise in becoming unimpressed by feedback, likes and comments than authoring a non-interactive website for years. The fact that somebody could read it provides just enough sense of accountability for the content. I wonder what it must feel like to grow up today, immersed in a web culture that fosters craving attention.
But what is more important:
We have given up on the noble notion of a page.
Today’s sites are frontends to applications that create a dynamic dashboard of widgets, thus dynamically re-arranged snippets and tidbits of information – very often ads on many popular sites but this is not my point.
I noticed this when mulling about responsive design, that is: making websites compatible with the limited display options of different devices. The main content – usually presented in some main reading pane should probably be created in a way suiting this presentation: Chopped to digestible tidbits instead of walls of text.
But guess what would be the perfect responsive design: The most ancient, 1995-style html page, consisting of header and body, and some paragraphs contained in that body. As long as you don’t start to create containers or columns in order to organize the content and/or make it appear more appealing, you will see the text flowing nicely from left to right on mobile devices, too.
I am just a dilettante web developer so please go ahead and prove me wrong. You can use this perfectly straight-forward (and interesting) website for testing.
Quite ironic in a sense that we tried so hard to layout our pages: First using these now abhorred frames, then tables (I killed my most obnoxious ones recently), and div containers controlled by CSS. Now we have a difficult time in letting all that nested automated stuff flow again from left to right.
I have found another, equally ingenious way to make a site responsive without actually doing so technically. I randomly picked Brain Pickings as it is very successful website. The site is the whole business – so it has to be user-friendly. Again I would ask the professionals to debunk my theory. Checking the code and using tools such as ScreenFly the site is not responsive in terms of adapting the presentation to the device. But the content pane is just 500px wide and thus fits into the width of many smart phones when those are rotated by 90 degrees.
What I like best: If you scroll down – everything moves! On many really responsive sites elements jump or stay in place when I did not expect it. And some of them simply do not work on desktop PCs as if they were designed having only the target group of 15% readers in mind.
It is exactly that anything-moves-when-scrolling that gives pages – including mine maybe – a dated look now. Do we expect to have different elements on (what was formerly known as) a page a life of its own?
I am reminded about what Nicholas Carr said about the emergence of eBook readers in The Shallows: He is not so much concerned about feeling and smelling physical items – an argument I could never understand anyway. But as soon long-form texts formerly known as books become available on eReaders, their content might get splintered into sharable little pieces. Readers might rather look for share-worthy snippets instead of reading the whole content.
Giving up on the ancient concept of a web page and replacing it by a sequence of twitter-like pieces presented in an intriguing way is probably the next stage in content evolution.
We have come a long way – since Tim Berners-Lee had run a workstation as the first WWW server on his desktop, with a sticker on it that says: This machine is a server – DO NOT POWER IT DOWN.
elkemental Force 
Hi Elke,
About reflowing,
You don’t mention it, but surely you are aware that the WordPress theme you are using reflows very well. (Have you in fact edited the CSS yourself to make it reflow that well?)
I tried the following thing with Firefox, Google Chrome, and Internet explorer:
I grabbed the edge of the browser window and I narrowed the Window: the text reflows; no horizontal scroll bar. (It’s not until the window is ridiculously narrow that a horizontal scroll bar appears.)
Next I made the browser window wider and wider. Then the view stops widening at a certain point, so that the lines don’t become too long to read.
Then I checked what happens when you zoom in and out.
Zooming in the text reflows (It’s not until the font size is ridiculously large that a horizontal scroll bar appears.)
Zooming out: at some point the text column shrinks, so that the lines do not become too long.
I assume that WordPress has implemented that behavior using the CSS property ‘max-width’. Anyway: that is how I obtain that behavior for my own website: http://www.cleonis.nl
On my own website the column width is declared 65 em wide. That is: the rendering engine is instructed to compute the width of the content column from the current font size. (’em’ is roughly the width of the letter ‘m’ of the current font size).
As the name says: ‘max-width’ instructs a maximum, so it only kicks in when the available space is larger than the computed value for the width.
So my point is: the CSS command ‘max-width’ solves the problem: you get the same level of reflow as with a layout-free page, but you do reap the benefit of setting up a layout.
Hi Cleonis, thanks for your comment!
Yes, I know that this template does it very well – I picked it because it also looks good on mobile devices. What I don’t like are those overly fancy responsive designs that make the layout completely different when resizing the window and that cause images and containers to “jump” when scrolling (on a desktop, I suppose it works better on mobile devices) so that on some of these pages you can never “catch” the item you wanted to reach via scrolling.
I admit that, when viewing on desktops, I like it a bit better if the width is rather small (~550px for the content), but static. As Google does it, for example. I had used ‘max-width’ some older versions of my sites but replaced it with ‘width’ again. I might have to redo this when finally switching to a responsive design for all websites – and I will use this WP design as a showcase. I only edited fonts, colors, line-spacing and the like in the stylesheet here – the rest are the WP theme defaults.
As far as I understood the stylesheet of the current design which is quite complex, the max-width property is only used for the single page layout (when you click on an article). For the main page (sidebar included) a CSS3 media query is used that asks if the current width is smaller then 800px in order to handle the vanishing of the left sidebar when the width gets too small: “@media (max-width:800px)”.
@viewport is queried, too, in order to handle devices.
I was most interested in how to get rid of the left sidebar in the main view although I am still not sure if I will ever implement that or rather rely on people having large smart phones they will rotate by 90°C. But even then you need to make sure that the device displays 1 CSS pixel per device pixel, e.g. by using viewport, and prevent the device from squeezing the sidebar plus the content into its full ~500px width which would require the user to zoom in.
The sidebar area is “removed” by actually repositioning the content div and the sidebar div via that media query triggered at 800px. My understanding is that the sidebar is still there “below” the content area in the code but since it has full width it is never really displayed because of the infinite scroll of the content are “above it” and it it is configured for float:none.
I just did a bit of reverse engineering by watching the tags with developer tools (F12) switched on for IE and FF, so I am not sure if that explanation is 100% correct. But you clearly see that the left margin width suddenly changes and the styles defined by the media query for max. content width = 800px kick in and replace the default styles when reducing the width.
I think the real challenge is to make this work for really all browsers and all devices – IE7, 8, and 9 seem to require some special treatment and older browsers don’t yet understand CSS3.
Ever since creating my first HTML page (which equaled a website in those early 1990 days at CERN), I have made it my mission to understand how to design such pages. I admit that I often get lost. I’m just about beginning to understand mobile logic and will probably have to skip Glass and iWatches app design and go straight to 3D interfacing.
However… Recently I’ve been helping my son to enroll at an art school where among others they teach graphic design. Two schools, to be precise. To be more precise, their websites SUCK. You can’t find anything and when you do, the information process breaks down and your are stuck in a dead end. And these people are teaching the kids that will code our future. I have clicked around a bit (we used to call that surfing!) and discovered that all websites of schools that teach this are bad. If only they would remember we have mostly linear brains :(
Ergo, QED, or what ever the equivalent is for This Demonstrates Your Point is.
Thanks a lot – I am happy I am not alone. Yesterday I have checked out the site of a small shop I like – they have obviously went responsive, too. Result: When I scroll down (on a desktop PC) to see the pricing information below an image the image plus that information suddenly jumps so that I never see the price. It jumps exaclty when the “caption” appears / would appear, If you read very fast you might recognize it. The solution is to use CTRL-Minus to scale down the whole page – same with latest FF and IE.
We all need to rake our virtual zen garden every so often. You have clearly mastered the skills necessary, Grasshopper whilst I am still learning :)
Thanks, Judy – but I think you Zen garden is always raked impeccably, too :-) It should not be required to know what’s going on under the hood… But actually my curiosity has always been triggered by things that did not work. I learned the most from reverse engineering.
One thing I am mystified about is the deplorable state of the web regarding its ability to share normal math notation. Suppose, for example I wanted to type a equation right here in this comment box–just imaging the misery that would be involved. In the end I would probably upload it somewhere and just put in a link, like this: http://i.imgur.com/SlHYSm2.jpg
What a pain! Things like LaTEX help a bit but they are not universal.
Around 16 years ago I learned about MathML, which added an XML extension to current HTML. At the time it was only partially supported. Mozilla based browsers could sort of handle it directly if the whole page was properly XML encoded but Internet explorer required a player lug in. You needed to upload two different page versions to ensure cross-browser compatibility.
I just figured, no problem. It will be sort out in a short while.
Guess what? It’s still in pretty much the same shape. At the moment there is no easy way to do math online without fancy plugins and such. That’s just plain awful!
Maybe whenever they finally get some good HTML5 tools on the go things will improve–that is if the inherent EVIL that can be done through HTML5 doesn’t wreck everything!
Oh, and to continue on with Dave’s line of thinking. I do wish that wordpress would improve at least on its ability to work with math. With it’s nice closed ecosystem you’d think it could work out something useful.
I have always wondered why there is no standard to use LaTex in HTML. Or is there any?
LaTex predates HTML and XML and scientists are used to type in LaTex anyway – so wouldn’t it had made more sense if W3C standards designers had developed a way to embed LaTex in websites (in a standardized way) instead of making MathML a standard?
I remember the little bubble for a MathML in the late 90s, but I don’t think it ever got past people agreeing that there ought to be some kind of standard for mathematical notation for web page formatting.
I do see how LaTeX’s general syntax is weird enough, relative to the way HTML writes stuff, that they don’t blend together, but it would’ve been so convenient for the mathematicians if they had made a <latex> tag and make Netscape do the hard work.
Admittedly I had something like a latex tag in mind – and browser vendors figuring out the details like escaping all those special characters.
Breaking everything up into little pieces is the way we like it now apparently, so the same phenomena of nobody listening to entire albums any more, just individual tracks, as you say will probably extend to ebooks and web pages. I guess what we’re worried about is losing the richness of the whole experience and all of the attributes that has. It’s probably like the difference between test match cricket and one day cricket, although I suspect I may be losing you at that point ;)
Yes, I need to google this :-)
The only mental connection to cricket I can make is a weird one – Douglas Adams referred to it in the second or third volume of his Hitchhiker’s Guide to the Galaxy… weird, evil robots, from the planet of “Krikkit” and killing humans… and resembling cricket players.
I’m not sure some of what you have to say is able to penetrate my uninitiated intellect but one thing does resonate … and that concerns the recent convergent evolution of many sites that I have come to use. In particular I’m thinking about WordPress itself and the Smugmug site you’ve heard me talk about. It’s interesting to see that both of these sites have, as you say, become frontends and reduced web content to widgets and columns and little bits and pieces. To someone who isn’t able to code in HTML and who doesn’t feel comfortable with CSS this trend is reassuring. On the other hand, however, I am always aware of significant limitations. It’s a classic cost/benefit analysis. If developers want to make the web more accessible such that lots of folks can contribute and participate … the tools are going to have to be accessible by folks who aren’t web developers … and this is going to necessitate some stuff that folks like you aren’t going to be happy with. Without the highly convergent but highly useable interfaces … people like me would be out in the cold … and unable to participate! What do you think? D
I am all for intuitive web management tools for non-programmers – I am mainly concerned about the consistency of (what appears as) a coherent “page”. Brain Pickings, for example, runs on WordPress and thus could be administered using such tools. Even my home-grown system uses logic to create “pages” from database content so that content and layout instructions remain separated. I am not editing individual pages but coding scripts that create “pages” from dynamic content.
Actually I had non-programmer users in mind – my point rather was: Those really responsive, obviously optimized for mobile devices only websites can appear very confusing on desktop computers (or any device with a large screen). If you resize a browser window for a responsive site on a device with a large screen it suddenly changes it appearance: The top menu becomes a drop-down list, the left sidebar vanishes. I have been told by “normal web users” that this can be quite confusing.
But even worse many pages take the mobile concepts too far in my opinion: There is nothing that resembles a “scrollable coherent page” anymore, not even on large screens: If you open such a page, elements seem to jump and move, and/or on scrolling some things remain in place and others move. This is intended to enhance usability I suppose (such as: Keeping an important navigation pane in reach) but I think otherwise. In addition I found pages that simply don’t work on desktops, at least with some (major) browsers. That’s why I found it so enlightening that “conservative” pages do so much better here – and actually without reducing readability on mobile devices. But again – it does not at all mean that these “conservative” pages need to be created by custom coding or custom HTML/CSS editing.
OK … now I’m on (excuse the pun) the same ‘page.’ I have observed the phenomenon you are talking about. Especially when trying to view pages (without using a special app) on my wife’s iPhone … horrible! I’ve never tried the other way and didn’t even know you could view a phone application on a widescreen. I can surely imagine that crazy things happen when you try to do that. I agree then with your call for standardization and reason. D
I should have used that pun about ‘being on the same page’ in the post!! :-D
… and you can see the “morphing” of responsive design when making the home page of my blog smaller and smaller – in this case it’s well done… “Suddenly” the left side bar vanishes. The worst examples for non-desktop-friendly design I have found are websites of major “cool” brands.
This is raking my virtual Zen garden.– So nice.
Thanks a lot, postmoderndonkey!