A WYSIWYG is a blunt instrument

Yeah so I am obviously more than a little bias on this and have somewhat a headstart regarding building websites as it’s my day job. However in my opinion HTML and is styling sister CSS should be one of the most important tools to anyone that creates content online. HTML/CSS are some of the fundamental building blocks of the web and they are not likely to go away anytime soon (even in internet time). Now I’m not talking about the kitchen sink here such as floats, background-colors, clearing divs and valid xHTML strict markup, but the basic tags and styling elements like <p>, <h1>, <strong>, <em>, <ul> or <li style=”color:red;padding-bottom:10px;list-style-type:disc;”> that can bring to life a blog post, a news item, an article or basically any website based around a CMS. Most CMS’s allow for a html view as well as a visual editor such as wordpress’s own:

More often the tools for managing and publishing content online are handed back to the people that operate within the company rather than a web design/development agency that built the site in the first place. With the web agency model changes can cost alot and take a long time for the request to be carried out. This handing back control is a great thing, meaning errors are fixed more quickly and more content is produced by the people within the organisation as barriers to production are reduced. But also quite often we find the the user wants more than what the visual editor allows, headings or fine manipulation of the content (image sizes, additional padding or unwanted content that appears with embeddable content). Now it’s possible to extend these visual editors, add more buttons, more rules in the main css file. However this is simply an abstraction and can’t possibly cater for all eventualities.

The answer in my opinion is that a basic understanding of HTML and CSS is an essential tool for employees and user generated content in general. Most comment textareas allow for simple styling, this can make your comment stand out, become more readable or attractive, as well as your own website’s content. How many times have you seen blog posts with too much space or elements buffering up against one and other (this may just be me though) and been distracted by it?

I am not going to go into HTML 101, there are plenty of resources out there for that. But here are a bunch of tags and css styles that I think should be part of any content producers toolbox:

Headings
<h1>This is the largest heading</h1>
<h2>This is a slightly smaller heading, maybe a sub-heading</h3>
<h3>This is an even smaller heading, maybe a section heading</h3>
<h4>This is probably a sidebar heading</h4>

e.g.

This is the largest heading

This is a slightly smaller heading, maybe a sub-heading

This is an even smaller heading, maybe a section heading

This is probably a sidebar heading

A guide to heading hierachy:

Text formatting

<p> – A paragraph, most default css will add padding to the bottom of a paragraph, so if your content is publishing as a huge block of text the WYSIWYG is probably just adding one <br /> (a line break rather than a paragraph) – you may need to click to HTML view and remove the br’s and wrap each paragraph in <p> and closing with </p> – most HTML tags need to wrap the content they are containing, otherwise the browser will continue in that context, so no closing tag and the rest of the page would be considered a paragraph and potentially confuse the browser

<br />  – A line break, see above, one of the exceptions a this is self closing

<strong>  – make the content bold <strong>this is bold</strong>

<em> -make something italic <em>this is italic</em>

<ul> – a list container

<li> – a list item

combine them for

<ul>
<li>list item</il>
<li>list item</il>
</ul>

e.g.

  • list item
  • list item

<a> – a link, one of the building blocks of the web, this  tells the browser where the text inside the <a> where the link should point to <a href=”http://www.google.com”>Google.com</a> – here we see the first attribute for a tag, some additional information informing the browser what it should do with that tag. in this case the link should point to Google.com

<img> – an Image  – maybe it’s too big and you don’t/can’t/won’t go to an image editor (by far the best method – but that’s another blog post) so <img src=”mygreatphoto.jpg” width=”150″ /> change the width and it will scale NOTE uploading your 10 megapixel holiday snaps and resizing to 100 pixels is not cool, also be careful of aspect ratios, if the height and width attributes are both present changing one with stretch the image.

<blockquote> – put something in a quote

Tables

<table> – if you want to display some data perhaps many CMS’s don’t have great or any table editors. Now the code is a little tricky but basically it follows something like this (not strictly accurate, nor standards compliant but we have to start somewhere and this will work):

<table>
<tr>
<td>Heading one</td>
<td>Heading two</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>

e.g.

Heading one Heading two
Value 1 Value 2

TR are rows and TDs cells much like excel.

Right so that’s the basics of HTML but what of CSS, now this is a bit more of a nebulous beast, but we can cover some of the basic styling concepts, now ideally CSS would go in a stylesheet  – a file linked within the webpage that sits of the server and isn’t really accessible for editing within the CMS – so for this we will need to inline styling (certainly not ideal, markup and styling where possible should be separated as this makes for cleaner, efficient, faster and more accessible code, but we are talking about people with access only to the CMSs hre). The CSS can be applied to the directly HTML tag but use of the style attribute, e.g

<p style=”padding-bottom:10px;”>some text with some extra padding</p> -  this will add another 10 pixels (the default mesurement for much web design)

<p style=”color:red;”>I’m red text</p> – colours the text red, note the american spelling or <p style=”color:FF0000#;”> the code is called a HEX color and is a representation of any of 16 million colours (thus a code and not a name). See here for a nice long list of colours you can also use.

e.g.

I’m red text

Alignment: maybe you want to align some text, or an image.

For text:

<p style=”text-align:left;”>align left</p>
<p style=”text-align:center;”>align center</p>
<p style=”text-align:right;”>align right</p>

e.g.

align left

align center

align right

For images:

<img src=”myaweslomeimage.jpg” style=”float:left;” />, <img src=”myaweslomeimage.jpg” style=”float:right;” /> – note the text will ‘wrap’ around the image.

Font size, increasing the font size can be something often the CMS will not allow, this can be mostly to ensure there is a consistency in the output of the content, the same can be said for the font. But there may be a legitimate reason for this being required:

Font size:

<p stlye=”font-size:16px;”>A bigger piece of text</p>  – note that most text on the web will be around 12-14px depending on the site. So 15px 16px 17px will be ‘large’ text, 12px, 11px 10px will be ‘small’ text.

e.g.

A bigger piece of text

Font type, now this is one to be taken rather carefully, not only are there very few fonts to choose from (for far too many reasons that I care to go into lest I bore you more that I already have) but using too many fonts on a size can be confusing and not very pretty. However a well placed header in Georgia can really bring the content out:

<h2 style=”font-family:Georgia,”Times New Roman”,Times,serif;”>A serif heading</h2>
<h2 style=”font-family:Arial,Verdana,Helvetica,sans-serif;”>A sans-serif heading</h2>

e.g.

A serif heading

A sans-serif heading

The reason we put three or for fonts down is because the user’s computer may not have that particular font available so in that case the next font on the list is used and so on.

Now that’s really only a taster, but for many purposes you won’t need too much more, the WSYIWYG although an excellent tool, is a blunt instrument, it tries the best it can but for those instances where you need a more precision instrument, HTML and CSS is the best way to go, click thew HTML view and delve about, there will be a lot of stuff in there and it can be quite daunting, but with practice the results will be better styled and robust content with less rendering errors.

retweet

Re-posting a comment I made earlier on a guardian piece by Simon Jenkins titled Palms, Kindles, Nooks, iPads – none are as cool as Gutenberg’s gadget because I don’t think it’s a war between formats.

——

My job is building websites, I build hundreds a year, I get most of my news and information from the web. I collaborate, communicate, create and share on the web. In short I love the web.

I also buy print books (from Amazon – who by the way had sales of $9.5bn last year), read print newspapers (as well as here on your website and via the iPhone app). In short I love print.

I also worked at a major publishing house for over 8 years working on websites (as well as print books) to enhance and support print textbooks (teaching materials, powerpoint slides, author blogs, learning objectives etc, sample material).

Now maybe I am an exception, but I feel this is such a tired argument, at each stage of technical development the newcomer did not destroy the incumbent. When photography came about it was said that painting would die, then we got the impressionists. When Cinema came out it would destroy theatre, when recorded music arrived, sheet music was for the chop (well this was quite dramatic), TV would destroy radio, VHS destroy Cinema. These developments exist in an ecosystem, each feeding and supporting one another – look at the increase in radio listening, most likely from internet listeners (I do not have figures to hand).

Now undoubtedly some of these industries have suffered at the arrival of the newcomer, however we have also seen innovation due to the new landscape. The impressionist example a good one, as much art had been quite representative up to that point – the advent of the photograph and it’s obvious ability to capture the real resulted in artists representing more emotive and perceptually different models of reality.

I could go on for far too long with examples of innovation in the face of change, much like the natural world – systems must evolve, there is no birth right to existence. The print media got comfortable and the fact that the majority of books/magazines sold now are celebrity tomes or celebrity news shows the lack of innovation in the market. The Guardian is an excellent example of innovation in the industry, allowing me for example to reply to your opinion, something I could not have done in the print equivalent.

These things are not mutually exclusive, print will live, just as radio, tv, cinema, theatre and painting does. However the people and the business models behind the print industries must innovate or then there really will be a problem. The opportunities the web offers are too much to pass by, print can be part of that. Infact print will be/is part of that (see POD / Lulu.com / The Newspaper Club).

Seven stages of grief

About once a year I decide to have my little rant about big publishers/ old media and their attitude towards the internetwebs. Although looking back through the arguments, the tone has changed somewhat over the years. And it’s this change of tone that is interesting, and I reckon it’s following the classic 5 stages of grief theory. Although if that’s the case then we have a loooooong time before we can all just get along. So starting with the concept that the old way was doomed the moment Tim Berners-Lee thought ‘hey what about linking all this shit together’ and then metaphorical nails in the coffin from Google, YouTube, Craigslist, blogging, flickr, downloading, itunes…etc…etc…etc…etc.

The stages of grief are defined as:

1. Denial – I feel fine.”; “This can’t be happening, not to me.”
2. Anger – Why me? It’s not fair!”; “How can this happen to me?”; “Who is to blame?”
3. Bargaining - “I’ll do anything for a few more years.”;
4. Depression – “I’m so sad, why bother with anything?”; “I’m going to die . . . What’s the point?”;
5. Acceptance – “It’s going to be okay.”; “I can’t fight it, I may as well prepare for it.”

So then stage 1, Denial. Most defiantly  true, many publishers at first just thought it was something for the geeks by the geeks and would ‘just blow over’ (I heard this statement personally several times). Google was interesting, Blogs were interesting, Google Ads were interesting, but never a match for traditional advertising (I was also sat in a meeting in 2004 where shock, disbelief and more than a little pity and amusement was displayed when suggesting Google Ad income would eventually overtake TV – it did, last year). But beyond that it was just a plaything, a geek/nerd thing, a game, nothing consequential compared to the high falutin’ newspapers, books, film and cds. For years traditional publishers played out the Knut role, to them they were simply attempting to dismiss this troublesome wave, enforcing why their business models deserved to survive, we are the ‘gate-keepers of quality’ they said, the internet is full of commentary and lies and noise. Yet at the same time pumping out the same old formats irrespective of price, need, and the change of attitudes towards content. Simply put they didn’t listen to the people that were buying the material, they were so sure of the business and content models no debate was necessary. On the web however people started creating the systems, filters and content that they wanted as well as circumventing the controls that the big publishers forced on a market in flux.

Stage 2, Anger, this is certainly here in reams, it’s not fair, why should we give away content, the aggregators steal our information, people steal our content and IP, you can’t make money online, give us time, we need to protect our current business model, we deserve to survive, democracy will die if newspapers go – just some of the screaming at the moon statements trotted out when organisations are in-able to innovate and take advantage of this brilliant new system.

Stage 3, Bargaining, I don’t think we are quite there yet, although much of stage two traits could be seen as bargaining, but some of the bargaining is so one-sided it doesn’t seem much of a deal. Sure we could look at newspaper websites, iplayer, itunes store as examples where certain segments of the old big publishers are starting to bargain with us – offering the formats and delivery mechanisms we want. And others wish/plead for more time to sort out the transition, and this is all great, but not all people deal with grief in the same way and I think anger is going to rage for a while in lots of sectors.

So after that, Stage 4 Depression, it’s sure to hit hard as some industries find themselves left behind and use what little influence they still have to bemoan the new system, how unfair it all is and how things were in the good ‘ol days.

So I that means the next stages to expect are bargaining, depression and eventually Stage 5 Acceptance  – these are all likely to happen in parallel – the companies that fail to innovate quick enough will die or be sidelined or just wither, this will lead to more anger and depression as people try to figure out what went wrong and find themselves in the cold. Others will innovate and work with the new paradigms, change their processes and LISTEN to their customers, and god forbid, even talk back to them openly and honestly, leading to better products and more efficient processes. These new models based on interaction, iteration and evolving business models that fit needs rather than reject change and sustain the current/past. Now when I say acceptance I don’t mean that everything is free and the web turns into one big 4chan (however lol that would be), but that older orgs work with, not against the system, creating new business models and process that fit. Now that’s something to hope for.

One final note, that I accept totally, none of this is easy or painless and certainly it leads to changes – some of which are unpleasant i.e. job losses . However doing nothing is not an option, the web is here to stay.

Reblog this post [with Zemanta]