Thinking » Tags » HTML
For the amount of users out in the world using WordPress, it is amazing to me that there is no great tutorial to point our clients to about the WordPress Editor window. This post hopes to rectify that.
The Editor window changes and updates just like the rest of WordPress, but has remained pretty consistent for the past few major versions. We’ll be sure to update this post with the newest tools as they are released.
First: Whizzy what?
WordPress uses a javascript plug in called TinyMCE for its WYSIWYG editor. WYSIWYG is an acronym for “What you see is what you get” and its the best way to craft content before saving your post. The editor is pretty powerful, with many buttons and options for writing content. Most of the options are familiar ideas, similar to options in a Word Processor – bold, italic, bulleted list style, etc… When designers like myself start to throw out terms like “H1″ and “blockquote”, though, most people’s eyes glaze over, but that is how these options are stored as HTML elements. Luckily, the Editor does the grunt work for you.
Second: Some definitions and pictures
The “WordPress Editor” window is the main focus of any page that produces content in the WordPress admin section. Most people are familiar with it for posts, and it looks like this:
A good theme will have some styles set up so that content in this window more closely resembles how it will look in your theme – colors, font, heading styles, etc… This helps you craft content that will look great before you even hit the “Save Draft” button and preview it.
No Kitchen Sink
When you fist use WordPress, the “kitchen sink” is off. So the Editor window will most likely look like this, with the following options:
The options explained:
Upload/Insert: This area is a container for all of the media options. Sometimes, plug-ins like the Next Gen Media gallery or Poll Daddy will insert an icon in this area for accessing shortcodes for those items. Clicking on any of these will usually open a modal window above the content for managing photos and the like.
Content View Switcher: The Editor window can function as a Visual Editor (WYSIWYG), or as an HTML editor for those more adventurous. This post will concentrate on options in the Visual Editor.
Bold: Highlighted text will become bold when this is clicked. In HTML, this uses a <strong> tag.
Italic: Highlighted text will become italic when this is clicked. In HTML, this uses the <em> tag. Can be used in combination with the bold button.
Strikethrough: Highlighted text will appear struck, with a line through the center.In HTML, this uses the <del> tag. Used to indicate text for deletion or removal, or to indicate that a change in the text has taken place.
Bulleted List: Highlighted text will be formatted like a bulleted list. Depending on your theme’s style, the bullets may be round or square. Lists can be nested – a bulleted list may have a numbered list inside of it. In HTML, this uses a set of <ul> and <li> tags for the “unordered list” and the “list items”.
Numbered List: Similar to above, but with numbers. In HTML, this uses the <ol> (ordered list) tag in combination with the <li> list item.
Blockquote: Highlighted text will be indicated as a blockquote, which typically means that a whole passage has been quoted form another source. The style of it will vary from theme to theme, but most of the time italic text is used, it is indented, and may have quotes around it automatically. The HTML element is <blockquote>.
Left, Center and Right Align: These buttons will align highlighted text. Most themes align text to the left by default and this is how an author can break out of that mold. An author need not highlight a whole paragraph, as this style will be applied from one full return to another. In HTML, since there are no native tags for alignment, TinyMCE adds a <p> tag around the paragraph with a “style=align: right;” applied to it.
Link (chain icon): The link icon is available for clicking only when text is highlighted. Highlighting text and clicking this button will open a small modal window where an author can enter in the destination URL, choose whether or not to open in a new window, or choose to link to another page on their own site. In HTML, the tag used is <a href=”http://example.com”>Link Text</a>.
Unlink (broken chain): To remove a link, an author can highlight the whole link or simply place the cursor within the link and click this button.
The “More” break: WordPress has an option of adding this physical break to the post – breaking it into two sections, the teaser and the body. If your theme displays the entire post by default on category landing pages, the “more” break is a way to show only some of the content, forcing users to click a “Read More” link to see the rest of the body of the post. Upon clicking the “Read More” link, the user will be brought directly to an anchor in the text where the post continues, so they do not have to read the same teaser again.
If your theme’s landing pages use excerpts instead, this “more” break may not have the intended effect.
Spell Check: This button is a drop down that will change the preferred language of the editor’s spell check dictionary.
Full Screen: Toggles a full screen view of the editor so authors can concentrate on composing their post. Useful, but the buttons for styling your post will be limited in this view to bold, italic, bullets, numbers, blockquote, insert media, insert link, unlink and help. Learn the “Hotkeys” to access more style options (see the Help modal window for a list of Hotkeys and how to use them).
And finally, Toggle Kitchen Sink: This button simply makes another row of options available for styling your post. Those options are explained next.
Kitchen Sink!
With the kitchen sink option on (and WordPress remembers if you prefer it on), a whole slew of additional options are present.
Style drop down: (graphic below) Within this drop down are styles intended for block-level elements – paragraph, address, preformatted, heading 1, heading 2, etc…
The best way to think about inline vs. block-level may be this: A bold tag is inline, because you can bold a portion of a sentence; A Heading 1 is block-level because it will effect all the text in a block, from one hard return to another.
Underline: Highlighted text will have an underline applied to it. In HTML, the tag is <ins> (for insert). Your theme may apply an underline to links, so be sure to use this tag when appropriate, and don’t fool your readers into thinking something might be clickable when it is not.
Justify: Another alignment option. This one is by itself because authors should use it carefully. Not all browsers support the justify feature, and since browsers do not hyphenate text, this style may create “holes” in your paragraphs when spacing between words need to be very large.
Text color: Highlighted text will turn a variety of colors by using this button. When clicked, a standard palette of colors will appear for you to choose from, and a limitless palette is shown when the “More Colors” option is clicked.
Paste as Text: THIS BUTTON IS AWESOME! Very useful for authors who cut and paste text from other sources. Ever copy text from another website, and all the styles come with it? Soon you have a mish mash of styles in your post. You can get frustrated scraping the style tags in HTML view, or you can paste with this button to begin with. When clicked, a new modal pops up with its own text area. Text pasted into this area is converted to “plain text”… nothing but the facts, ma’am. This allows for much easier styling and integration into your content.
Paste from Word: THIS BUTTON IS ALSO AWESOME! Ever cut and paste content from Microsoft Word, and all the sudden your post looks funny? That’s because a bunch of styles – and, frankly, gobbledy gook – comes along with the content from Word. To paste the text in as plain text, click this button and paste your content into that window first. This option is better if you know the content is coming from Word than the Paste as Text button, as it specifically removes tags that Microsoft Word generates.
Remove Formatting: Highlighted text will have styles removed. While this icon is an eraser, it must be noted that it does not always remove every style. It does a better job removing styles that the editor has added in already. It does not consistently remove styles from text that has been cut and pasted from other sources.
Insert Special: This drop down list helps to insert special characters that are hard to access unless you know the special keystrokes.
Remove / Add Indent: A highlighted block-level element will be indented or un-indented with these buttons. Since there is no HTML element for this, TinyMCE adds a “style= margin-left: 30px” to the element. 30px is the default indent increment.
Redo / Undo: Simply keeps track of changes and allows the author to undo or redo a set of changes. I’m honestly not sure how many changes it will keep in memory before they get lost.
Help: A simple modal with Basic and Advanced tips will pop up when this is clicked. The most interesting to me is the table of “Hotkeys” available to authors. Did you know command 1 will make a selection take on the Heading 1 style?
And one more
The last thing I want to review is the contents of the Style drop down.
As briefly mentioned before, the style drop down menu contains a bunch of standard block-level elements. This means that a whole paragraph will get the style, not just a selection of portion of a paragraph. The styles are:
Paragraph: Used by default, but useful if you have chosen another style but want to switch it back to the default paragraph style In HTML, this is the <p>…</p> set of tags.
Address: An interesting tag, address is usually italic for some reason. I wonder if blocks using this tag have special weight with search engines, but very little data is available to back up that hunch. Personally, I rarely use it.
Preformatted: The <pre> tag is a tough cookie. It is intended to display text with white-space preserved, meaning that breaks in the text will be exactly as written. To me, this means trouble, as if there are no breaks in the text inside of this tag, then there are no breaks on the front-end as well, and that can lead to some goofy looking posts. A good theme will take into account the intention of a <pre> tag, but ensure that the display will not break the layout. Again, rarely used… most people use it to display chunks of code.
Heading 1, 2, 3, etc… These are great and every author needs to know how to use them. The concept is simple – headline styles, with more size or boldness given to the lower numbers. But search engines use these tags to determine where the important phrases are in the content as well (and in the page in general) so they should be used not only because they help organize your story, but because they also give your content extra weight.
That’s all folks!
Thanks for reading, and I hope this helps. There is a lot of options packed into this little Editor window, so take advantage of the array of style options WordPress gives the author. Happy blogging!
As designers get used to all the new whizz bang inherit in HTML5 and CSS3, every now and then we get pulled back into the world of basic HTML rendering a là 1993 when we have to design e-newsletters for desktop and web-based Mail clients.
I recently had to create some templates for Constant Contact and I thought, “Hey, this should be easy. Can’t do anything tricky, so, keep the design simple, use a tried-and-true table for the layout, and viola, beautiful emails”. While you can’t do anything tricky, it’s true, there is so much more to consider, and it’s all pretty annoying if you are used to designing for the web. I enjoy designing for IE6 slightly better than designing email templates.
With that frustration in mind, here are some tips I ran across that might be useful for you, but will be very useful for me as I know I will forget them all just in time to design a new set of templates:
Design Specifically – Everything needs a class
The most annoying aspect of Constant Contact for a web designer who liked their code to be clean and nested is the fact that IDs are NOT supported, and neither are styles on HTML elements. So, the CSS selector body p is a no-no. Not even a rule that uses an explicit h1. Instead, you must define a .header1 class and apply it to an h1, like this: <h1 class="header1">.
Ridiculous? Maybe… but here’s why. When Constant Contact assembles your email, it takes all these rules and spells them out explicitly right in the element. So while you may define a normal style, it uses it as a reference and spits out an inline style tag on the element itself. So this:
[code lang="html" light="true" wraplines="true"]
.header1 { font-weight: bold; font-size: 20px; color: #333333; } <h1 class="header1">A Sample Header</h1>[/code]
Becomes:
[code lang="html" light="true" wraplines="true"]
<h1 size="20" color="#333333" style="font-weight: bold; font-size: 20px; color: #333333;">A Sample Header</h1>[/code]
It does this so it can cover the widest array of email clients out there. And it would be maddening for us to try and code this way with all those inline styles. So while the idea of using a stylesheet is like the web, the way Constant Contact uses the stylesheet is not like the web at all.
Design like it’s 1993
We all know KISS, but when I say simple, I mean REAL simple… 1993, beginnings-of-the-internet simple. Take the <center> tag, for example. The good ole margin: 0 auto; won’t work consistently enough, so break out the dusty <center> tag instead.
Use tables for layout. I know, I know, that’s SO 1993, but I’m serious… trying to consistently float divs and clear floats will drive you mad.
Also, forget bit-saving CSS shorthand. You’re better off using the full six-character hex values for colors when you normally might use three. Four values for padding and margin seems to be well supported, but use the long-form tags for font-size, font-weight, font-family, and background properties. Actually, forget background images all together. Many email clients won’t load them.
When using images, style the container like its text
This one may not be very intuitive, but let me explain. I’ve got an image, and it’s important – it’s the logo. I know some email clients won’t load the image by default (looking at you, Gmail), so when the image doesn’t load, I want the contents of the alt tag to display instead, and I want it to look good.
To do this, I simply made sure the container that the image is placed inside has some fallback styles for text. So while the alt text disappears when the image loads, if the user never loads the image, it still looks nice and we don’t lose important information, like the name of the company. Here’s what I’m talking about:
Before images load...
With images loaded.
Use Anchor (Jump) links Carefully
This one particularly bugged me, and took a little time to figure out. The client wanted a Table of Contents with simple anchor links to make the email jump down to the proper element. I knew that support for hrefs that jump down to an element with an ID would be spotty, but a simple <a name="anchor"> would work, right?
Silly me, what was I thinking?
Besides the fact that even these basic elements have spotty support (see this article from Campaign Monitor), there is also a problem of styling and the way Constant Contact handles empty HTML elements.
In order to appease the greatest number of email clients, my code for anchors links was <a name="anchorname" id="anchorname"></a>. But there was a simple problem with that. Since it was empty, Constant Contact turned it into a self-closing xHTML element, which looks like this in the source of the email: <a name="anchorname" id="anchorname" />. The problem is, most email clients won’t recognize an anchor tag that self-closes, so my email had open anchors everywhere, which turned my text default link blue.
The solution is god-awful, and I would never allow my web pages to look like this, but this is what I had to do for it to work and look good. I had to add a style class to handle these links, because even though there is no HREF declaration, email clients will still treat it like a link and turn it default link blue. :
[code lang="html" light="true" wraplines="true"]
<h3 class="header3"><a name="anchorname" id="anchorname" class="anchor">Headline Text</a></h3>
[/code]
Send us Your Tricks!
Designing emails is frustrating enough… and this list is by no means exhaustive. What issues have you encountered? Send them over here and we’ll keep them compiled for you!
In Conclusion
I hope you never have to design email templates, because they really can be frustrating. All the efficiencies you’ve learned while designing for the web get thrown out the window. Still, email is an effective (and cost effective) form of communication, so it won’t go away. It can only get easier as older mail browsers are slowly phased out, but the fight to eradicate IE6 is nothing compared to the fight to eradicate Outlook (Outlook has no support for simple styles like padding and float).
In short, stay sane, stay calm, and use Google to help you figure out the baffling problems of designing email templates. Keep the design simple and the message short.
And good luck… you’ll need it.
On January 11th, a microsite for Rhode Island Hospital hit the web. The content of the site addresses recent news and concerns about patient safety at the hospital and is meant to deliver the latest news and structural enhancements the hospital is undertaking to address and improve patient safety and quality care.
The design seems relatively straightforward until you learn that it was mocked up, coded and tested within five days. One Friday we were given the brief, and the following Friday we were delivering four coded templates, ready for content.
Author’s Note: This is the first post in what we hope to make series: “Ask a Web Strategist”. These are intended to be relatively short, public answers to questions web technology and strategy we receive. Do you have a question? E-mail us!
Question: I’m all bent out of shape about the Flash vs. HTML 5 debate. I’m interested to hear your opinion about it. Will Adobe Flash still have a place on the web in 5 years?
Answer: Generally, trying to predict where any technology in a field susceptible to rapid change will be in 5 years is a losing game. Flash will probably be around for many years to come, but we’d bet on a much smaller place.
On September 23, Google released Chrome Frame, an add-on for Internet Explorer (IE) 6-8. Chrome Frame allows websites to request that IE visitors use the rendering engine behind Google’s speedy Chrome web browser instead of IE’s native engine. A TechCrunch synopsis and the Chrome Frame page provide further explanation. This article offers strategic insight into why Google is aggressively pushing their own browser technology, whether Chrome Frame will succeed, and how Chrome Frame should be seen by web development clients.
Ask any web developer what they think of Internet Explorer 6 and you’ll hear an earful. The 8 year old web browser still commands nearly 20% of the browser market and is woefully inadequate at supporting modern standards, incurring millions of dollars for legacy support every year. IE 7 and 8 were big improvements, but as we’ve opined on before, even IE8 fails to support forward looking techniques supported by the competition.
In the 6 month since IE8′s release, competitors Firefox, Chrome, Safari, and even Opera, have all seen major updates. All of them introduced performance upgrades, in particular to their JavaScript engines. JavaScript is increasingly the engine for dynamic content on websites, from animations to on the fly content loading without page reloads (via AJAX). Google’s browser, Chrome, positioned itself from day one as focused on performance, JavaScript performance in particular. At least in theoretical tests, it more than delivers on its promise.
UPDATE: Paul Thurrott, a Windows journalist, has featured some commentary on our post over at his Winsupersite. Check out his post, and the great discussion below it! Thanks for the input, Paul!
Internet Explorer 8 is out, and a lot of people – technically sophisticated and otherwise – are wondering what, if anything, this means for the web. As professional web developers, our view is that while Internet Explorer 8 is an incremental improvement over its predecessor, we’re mostly disappointed by its lack of progress.
Having read a variety of takes on IE8, we were inspired to write this article for two audiences. First, there’s little in the way of concrete examples and clear explanations for a large swatch of the business technology decision makers (that many of our clients represent) who are often savvy about technology, but look to organizations like us for a deeper understanding of the strategic, cost, and technical significance. Second, reading the comments on tech savvy websites like Neowin, Digg, and the Winsupersite have me concerned that there’s a growing and false notion that IE8 is just great, and its rendering problems are the result of web developers writing non-standard code optimized for IE7.
To understand why IE8 is a legitimate disappointment, we need to start by providing background on how different browsers impact web development, both from a cost and design standpoint. If you think you already have a handle on this, you can skip ahead to our 3 straightforward examples of IE8 disappointments.
As a professional web shop, our HTML / CSS developers are frequently taking a professional graphic artist’s vision of a website’s look and feel and converting it to work with this unique canvas we call a website. The graphic artists’ digital toolbox is full of powerful applications like Adobe Photoshop, that provide near total control over the final presentation, on a fixed sized canvas, down to the pixel.
There’s one big problem: the web developer’s canvas just isn’t that controlled or robust. And it’s not just that the unique characteristics of web layout or the code that defines how a web page should look lacks a good way to pull off a design element (which it does, often enough). There’s a bigger problem: several kinds of interpreters trying to understand the canvas, each with its own quirks and limitations. Welcome to to the world wide web canvas.