Thinking » Tags » usability
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!
Back in December, 2010, the owners of Garden Grille were about to soft launch a new bakery concept a few doors down from their successful vegetarian restaurant. The new cafe would feature only vegan – devoid of animal products, no honey, eggs, milk or cheese – baked goods and desserts, as well as a handful of gluten-free options. In addition to the baked goods, the cafe would offer an extensive menu of fresh pressed juices, which very few – if any – cafes offered in the area. The cafe was to be called Wildflour.
In November 2010, before the initial build-out phase was complete, Oomph sat down with the owners, Rob and Uschi, to develop a branding plan and to set goals for print and web projects. After a long winter of getting the cafe running, testing products, perfecting the menu, and gathering information for the new website, Wildflour is now poised to attract customers who are started to venture outside again after a long winter.
The site is a simple WordPress theme, and the homepage is running the NextGen gallery, which Oomph found was a pleasure to work with. Since Wildflour has an active Facebook presence, Oomph decided to feature the Activity Stream right on the home page. That way, daily specials are written once to Facebook for those users, and consequently show up on the homepage. Special areas for announcements are available in the theme, as well as a blog which the staff at Wildflour will start to flesh out with healthful tips and more information about the products featured in the cafe.
Best of all, unlike some restaurant sites, the menu is plain HTML text – no PDFs to download or Flash to load – which makes one of the most important features easy to access on mobile devices. It’s also just quicker for people who want to check out the menu right away.
So next time you think you need a healthy beverage to perk you up, or a slow-brewed pour-over coffee, or just a place to relax and indulge in a dense piece of chocolate torte, check out www.WildflourVeganBakeryCafe.com, and head on down.
Endeca is a search and business intelligence company whose focus is business on the web. When they wanted a new blog that would focus on trends and insights for eBusiness, the team at Oomph decided it was time to use CSS3′s @media declarations for responsive template designs to optimize the site for multiple mobile and desktop devices.
The result was a super flexible theme, built on WordPress, that scales according to the user’s device size. One set of templates displays content in a few different ways, optimized for the iPhone, Android, iPad and desktop monitors of all sizes. Visit the site, grab the window corner to resize it, and watch what happens. Just one catch: current versions of Internet Explorer don’t yet support CSS3 (version 9, which is right around the corner, does add support).
For the developers out there, read on for a quick run down of what we did and how it works.
Drupal has finally released its latest major update: Drupal 7! In this latest release, a main focus was enhancing the often clunky administration experience previous versions were known for. Highlights of the new, simplified user interface include a dashboard, overlay, and admin bar. These are certain to bring some relief to the experienced Drupal user and newcomers to the content management system alike.
Using the new dashboard, site owners and administrators can easily add a summary of the latest relevant site information. Other dashboard widgets can include analytics (who is viewing your site) and recent comments. No more deep digging into the Drupal admin console!
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.
Ask any front end web developer to describe common challenges involved in converting (or “cutting”) a design. Ask a designer who’s savvy about front end web technology what the biggest creative limitation of the web “canvas” is. In both instances, you’d likely hear an earful about fonts.
For the front end web developer, it’s all about taking someone else’s creative – often designed on a highly controlled and extremely flexible canvas like Adobe Photoshop – and implementing it in the much less controlled and much less flexible world of HTML/CSS/JavaScript. Sometimes, a design that look great as a static image or storyboard just doesn’t translate well into web code, especially when not-so-design-sophisticated clients have to maintain the content and some of the imagery.
Fonts have long been a classic example. A storyboard designer can use any font they have installed on their own computer to make a beautiful design, but hacks aside, web browsers have only been able to render text with fonts installed on the visitors’ computers. Since there are only a handful of fonts that are more or less guaranteed to be on all modern computers (think Arial and Times New Roman), websites have been limited to a handful of uninteresting choices.
Most of our website design projects involve a first design for a new site or web application, or a complete redesign from the ground up. A home page and design “refresh”, however, can be a smart, often overlooked investment in a site’s vibrancy, particularly in times when budgets are tight and that vision of a redesign might be out of reach.
Of course, not all sites are suited to an evolutionary (as opposed to revolutionary) face lift. Putting lipstick on that 10 year old site with the scrolling marquee, blocky graphics, and green background is probably not a smart investment. But there are many websites with reasonable aesthetics – maybe a few years old – that don’t need to be torn down and rebuilt. Some creative thinking about how existing structural elements can be refined, coupled with a face lift of the home page’s content and, perhaps, key landing pages, can offer real bang for the buck.
Recently, we did just that for the New England Law Library Consortium (NELLCO).
