<?xml version="1.0" encoding="utf-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" ><channel><title>W3 EDGE &#187; Web Design</title> <atom:link href="http://www.w3-edge.com/weblog/category/web-design/feed/" rel="self" type="application/rss+xml" /><link>http://www.w3-edge.com</link> <description>Innovation Redefined</description> <lastBuildDate>Wed, 10 Mar 2010 07:09:33 +0000</lastBuildDate> <generator>http://wordpress.org/?v=2.9.2</generator> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <atom:link rel="hub" href="http://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="http://superfeedr.com/hubbub"/> <item><title>Web Design Sensibilities Have Changed</title><link>http://www.w3-edge.com/weblog/2006/11/web-design-sensibilities-have-changed/</link> <comments>http://www.w3-edge.com/weblog/2006/11/web-design-sensibilities-have-changed/#comments</comments> <pubDate>Wed, 01 Nov 2006 12:56:54 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Graphic Design]]></category> <category><![CDATA[Social Media Marketing]]></category> <category><![CDATA[Usability]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Design]]></category> <category><![CDATA[Web Development]]></category> <category><![CDATA[web design trends]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/web-design-sensibilities-have-changed/</guid> <description><![CDATA[Web design sensibilities have changed. The motifs found in sites like the following go far beyond their community driven content:craigslist by Craig Newmark &#38; Jim Buckmaster friendster by Jonathan Abrams meetup by Scott Heiferman, Peter Kamali &#38; Matt Meeker Linkedin by Reid Hoffman Last.fm by Martin Stiksel Feed Burner by Dick Costolo digg by Kevin Rose technoratti by David Sifry del.icio.us by Joshua Schachter flikr [...]]]></description> <content:encoded><![CDATA[<p>Web design sensibilities have changed.</p><p>The motifs found in sites like the following go far beyond their community driven content:</p><ul><li><a rel="external" href="http://www.craigslist.org/">craigslist</a> by Craig Newmark &amp; Jim Buckmaster</li><li><a rel="external" href="http://www.friendster.com/">friendster</a> by Jonathan Abrams</li><li><a rel="external" href="http://www.meetup.com/">meetup</a> by Scott Heiferman, Peter Kamali &amp; Matt Meeker</li><li><a rel="external" href="http://www.linkedin.com/">Linkedin</a> by Reid Hoffman</li><li><a rel="external" href="http://www.last.fm/">Last.fm</a> by Martin Stiksel</li><li><a rel="external" href="http://www.feedburner.com/">Feed Burner</a> by Dick Costolo</li><li><a rel="external" href="http://www.digg.com/">digg</a> by Kevin Rose</li><li><a rel="external" href="http://www.technorati.com/">technoratti</a> by David Sifry</li><li><a rel="external" href="http://del.icio.us/">del.icio.us</a> by Joshua Schachter</li><li><a rel="external" href="http://www.flickr.com/">flikr</a> by Caterina Fake &amp; Stewart Butterfield</li><li><a rel="external" href="http://www.youtube.com/">YouTube</a> by Chad Hurley, Steve Chen &amp; Jawed Karim</li><li>the list goes on and on&#8230;</li></ul><p>Many of these sites have been around for more than a decade and ultimately changed the paradigm of how we use the web, (Tim O&#8217;Reilly <a rel="external" href="http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html">discussed</a> after the fact in 2005). However it wasn&#8217;t until recently that the trends in design that began with these sites finally gave birth to new design sensibilities as well.</p><p>Not too long ago, building a community online just meant that people bookmark your site and visited it frequently. Perhaps a site owner pumped out some newsletters to drive subscribers back to the site or partner sites had links to your properties to remind various visitors that you exist. When RSS appeared, it helped people stay abreast of the latest content pushed out from content owners. More recently we work and play in a world where the community owns the content, and if they are so bold, the site owners are only moderators (and the guys that pay the web hosting bills). Great examples are the <a rel="external" href="http://www.guardian.co.uk/weekend/story/0,,1939018,00.html">Wikis</a> (well done Jimmy Wales) we all know and love — good old &#8220;<a href="http://en.wikipedia.org/wiki/Folksonomy">folksonomy</a>&#8220;. Having said that, we&#8217;re also in a world where anyone&#8217;s voice can be heavily syndicated and tagged as worthy of note, which is a beautiful thing&#8230;</p><p>Let me get back to the point before I get lost in the history of forums as the original online communities. Now that a community can control the content and determine what is relevant and important, the visual language that we as web designers are now using has changed significantly as well. Today we <a rel="external" href="http://www.webdesignfromscratch.com/dont_decorate_communicate.cfm">communicate instead of decorate</a> (as Phil Brisk put it so succinctly) with design aesthetics — with the focus on content, that&#8217;s exactly how things should be. A nice post at <a rel="external" href="http://www.webdesignfromscratch.com/current-style.cfm">webdesignfromscratch.com</a> discusses this trend pretty well imho. These design trends have finally even cascaded into corporate design sensibilities which once accounted for the majority of the design work we designers are asked to perform.</p><p>Characteristics like:</p><ul><li>a focus on <a rel="external" href="http://www.mikeindustries.com/sifr/">typography</a>,</li><li>larger font sizes in navigation and copy,</li><li>use of white space and centered page positioning,</li><li>graphically rich layered layouts often using some 3D design elements or icons,</li><li>layouts that compliment the copy in a page and showcase it with sharp color accents where appropriate,</li><li>diligent use of CSS and table-less markup with a demonstrated understanding of semantics, accessibility, usability and open standards</li></ul><p>It seems to me that also the <a rel="external" href="http://www.direct.gov.uk/DisabledPeople/fs/en"><acronym title="Disability Discrimination Act">DDA</acronym></a> legislation in the UK contributed to the &#8220;Web 1.5&#8243; as markup that used standards, semantics and exhaustive CSS designs began to take hold and foster a renaissance in the approach to usable and accessible site design. We still don&#8217;t see the abundance of layouts that are designed for a resolution higher than 800&#215;600, but this trend is mostly a function of the audience for many of the clients out there looking for our services. In custom business web design, there are of course a number of restrictions that deter us from employing a wider fixed-layout, perhaps that will change as well soon enough.</p><p>Thanks to all of  those folks highlighted in this post for enabling me to support my thoughts on <a href="/">custom business web design</a> with supporting opinions. I hope this blog will be a destination in the community soon enough.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/11/web-design-sensibilities-have-changed/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Working with Your Site Designer</title><link>http://www.w3-edge.com/weblog/2006/08/working-with-your-site-designer/</link> <comments>http://www.w3-edge.com/weblog/2006/08/working-with-your-site-designer/#comments</comments> <pubDate>Tue, 15 Aug 2006 08:28:08 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Graphic Design]]></category> <category><![CDATA[Web Design]]></category> <category><![CDATA[web design best practices]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/working-with-your-site-designer/</guid> <description><![CDATA[Whether you're new to the e-commerce realm or an old vet, it's important to know what you don't know and when to let your site designer take charge.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; Do You Know What You Don&#8217;t Know?</h3><p>If you&#8217;re new to the e-commerce sphere you&#8217;re probably not up-to-speed on SE algorithms, semantics compliance or cascading style sheets. And, when you select a site designer for your online venture, s/he is going to talk about search engines, semantics and CSS. She might as well be speaking Bulgarian.</p><p>Still, you have a vision. You have preferences for the color scheme, the type face and the site&#8217;s layout or <u>architecture</u>. It&#8217;s like building a house. You may not understand the importance of kiln-dried lumber but you don&#8217;t have to. You just have to know what you like.</p><p><b>Talking the Talk? Don&#8217;t!</b><br />Be honest with your site designer. Don&#8217;t pretend you know all about HTML when you don&#8217;t even know what HTML is. (It&#8217;s the code used by web designers to build sites.) A good design firm will not only create a great looking site, they&#8217;ll also take the time to teach you a few things about site design and online marketing.</p><p>Instead, point out several sites and explain <u>what</u> it is you like about each. Designers aren&#8217;t mind readers so if you just say &#8220;I like these 10 sites&#8221; the designer will visit those sites but won&#8217;t be sure if you like the color motif, the layout, the navigation or something &#8220;indescribable.&#8221;</p><p><b>Start Making Lists</b><br />Make a list of sites you like with reasons why you like them. But don&#8217;t stop there.</p><p>Make a list of &#8220;must-haves&#8221; on your site. A secure checkout, a merchant account, pictures of you and the family, no more than one product per page and so on. You don&#8217;t have to know a thing about site building to have a clear picture of what you want your site to do.</p><p>The problem is conveying those desires and needs to the design firm.</p><p>Ask the designer or firm to develop a <u>reaction</u> piece &mdash; a sample web page that you can react to. Then react. Point out what you <u>do</u> like and what you <u>don&#8217;t</u> like. This helps the designer hone in on the right look and feel for the site.</p><p><b>Talk About Your Demographics</b><br />Demographics are simply descriptors of your market &mdash; the ideal buyers. Male, over 40, married, children, earns over $40,000 a year, college degree, white collar and so on. Your site, and the copy that appears on it, should be developed specifically for your target demographic.</p><p>Now, you have knowledge of your customers. But your designer has knowledge of the ruthlessly competitive w3 marketplace. And those two bodies of knowledge must be brought together to create an effective site.</p><p><b>Listen to the Designer</b><br />When you go to a doctor, you expect expert, knowledgeable advice from an up-to-date professional. Well, you should expect the same from any good site design professional. And just as you take the doctor&#8217;s advice, if you&#8217;re behind the curve on e-commerce, take the designer&#8217;s advice, as well.</p><p>There&#8217;s plenty of room for your creativity but a design pro knows what works best for SEO and how to construct the sub-structure of the site for fluidity and ease of navigation.</p><p>These pros also know the dynamics of effective site skin layout. The site&#8217;s skin is that part of your site that visitors actually see, and there are copywriting and layout conventions with proven track records of converting visitors to buyers.</p><p><b>Know What You Don&#8217;t Know</b><br />If you&#8217;re unfamiliar with the world of e-commerce but you have a great idea for a web site, there are three options available to you:</p><ol><li>Learn enough about web coding, semantics compliance, SEO dos and don&#8217;ts and how to create a secure merchant account to accept credit card orders and build the site yourself. You should be ready to launch in 12 &mdash; 18 months depending on how technically adept you are.</li><li>Option two is to simply hand over the entire project to a design/SEO professional. Yes, this will cost more money and yes it does require a leap of faith that you&#8217;ve selected the right design firm for the job, but you can be operational in a couple of weeks. Then, you can learn on-the-job so to speak. However, you should keep your SEO/designer&#8217;s number close by for matters of tweaking, updating and so on.</li><li>The third option is the best. Take enough time to learn something about e-commerce and search engine optimization. It isn&#8217;t necessary to learn HTML or XHTML coding. You can pay people to actually write the lines of code that will become your web site.</li></ol><p>But, if you understand the fundamentals of site design, what key words are and how search engines access, spider and index a site you&#8217;ll be in a much better position to discuss these things intelligently with your designer, working in tandem to bring your vision to fruition.</p><p>There are lots of books on &#8220;Making Millions on the Internet&#8221; but save your money. There is so much content on SEO, principles of site design, opinions from those in the know and anything else you can think of associated with online commerce &mdash; and it&#8217;s all free. All you have to do is dive in and start reading. Soon enough, you&#8217;ll know what you need to know to move forward.</p><p>And soon enough, you&#8217;ll be able to speak to a site designer in the language of the industry. You&#8217;ll know what a home page is and key word density, conversion rate and web hosting pitfalls. It may sound like a lot but it&#8217;s anything but brain surgery. There are lots of people just like you earning good (great) income through e-commerce.</p><p>So, if you don&#8217;t know anything about it, but that idea keeps running through your brain, learn enough to move forward with some confidence. It&#8217;s not a good idea to hand the entire project over to a designer and keep your fingers crossed. And it&#8217;s not a good idea to take a couple of years to become a techno-SEO guru. By then, your good idea will be an old idea.</p><p>Your best course is to learn what you need to know so you can converse with your site designer to ensure that it is, indeed, your vision that&#8217;s brought to life.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/08/working-with-your-site-designer/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Landing Page Usability</title><link>http://www.w3-edge.com/weblog/2006/07/landing-page-usability/</link> <comments>http://www.w3-edge.com/weblog/2006/07/landing-page-usability/#comments</comments> <pubDate>Sat, 15 Jul 2006 08:26:36 +0000</pubDate> <dc:creator>Frederick Townes</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Copywriting]]></category> <category><![CDATA[User Interface / Experience]]></category> <category><![CDATA[Web Design]]></category> <category><![CDATA[conversion rate optimization]]></category> <category><![CDATA[search marketing]]></category> <category><![CDATA[landing page optimization]]></category><guid isPermaLink="false">http://www.w3-edge.com/weblog/landing-page-usability/</guid> <description><![CDATA[A landing page has a specific purpose — to initiate the most desired action (MDA). Here's how you can create landing pages that deliver the MDAs you're looking for.]]></description> <content:encoded><![CDATA[<h3 class="first">&raquo; More Than Just the Curiosity Factor</h3><p>A landing page is the page that visitors first see after becoming curious enough to click on a link to your site. The link may be found on search engine results pages, within a specifically-targeted email, on the site&#8217;s navigation toolbar or within another website.</p><p>In many cases, these are links you pay for. The organic results delivered by SERPs are free, but, unless your site appears on the first two SERPs, it&#8217;s unlikely that visitors will connect.</p><p>In many cases, the landing page is the site&#8217;s home page &mdash; but not always, even within SERPs. Landing pages can appear anywhere within a web site.</p><p><b>Paid Links Demand ROI</b><br />If your landing page receives prominent display within search engine results pages, congratulations. Upward of 50% of visitor traffic found that landing page through an SE query. However, only 20 to 25 sites can appear on page one of Google&#8217;s SERPs. What about the other 10,000 links Google delivers to its users?</p><p>Often, smaller sites employ paid links to drive site traffic. Google Adwords, for example, is a PPC (pay per click) means of building business. The important point is this: PPC programs have to more than pay for themselves in order for your site to remain a viable business.</p><p>Any form of paid linkage to one of your landing pages must deliver a nice ROI. And to do that, you need a fully-usable, engaging landing page. Otherwise, visitors won&#8217;t stick around long enough to read about your low prices and free shipping.</p><p><b>The Purpose of the Landing Page</b><br />While all site pages have a purpose (at least on well-designed sites) a landing page typically has a special or singular purpose: to sell a particular item, to announce a product sale, to entice visitors to opt in, complete a questionnaire or perform some other MDA (most desired action).</p><p>First determine the MDA the landing page addresses. Then, design everything &mdash; from headlines and text to graphics and pictures &mdash; to support the completion of the MDA.</p><p>Try to keep to one MDA per landing page. Again, the landing page has a specific purpose. Extraneous information, slow-loading videos and a confusing call to action are distractions, along with affiliate links, text links and unnecessary animations. All distract the attention of the viewer from your MDA.</p><p><b>Landing Page Design Principles</b></p><ol><li><p>Create a headline that accomplishes the following:</p><ul><li>tells the visitors that they&#8217;re on the right page;</li><li>clearly states the purpose of the landing page &mdash; the MDA;</li><li>engages the visitor, piques interest, encourages the reader to continue.</li></ul><p>The headline should be a grabber and appear &#8220;above the fold&#8221; &mdash; the top of your home page. That&#8217;s the most valuable real estate on your site.</p></li><li>Use short blocks of text and single sentences surrounded by negative space (white). Visitors tend to scan rather than read the entire page, even if the text is pure poetry.</li><li>And because readers <u>scan</u> instead of <u>read</u> site text, use lots of headers, sub-heads and bullet lists.</li><li>The first sentence of each block of text should provide the critical information you want to impart, again because visitors scan, often reading just the first sentence of a paragraph or block of text.</li><li>Employ an unambiguous call to action. &#8220;Order Now!&#8221; &#8220;Call now before you forget!&#8221; Leave no doubt what action is expected of the visitor. Calls for action can appear throughout the landing page text and a call to action should be the last thing visitors read.</li><li>Choose a type font that&#8217;s easy on the eyes. Avoid script fonts and fonts with lots of curly-Qs.</li><li>If the landing page sells one or more products, provide visitors with pictures of the products.</li><li>Prices, including shipping and handling costs, should appear below the fold. But they should definitely appear.</li></ol><p><b>Creating a Prominent Landing Page</b><br />If your landing page is also the home page, by definition it has prominence to visitors and to search engine spiders. However, if your landing page or pages are within the site, it&#8217;s important to make sure search engine spiders recognize the importance of this page within the site &mdash; its <u>prominence</u>.</p><p>Spiders use a number of criteria to determine a particular page&#8217;s prominence within the context of the entire site. Location is one criterion &mdash; the more clicks away from the home page, the less prominent &mdash; at least to the limited capabilities of current search engines.</p><p>Text is another criterion used to assess prominence. Keywords, keyword density and an automated comparison of keywords in the text against keywords in various HTML tags is another indicator of a page&#8217;s prominence.</p><p>Finally, the number of links pointing to a particular page is an important factor in assessing page prominence. The more links connecting other pages to your landing page, the more prominent it will be to search engines when your site is indexed.</p><p>This is especially important when landing page product offerings differ significantly from other products sold on the site. Search engines employ a mathematical taxonomy to classify each site within a particular category. So, if you market educational toys but introduce a landing page offering children&#8217;s books, it&#8217;s important for search engines to reevaluate the site&#8217;s taxonomy and to expand the site&#8217;s classification to include &#8217;sellers of children&#8217;s books&#8217;. One way to do this is to create links within the site all pointing to the landing page.</p><p>Landing pages are useful as motivators, as site directories, information sources and for many other valuable purposes. However, the development of an effective landing page takes careful thought and an understanding of what drives both humans and search engine spiders.</p><p>Generate increased site traffic and improve your conversion rate with a well-designed, well-written, well-placed and well-connected landing page on your site.</p> ]]></content:encoded> <wfw:commentRss>http://www.w3-edge.com/weblog/2006/07/landing-page-usability/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk
Database Caching 2/9 queries in 0.008 seconds using apc
Object Caching 584/594 objects using apc
Content Delivery Network via cdn.w3-edge.com

Served from: www.w3-edge.com @ 2010-09-02 14:59:53 -->