<?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>Brad Frost Web &#187; Brad Frost Web | For a Future-Friendly Web</title>
	<atom:link href="http://bradfrostweb.com/blog/tag/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://bradfrostweb.com</link>
	<description>Web Design, Music and Art</description>
	<lastBuildDate>Thu, 02 Feb 2012 01:25:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>For a Future-Friendly Web</title>
		<link>http://bradfrostweb.com/blog/web/for-a-future-friendly-web/</link>
		<comments>http://bradfrostweb.com/blog/web/for-a-future-friendly-web/#comments</comments>
		<pubDate>Mon, 03 Oct 2011 06:01:19 +0000</pubDate>
		<dc:creator>brad</dc:creator>
				<category><![CDATA[mobile]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[ffly]]></category>
		<category><![CDATA[future-friendly]]></category>
		<category><![CDATA[mobile first]]></category>
		<category><![CDATA[mobile web]]></category>
		<category><![CDATA[responsive web design]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://bradfrostweb.com/?p=1919</guid>
		<description><![CDATA[We need to start thinking and acting in a more future-friendly way when approaching web design. The diversity of web-enabled devices is increasing at an alarming rate. We have to rethink our content and the contexts in which our content is viewed.]]></description>
			<content:encoded><![CDATA[<p>I had the tremendous opportunity to travel back to my homeland of beautiful Pittsburgh, PA to speak at <a href="http://webdesignday.com">Web Design Day</a>, put on by two amazing people, <a href="http://www.jasonhead.com/">Jason</a> and <a href="http://www.valhead.com/">Val Head</a>.  It was a fantastic event with <a href="http://webdesignday.com/speakers.html">fantastic speakers</a> and a passionate audience.</p>
<p>I spoke about the need to think beyond the present web landscape and start to think and act in a <a href="http://futurefriend.ly">future friendly</a> way.  Here&#8217;s the video, slides and notes:</p>
<p><iframe src="http://www.slideshare.net/slideshow/embed_code/9516437" width="425" height="355" frameborder="0" style="display: block; margin: 0 auto; border: 4px double #CDCAA2;"></iframe><br />
<a href="http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web" class="center"><small>View on Slideshare</small></a>
</p>
<p><iframe src="http://player.vimeo.com/video/29961436?portrait=0&amp;color=be6700" width="650" height="366" frameborder="0" webkitAllowFullScreen allowFullScreen style="margin: 0 auto;"></iframe><a href="http://vimeo.com/29961436"  class="center"><small>View on Vimeo</small></a>
</p>
<ul>
<li><strong>The web is no longer one-dimensional</strong>. It consists of a plethora of devices, including smartphones, dumbphones, e-readers, tablets, netbooks, notebooks, desktops, game consoles, tvs and more.</li>
<li>This is just the beginning. There&#8217;s lots of known devices coming out right around the corner (Kindle Fire, web-enabled watches and more), but also tons of devices that haven&#8217;t been realized yet.</li>
<li><strong>The power of the web is in its ubiquity.</strong> The web&#8217;s superpower is its ability to go to more places than any proprietary solution.</li>
<li>There&#8217;s no such thing as future-proof, but we can take steps to be more future-friendly.</li>
<li>In order to think more future-friendly, we need to <strong>reconsider the content we create</strong> and the <strong>context in which people interact with our content</strong></li>
<li><strong>People&#8217;s capacity for bullshit is rapidly diminishing.</strong> We need to respect people&#8217;s time and give them relevant, purposeful content without the extra cruft. Check out <a href="http://www.flickr.com/photos/merlin/sets/72157622077100537/">Noise-to-Noise Ratio</a> by <a href="http://www.merlinmann.com/">Merlin Mann</a></li>
<li><strong>Content like water</strong>. Think of your core content as a fluid thing that gets poured into a huge number of containers. Get your content ready to go anywhere because it&#8217;s going to go everywhere.</li>
<li>We&#8217;ve gotten complacent with regards to user context. We assume they have capable machines with large screens when in fact user and device context is far more diverse.</li>
<li>The historic mobile context (user on the go) is still true, but people are using their mobile devices in a number of different ways. Check out <a href="http://www.lukew.com/ff/entry.asp?1263">When and Where Are People Using Mobile Devices?</a></li>
<li><strong>The mobile web browser is unique</strong>. It borrows conversions from both traditional web design but also from native mobile conventions.</li>
<li><strong>What about apps?</strong> <a href="http://bradfrostweb.com/blog/news/native-vs-web-is-total-bullshit/">&#8220;Native Vs Web&#8221; Is Total Bullshit</a>. There is a difference between sites and apps. Check out James Pearce&#8217;s fantastic article that breaks down the differences between sites and apps: <a href="http://tripleodeon.com/2011/09/of-sites-and-apps/">Of Sites and Apps</a></li>
<li>Invest in your content. Make a strong agnostic API that makes your product/service portable. Web publishing platforms are now in an awkward place where they need to export data to non-web platforms (native apps, in-store experiences, etc). Check out <a href="http://www.slideshare.net/yiibu/letting-go-9109114">Letting Go</a> by the ever-insightful <a href="http://yiibu.com">Yiibu</a>.</li>
<li><strong><a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a></strong> isn&#8217;t a panacea to the diversity issue (nor did it ever claim to be), but it&#8217;s an important step in the right direction. <strong>Embrace the squishiness.</strong></li>
<li>However, <strong>mobile is more than just a smaller screen</strong>. Luke Wroblewski&#8217;s <a href="http://www.lukew.com/presos/preso.asp?26">Mobile First</a> strategy tackles the need to design for mobile devices first.</li>
<li>The combination of mobile-first and responsive web design is a <a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">good idea</a>.</li>
<li>Progressive enhancement plays an essential role in future-friendly design. Check out Aaron Gustafson&#8217;s <a href="http://easy-readers.net/">Adaptive Web Design</a> and Filament Group&#8217;s <a href="http://www.filamentgroup.com/dwpe/">Designing with Progressive Enhancement</a>.</li>
<li><a href="http://www.slideshare.net/stephenhay/structured-content-first">Structured Content First</a>. Get back to basics. Semantic HTML markup is extremely portable and retains it&#8217;s meaning no matter what device accesses it.</li>
<li><strong>Design for Diversity</strong>. Does the user have a touch-enabled device? Are they navigating with a mouse and keyboard, D-pad, Blackberry pearl, etc, etc?</li>
<li><a href="http://globalmoxie.com/jhc/prez/teach-touch-bdconf.pdf">Design for touch</a>. Accommodate for fat fingers (meat sticks) and allow for more direct interactions</li>
<li><strong>Take advantage of the cascade</strong>. Top-to-bottom: go from most global to most specific. Left-to-right: go from most general shared properties (color, background, etc) to most specific (-webkit-box-shadow, etc)</li>
<li><strong>Progressively-enhance Javascript</strong>. Conditionally load scripts to take advantage of device capabilities and avoid breaking experiences. Check out <a href="http://www.modernizr.com/">Modernizr</a> and beware of false positives.</li>
<li>Check out <a href="http://mobilewebbestpractices.com">Mobile Web Best Practices</a> for information on how to approach and execute mobile web experiences.</li>
<li><strong>Separate sites aren&#8217;t scalable</strong> (m.site.com, tablet.site.com, tv.site.com, etc), but many times are necessary because the opportunity to do a full-blown redesign is out of the question.  Use this as an opportunity to create what will eventually become the full version of the site.  The mobile site might initially be limited due to the constraints of the project (lack of time, money, resources, etc), but nurture it and it can grow into a full-featured, mobile-first, adaptive web site. You can then bulldoze your clunky old desktop-only site.</li>
<li><strong>Embrace the unpredictability of the future</strong>. We don&#8217;t know what&#8217;s around the corner, but we need to be ready.</li>
<li>It&#8217;s going to be hard, but it&#8217;s <strong>100% necessary</strong>. This requires all of us working on these problems together in order to create a better future for the web.</li>
<li>Get <a href="http://futurefriend.ly">Future Friendly</a>.</li>
</ul>
<p><a href="http://futurefriend.ly"><img src="http://bradfrostweb.com/wp-content/uploads/2011/10/65-650x487.png" alt="Go forth and make future-friendly experiences" title="Future Friendly" class="aligncenter size-medium wp-image-1947" /></a></p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>The Importance of Temporary Landing Pages</title>
		<link>http://bradfrostweb.com/blog/web/the-importance-of-temporary-landing-pages/</link>
		<comments>http://bradfrostweb.com/blog/web/the-importance-of-temporary-landing-pages/#comments</comments>
		<pubDate>Fri, 10 Apr 2009 06:37:15 +0000</pubDate>
		<dc:creator>brad</dc:creator>
				<category><![CDATA[web]]></category>
		<category><![CDATA[best practices]]></category>
		<category><![CDATA[landing page]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://bradfrostweb.com/blog/?p=116</guid>
		<description><![CDATA[Website builds can be lengthy and involved processes.  Designers can easily develop tunnel vision focusing on the final build that they forget about the importance of a strong landing page to keep users happy in the meantime.  Gone are the days of the terrible-yet-oh-so-nostalgic &#8216;under construction&#8217; animated GIFS.  In their place are mostly functional, boiled-down websites capable of immediately satisfying users&#8217; primary goals. Why Bother with Landing Pages? Its easy to understand why web designers overlook temporary landing pages: tight [...]]]></description>
			<content:encoded><![CDATA[<p>Website builds can be lengthy and involved processes.  Designers can easily develop tunnel vision focusing on the final build that they forget about the importance of a strong landing page to keep users happy in the meantime.  Gone are the days of the terrible-yet-oh-so-nostalgic &#8216;under construction&#8217; animated GIFS.  In their place are mostly functional, boiled-down websites capable of immediately satisfying users&#8217; primary goals.</p>
<h2>Why Bother with Landing Pages?</h2>
<p>Its easy to understand why web designers overlook temporary landing pages: tight deadlines, the hassle of creating and maintaining a page that will only be discarded later, etc.  But there are immediate benefits of exerting that extra effort to develop a great landing page:</p>
<h3>You&#8217;re Building the Site Already</h3>
<p>You&#8217;re busy slicing and dicing the static content of your gorgeous future website, so before it gets chucked into a CMS, throw the skeleton up (header, footer, container) as your landing page.  Even though the full site is still being developed, site elements can be introduced and built upon later.</p>
<p>While developing the <a title="Owasso, OK Chiropractor - Complete Care Chiropractic" href="http://owassochiropractor.com/" target="_blank">Complete Care Chiropractic</a> website, I introduced what will later become functional elements of the site, but in the <span id="query" class="query">interim</span> are simply placeholder divs to frame the temporary content.</p>
<div id="attachment_119" class="wp-caption alignnone" style="width: 575px"><a href="http://owassochiropractor.com/"><img class="size-full wp-image-119" title="Complete Care Chiropractic - Owasso, OK" src="http://bradfrostweb.com/wp-content/uploads/2009/04/complete-care-chiropractic.jpg" alt="Complete Care Chiropractic" width="565" height="440" /></a><p class="wp-caption-text">Complete Care Chiropractic - the prettiest thing in the world? no. Beneficial? Absolutely.</p></div>
<p>Also keep in mind that the landing page will not be discarded, but rather dispersed when the full site gets developed.  For example, I created a &#8220;Make an Appointment&#8221; form that will later live on its own page, but in the meantime is readily accessible to any user looking to quickly book an appointment.  In fact, every element on the current page will be used elsewhere in the final build. Will it look the same? No. Will it be coded the same? Perhaps.<span id="more-374"></span></p>
<h3>Think of the Users</h3>
<p>Think of the site&#8217;s target audience and their need for your site. What are their primary goals in visiting your site? What would they benefit from more: a splashy hip graphic saying &#8220;coming soon!&#8221; or a one-page site that can help them acheive their primary goals.  I choose the latter.  Caution the user that the full site is on its way, but in the meantime you can&#8230;.</p>
<h3>Capture User Data</h3>
<p>I&#8217;ve seen tons of temporary sites that fail miserably in this department.  Users will navigate to the site, perhaps a site they are even excited about, and be stuck with a neat-o keen graphic and nothing else.  Temporary landing pages are perfect for generating buzz about an upcoming web project,  so why not turn your lack of site into a promotional opportunity. A simple newsletter signup notifying users on the website&#8217;s release can help your site gain momentum out of the gates, instead of wasting all those views on a cool looking graphic and nothing else.</p>
<h3>Search Engine Optimization</h3>
<p>Complete Care Chiropractic had no web presence prior to the site I&#8217;m currently developing.  Because of this, its imperative that I get something up NOW instead of waiting for the final product.  There needs to be substantial content online so Google knows what the site is about, we can start targeting keywords, and we can feel confident when providing the inbound link to relevant sites.</p>
<h2>What Not To Do</h2>
<ul>
<li><strong>Ignore a landing page all together</strong> &#8211; there are too many benefits landing pages provide</li>
<li><strong>Wait too long</strong> &#8211; stop perfecting the design and get something online, like yesterday. There&#8217;s plenty of time for perfection once you safely have a landing page up.</li>
<li><strong>Only include a graphic </strong>- a picture is worth 1000 words, but 1000 words doesn&#8217;t get you very far in regards to landing pages. Only providing graphics will keep your ADD users happy for about 2 seconds before they&#8217;re off to a cooler website.</li>
<li><strong>Not optimize your landing page</strong> &#8211; Why am I not seeing my site in Google? Maybe because the only thing in the body is an image tag with an alt=&#8221;splash page&#8221;. Instead,  use keyword-rich, relevant title, header and link tags to get started on optimizing your future site.</li>
<li><strong>Ignore email addresses you&#8217;ve gathered</strong>- You actually spent the time to collect important user data, and you aren&#8217;t marketing to them?! That doesn&#8217;t make a lot of sense. Try rewarding those early adapters instead with a discount or some cool incentives instead.</li>
</ul>
<h2>Conclusion</h2>
<p>Landing pages are a great way to jump start your site&#8217;s web presence and ease the transition from going to zero to full blown website launch.  Giving users the ability to meet their primary goals on your site will keep them happy until the rest of the site is built.  Capturing email address and other user info is a great way to build an audience once the site launches, and if you properly optimize the landing page, users AND search engines will keep coming back for more.</p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

