{"id":155,"date":"2005-12-22T11:49:25","date_gmt":"2005-12-22T09:49:25","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/12\/22\/one-pagers-will-be-the-hit-of-the-next-season-i-tell-you\/"},"modified":"2006-06-15T09:38:47","modified_gmt":"2006-06-15T07:38:47","slug":"one-pagers-will-be-the-hit-of-the-next-season-i-tell-you","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/12\/22\/one-pagers-will-be-the-hit-of-the-next-season-i-tell-you\/","title":{"rendered":"One-pagers will be the hit of the 2006!"},"content":{"rendered":"<p>Oh, well &#8211; at least if we don\u2019t count pop-ups, downloadable .PDFs and such&#8230; They came in big style this year, and I feel they are going to make their mark in the next season, too.<!--more--><\/p>\n<h3>That cool AJAX thingy ruined everything<\/h3>\n<p>The border between pure one-pagers and ones with some form of an <a href=\"http:\/\/www.adaptivepath.com\/publications\/essays\/archives\/000385.php\"><acronym title=\"Asynchronous JavaScript + XML\">AJAX<\/acronym><\/a> magic is somewhat blurry, but even the site with such feature is contextually much more compact than, say, five-pager &#8211; the visitor\u2019s focus stays at this very same page all the time. No need to explore (i.e. <em>to click around forth and back<\/em>), no need to wonder what else there could be.<\/p>\n<p><em>Literally<\/em>, a one-pager is a web site with a single HTML file, but <em>contextually<\/em> &#8211; it\u2019s a one page, where it all happens &#8211; no matter if there\u2019s image gallery in Flash, or show\/hide portions of the content &#8211; a visitor is virtually on the same page. Related to later, here\u2019s an article which explains usability issues of remote scripting &#8211; <a href=\"http:\/\/www.baekdal.com\/articles\/Usability\/XMLHttpRequest-guidelines\/\">XMLHttpRequest Usability Guidelines<\/a>.<\/p>\n<h3>No content. What to do?<\/h3>\n<p>When you\u2019re low on the content provided by the client, plus the copywriter narrows it all down to a few sound, but short sentences, the information designer has no option, than to provide the whole content on one page. <\/p>\n<p>On one-pagers, the content elements\/units should be carefully tailored and featured in a way to gently lead the eye toward the intended action &#8211; most of the time, it\u2019s making the first contact, downloading  a file or purchasing a product.<\/p>\n<h3>How to approach?<\/h3>\n<p>Speaking of careful tailoring, creating the right balance between more important and less important content is what you should be careful about. More than anywhere else, the thin line between success and the failure of the site is easy to cross. And I\u2019m not talking about overused <a href=\"http:\/\/9rules.com\/whitespace\/big_beautiful_dumb.php\">large typo phenomenon<\/a>. Others do.<\/p>\n<p>Generally, one should seek for the inspiration in traditional, but proven methods. Especially consider print and TV <a href=\"http:\/\/en.wikipedia.org\/wiki\/Advertising\">advertising<\/a>. <\/p>\n<p>Basically, it\u2019s all about <em>get-in\u2013score\u2013get-out<\/em>. If you have nothing important to say, in a way of information presented as a pure text, make an impression and make it easy for a visitor to fulfill the goals for the site, whatever that is. Ya know that ole saying &#8211; <em>less is more<\/em>&#8230;<\/p>\n<h3>Examples<\/h3>\n<p>Apart from playing a role of an online <em>flyer<\/em> for a small business, one time saler or a hit product promo, one-pagers are often used as a new media portfolios, where the accent is on the featured projects with short and straight-forward descriptions. Since they say <em>a picture is worth a thousand words<\/em>, one might consider this option, too.<\/p>\n<p>Here are a few examples:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.sinelogic.com\/\">Sinelogic<\/a><\/li>\n<li><a href=\"http:\/\/dulcimer.codylindley.com\/\">Welcome to your beautiful home<\/a><\/li>\n<li><a href=\"http:\/\/www.ljekarne-ricov.hr\/\">Ljekarne Ricov<\/a><\/li>\n<li><a href=\"http:\/\/www.claresco.hr\/\">Claresco<\/a><\/li>\n<li><a href=\"http:\/\/www.keeganjones.com\/\">Keegan Jones<\/a><\/li>\n<li><a href=\"http:\/\/www.danilod.com\/gallery\/\">Danilo Du\u00e8ak Gallery<\/a><\/li>\n<li><a href=\"http:\/\/en.helldesign.pl\/\">Helldesign<\/a><\/li>\n<li><a href=\"http:\/\/www.csszengarden.com\/\">CSS Zen Garden<\/a><\/li>\n<\/ul>\n<p>A fine example of what could have been a one-pager is <a href=\"http:\/\/www.emotionslive.co.uk\/\">Emotions by Mike<\/a>. With a smart <a href=\"http:\/\/developer.apple.com\/internet\/webcontent\/xmlhttpreq.html\">remote scripting<\/a> for the portfolio, it all could have been presented on a single page <em>(Ed: I\u2019m <strong>not<\/strong> saying it\u2019d be better web site &#8211; it\u2019s just a suitable example for this article&#8230; plus a nice portfolio to look at)<\/em>.<\/p>\n<p>So&#8230; how do you feel about this concept in general?<\/p>\n<h3>Update<\/h3>\n<p>Since I wrote the article, a few very nice examples came to my mind. Here they are:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.alazanto.org\/viquae\/\">Viquae: Hello<\/a><\/li>\n<li><a href=\"http:\/\/www.misipile.com\/\">Mi\u00b9 i Pile<\/a><\/li>\n<li><a href=\"http:\/\/www.detourdesign.com\/\">Detour design<\/a><\/li>\n<li><a href=\"http:\/\/solutionweb.co.uk\/\">Solution:Web<\/a><\/li>\n<li><a href=\"http:\/\/chameleon.simplebits.com\/\">Chameleon icons<\/a><\/li>\n<\/ul>\n<p>Also feel free to add your examples in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How about the content stuffed into a single page?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/155"}],"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=155"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/155\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}