The idea of separating content from presentation is fundamentally flawed.
I have found CSS to be a very useful tool. We all understand that CSS is founded on the idea of separating content from presentation. Content is the words, text and images that are published while presentation is the design, look, and feel of the website or whatever medium the content is published on. It now occurs to me that although it seems like a good idea to separate content from presentation, real life does not work that way.
Thinking back over my own websites, once a site has been designed, I begin feeding content into it that suits the design. Changing the design after several years is not a straightforward process, because the effect of existing content will be inevitably affected.
Mobile, Desktop and Web in One Go
Thinking about the differences between the three main forms of web content presentation, this becomes clearer. Think about any website. Think about how that website appears on a 1080px x 1920px widescreen monitor. Now, how does that website appear on a tablet? How does that website appear on an Android or iOS mobile phone? At a minimum, most ‘optimized for mobile’ website rearrange the content presentation. Instead of being a landscape orientation with multiple columns, ‘optimized for mobile’ websites present all content in one continuous column, the singular column taking up the entire portrait width of the screen. Multiple columns on a portrait oriented mobile phone are difficult to read.
This is extremely important when we consider that, in order to be successful, content creators think about how their content will appear to the end user. A 140 character twitter post on a mobile phone is quite impactful. One hundred and forty characters on a widescreen monitor will get lost in the white space, will get lost among the other content, will get overlooked for the high-impact images and multimedia.
A Perennial Problem
It doesn’t make life easier to say, ‘we will write one set of news articles for mobile devices, and another set of articles for desktop users.’ Nor will it always work to split the difference for tablet users. I can think of several major examples where this issue presents significant problems. I have recently started using MailChimp. Because MailChimp is trying to address these three platforms in one go, some of the content, in particular the ‘Next’ button, gets lost for the desktop user, where it may be sufficiently prominent for the tablet user. The other example I will offer is Google+ (I don’t keep a facebook account). It is obvious when photographs are posted with a mobile user in mind: they are portrait oriented. The content producer has considered the device of the end user, and has made the call as to how to best present their information. You can’t please all the people all of the time.
A Way Forward
So what to do? First of all, I would like the web professionals to tell me if I am wrong about this. Have I just given bad examples? Or am I right? Is there a fundamental divide on the web between mobile and desktop that has yet to be satisfactorily addressed by CSS and other tools? Can websites be redesigned on the fly while the content does not suffer at all? If you care, please let me know.