{"id":755,"date":"2008-11-27T07:02:40","date_gmt":"2008-11-27T06:02:40","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=755"},"modified":"2009-04-14T07:08:24","modified_gmt":"2009-04-14T06:08:24","slug":"episode-one-prepare-your-content-and-interface-copy","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2008\/11\/27\/episode-one-prepare-your-content-and-interface-copy\/","title":{"rendered":"Episode One: Prepare your content and interface copy"},"content":{"rendered":"
\n

This is the first part of the series, \u201cEnvironmental friendly CSS<\/a>\u201d<\/p>\n<\/div>\n

We want to keep this simple. The example scenery is a fictitious blog with jokes and funny videos. Furthermore, the build part of the series will be based on the WordPress<\/a> theme template, so you’d feel more comfortable following the code.<\/p>\n

Setup the context<\/h2>\n

In this series, we are about to design and style the tag cloud for a sidebar.
\nYou’ve already seen those. If not, see the live example<\/a> (bottom right).<\/p>\n

Additionally, we are going to reuse some common HTML snippets to add a little spice to interface design. More on that in the next episodes.<\/p>\n

The Content<\/h2>\n

For the main content area, let’s use a random internet joke and a random video from Youtube<\/a>. We’ll also use some common blog navigation items and a search box.<\/p>\n

For the tag cloud we have types of jokes<\/a>: Political jokes<\/em>, Professional humor<\/em>, Mathematical jokes<\/em>, Ethnic jokes<\/em>, British tell jokes<\/em>, Self-deprecating humor<\/em>, Blonde jokes<\/em>, Redneck jokes<\/em> etc.<\/p>\n

User experience requirements<\/h2>\n

Visitors of such a site would want to have a good laugh. The interface is supposed to support that, so we should invent some less formal labels and meta-titles to facilitate overall experience.<\/p>\n

Instead of “tag cloud”<\/q> we’re going with “OMG, look at the storm!”<\/q>.<\/p>\n

Non-graphic User Agent requirements<\/h2>\n

The web site should be accessible via mobile phones, so visitors can enjoy jokes while commuting or attending a boring meeting.<\/p>\n

Regarding the later, the site should be easy to use with just one hand under the conference table \u2014 while you are pretending that you are participating in a meeting. Make it dead simple: linear with appropriate skip-to links.<\/p>\n

The sentence “OMG, look at the storm”<\/q> that we are using in full blown desktop browser is inadequate here. If we remove graphics, it’s silly to call a visitor to look at something that isn’t there. So we are going to name it something more clear and inline with the device. Read on.<\/p>\n

Search engines requirements<\/h2>\n

Proper wording (keywords, phrases and labels) facilitate searching and getting the right search results. Users probably wouldn’t enter “joke tags”<\/q> into Google search box, but they might search for “joke categories”<\/q>, “joke types”<\/q> or \u201cpopular joke types\u201d<\/q>.<\/p>\n

Obviously, what is technically correct isn’t necessary user-friendly. Try to think about the phrases a random seeker would use to get to the content you are offering.<\/p>\n

Said the above, let’s settle down with “Most popular joke types and categories”<\/q>.<\/p>\n

Summary<\/h2>\n

It’s always nice to create a short document which will outline your research in a form of Interface brief for the designer and\/or front-end developer.<\/p>\n

Don’t make it too fancy, stay focused, give a little background and then describe elements. See sample Interface brief (17KB PDF)<\/a>.<\/p>\n

In the next episode, we are going to deliver interface design mockup, based on the requirements outlined in this article.<\/p>\n

Any Comments? Too basic, too advanced? Fire at will!<\/p>\n","protected":false},"excerpt":{"rendered":"

This is the first part of the series, \u201cEnvironmental friendly CSS\u201d We want to keep this simple. The example scenery is a fictitious blog with jokes and funny videos. Furthermore, the build part of the series will be based on the WordPress theme template, so you’d feel more comfortable following the code. Setup the context […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/755"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=755"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/755\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=755"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}