<?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>Webmonkey &#187; UI/UX</title>
    <atom:link href="http://www.webmonkey.com/tag/uiux/feed/" rel="self" type="application/rss+xml" />
    <link>http://www.webmonkey.com</link>
    <description>The Web Developer&#039;s Resource</description>
    <lastBuildDate>Fri, 05 Apr 2013 20:20:46 +0000</lastBuildDate>
    <language>en-US</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <generator>http://wordpress.org/?v=3.4.2</generator>
    
    <item>
        <title>Sneak a Peek at the Process Behind 37Signals&#8217; Redesigned Site</title>
        <link>http://www.webmonkey.com/2010/12/sneak-a-peek-at-the-process-behind-37signals-redesigned-site/</link>
        <comments>http://www.webmonkey.com/2010/12/sneak-a-peek-at-the-process-behind-37signals-redesigned-site/#comments</comments>
        <pubDate>Mon, 20 Dec 2010 18:37:44 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=49380</guid>
        		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[37signals]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[UI/UX]]></category>
        <description><![CDATA[If you&#8217;ve ever wanted a peek behind the scenes of a redesign, the 37Signals blog has a fascinating look at the design iterations for the company&#8217;s new website. 37Signals is best known for its Basecamp project management software and the Ruby on Rails platform, which grew out of the former. Even if you don&#8217;t like [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p>If you&#8217;ve ever wanted a peek behind the scenes of a redesign, the 37Signals blog has a fascinating look at the <a href="http://37signals.com/svn/posts/2705-behind-the-scenes-37signalscom-redesign">design iterations for the company&#8217;s new website</a>. </p>
<p>37Signals is best known for its <a href="http://basecamphq.com/">Basecamp</a> project management software and the Ruby on Rails platform, which grew out of the former.</p>
<p>Even if you don&#8217;t like the final design &#8212; and plenty of commenters on the blog post don&#8217;t seem to be big fans of the typography-focused redesign &#8212; the process behind it is worth looking at. Sometimes, seeing what ends up on the cutting room floor is more instructive than looking at the finished product.</p>
<p>The post should also make you feel a bit better if you too fail to magically draw up the right design on your first try. </p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/11/good-web-typography-is-easy-with-type-a-file/">Good Web Typography Is Easy With Type-a-File</a></li>
<li><a href="http://www.webmonkey.com/2010/06/design-for-readability-first/">Design for Readability First</a></li>
<li><a href="http://www.webmonkey.com/2009/10/boingboing_discovers_the_dark_side_of_css3/">Boing Boing&#8217;s Redesign Uncovers the Dark Side of Web Fonts</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/12/sneak-a-peek-at-the-process-behind-37signals-redesigned-site/feed/</wfw:commentRss>
        <slash:comments>1</slash:comments>

        
    </item>
    
    <item>
        <title>Browserling Puts Every Browser Inside Your Browser</title>
        <link>http://www.webmonkey.com/2010/11/browserling-puts-every-browser-inside-your-browser/</link>
        <comments>http://www.webmonkey.com/2010/11/browserling-puts-every-browser-inside-your-browser/#comments</comments>
        <pubDate>Wed, 24 Nov 2010 17:33:21 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=49203</guid>
        		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Web Services]]></category>
		<category><![CDATA[Browserling]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[UI/UX]]></category>
        <description><![CDATA[Developing a website that works well in all web browser isn&#8217;t easy, particularly if you&#8217;re using newer elements in HTML5. Even among modern, standards-compliant browsers, HTML5 support varies, and figuring out how and when to fall back on other solutions means a lot of cross-browser testing. Thanks to virtual machines, testing across web browsers has [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled --><iframe title="YouTube video player" class="youtube-player" type="text/html" width="580" height="356" src="http://www.youtube.com/embed/nsCWiBMcJlk" frameborder="0"></iframe></p>
<p>Developing a website that works well in all web browser isn&#8217;t easy, particularly if you&#8217;re using newer elements in HTML5. Even among modern, standards-compliant browsers, HTML5 support varies, and figuring out how and when to fall back on other solutions means a lot of cross-browser testing.</p>
<p>Thanks to virtual machines, testing across web browsers has become much easier. But if you&#8217;re looking for an even easier way to see what you site looks like in, say, Internet Explorer 6, check out <a href="http://browserling.com/">Browserling</a>, a new cross-browser testing tool that embeds any another browser inside your browser.</p>
<p>Browserling relies on Amazon-hosted virtual machines to do the embedding. The result is a real-time, fully interactive look at your site in virtually any Windows web browser, (Yep, it only works in Windows). It&#8217;s a step up from other web-based browser tests which just offer screenshots of what your site looks like in other browsers. </p>
<p>Unfortunately, as cool as the concept is, Browserling has a few drawbacks. The worst part of the service is that, for now anyway, you&#8217;ll be waiting in the queue for some time. To keep resources under control, Browserling severely limits the number of users connecting to the service at any one time. You&#8217;re also limited to how long you can use Browserlings VMs &#8212; 90 seconds is all you&#8217;ll get without creating an account. If you sign up you&#8217;ll have five minutes, which gives you a better chance to check out your website, but is hardly enough time for real testing.</p>
<p>The site advertises paid plans, which promise to let you ditch the queue and time limits, but at the moment the paid option isn&#8217;t actually available.</p>
<p>Our other main gripe is that while Internet Explorer is well represented &#8212; you can test in versions 5.5 all the way up to IE9 Beta &#8212; older versions of other browsers are scarce. While it&#8217;s true IE is probably what most developers are interested in, it would be nice to see older versions of Firefox, Safari and Opera supported as well.</p>
<p>While it would be premature to delete your own virtual machines, Browserling has potential. If Browserling can work out the kinks &#8212; we experienced numerous errors, crashing VMs and other problems, but it&#8217;s probably just getting smothered by hugs &#8212; it may eventually help take some of the pain out of cross-browser testing.</p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/10/using-the-new-features-in-adobe-browserlab/">Using the New Features in Adobe BrowserLab</a></li>
<li><a href="http://www.webmonkey.com/2010/11/new-ie9-preview-arrives-now-with-more-javascript-power/">New IE9 Preview Arrives, Now With More JavaScript Power</a></li>
<li><a href="http://www.webmonkey.com/2010/06/the-best-chrome-add-ons-for-web-developers/">The Best Chrome Add-ons for Web Developers</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/11/browserling-puts-every-browser-inside-your-browser/feed/</wfw:commentRss>
        <slash:comments>10</slash:comments>

        
    </item>
    
    <item>
        <title>Unleash an Army of Bees With Machine Guns on Your Website</title>
        <link>http://www.webmonkey.com/2010/10/unleash-an-army-of-bees-with-machine-guns-on-your-website/</link>
        <comments>http://www.webmonkey.com/2010/10/unleash-an-army-of-bees-with-machine-guns-on-your-website/#comments</comments>
        <pubDate>Thu, 28 Oct 2010 21:52:48 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=49036</guid>
        		<category><![CDATA[Programming]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Testing]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/10/seabees_blue.gif" type="image/gif" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/10/seabees_blue.gif" alt="Unleash an Army of Bees With Machine Guns on Your Website" /></div>Want to know if your website can stand up to a sudden, massive deluge of traffic? Sure, you could use some of the available tools like Flood, JMeter or The Ginder. But none of those options have bees with machine guns. The news applications team at the Chicago Tribune, has released a new tool it [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p><a href="http://www.webmonkey.com/wp-content/uploads/2010/10/seabees_blue.gif"><img src="http://www.webmonkey.com/wp-content/uploads/2010/10/seabees_blue.gif" alt="" title="seabees_blue" width="188" height="187" class="alignleft size-full wp-image-49053" /></a>Want to know if your website can stand up to a sudden, massive deluge of traffic? Sure, you could use some of the available tools like <a href="http://httpd.apache.org/test/flood/">Flood</a>, <a href="http://jakarta.apache.org/jmeter/">JMeter</a> or <a href="http://grinder.sourceforge.net/">The Ginder</a>. But none of those options have <em>bees with machine guns</em>.</p>
<p>The news applications team at the Chicago Tribune, has <a href="http://blog.apps.chicagotribune.com/2010/07/08/bees-with-machine-guns/">released a new tool</a> it calls <a href="http://github.com/newsapps/beeswithmachineguns">Bees with Machine Guns</a> that uses Amazon EC2 servers to launch what amounts to a distributed DoS attack against your site. </p>
<p>Now only is it an incredibly handy way to load test a website under arguably more realistic conditions than you&#8217;d get with other load testing tools, Bees with Machine Guns has awesome print statements that will turn your terminal session into a war zone.</p>
<p>For example:</p>
<pre class="brush: js">
$ fab -f bees.py attack:http://YOUR-DOMAIN.com/,1000,100
Read 2 bees from the roster.
Connecting to the hive.
Assembling bees.
Each of 2 bees will fire 500 rounds, 50 at a time.
Stinging URL so it will be cached for the attack.
[localhost] run: curl http://YOUR-DOMAIN.com/ >> /dev/null
Organizing the swarm.
Bee 0 is joining the swarm.
Bee 1 is joining the swarm.
Bee 0 is firing his machine gun. Bang bang!
Bee 1 is firing his machine gun. Bang bang!
Bee 0 is out of ammo.
Bee 1 lost sight of the target (connection timed out).
Offensive complete.
     Target failed to fully respond to 1 bees.
     Complete requests:     500
     Requests per second:   81.670000 [#/sec] (mean)
     Time per request:      612.188000 [ms] (mean)
     50% response time:     358.000000 [ms] (mean)
     90% response time:     1541.000000 [ms] (mean)
Mission Assessment: Target successfully fended off the swarm.
The swarm is awaiting new orders.
Done.
</pre>
<p>Keep in mind that this is essentially a DoS attack. Launch it against a site that isn&#8217;t yours and very bad things will happen to you. But for testing your own site&#8217;s performance, Bees with Machine Guns is awesome &#8212; all you need is an EC2 account and the script.</p>
<p>Major bonus points if your site can fend off the bees with miniature pies:</p>
<p><object width="579" height="351"><param name="movie" value="http://www.youtube.com/v/Y6nshKhqyqU?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Y6nshKhqyqU?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="579" height="351"></embed></object></p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/10/development-tips-to-improve-your-code-quality/">Development Tips to Improve Your Code Quality</a></li>
<li><a href="http://www.webmonkey.com/2010/08/write-your-readme-before-your-code/">Write Your README Before Your Code</a></li>
<li><a href="http://www.webmonkey.com/2010/05/googles-new-cloud-storage-service-takes-on-amazon-s3/">Google’s New Cloud Storage Service Takes on Amazon S3</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/10/unleash-an-army-of-bees-with-machine-guns-on-your-website/feed/</wfw:commentRss>
        <slash:comments>1</slash:comments>

        
    </item>
    
    <item>
        <title>Firefox Offers a Taste of Tab Candy</title>
        <link>http://www.webmonkey.com/2010/07/firefox-offers-a-taste-of-tabcandy/</link>
        <comments>http://www.webmonkey.com/2010/07/firefox-offers-a-taste-of-tabcandy/#comments</comments>
        <pubDate>Fri, 23 Jul 2010 19:14:41 +0000</pubDate>

                <dc:creator>Michael Calore</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=48134</guid>
        		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[TabCandy]]></category>
		<category><![CDATA[UI/UX]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/07/tabcandy.png" type="image/png" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/tabcandy.png" alt="Firefox Offers a Taste of Tab Candy" /></div>Are you one of those hyper-multitaskers (aka insane weirdos) who keeps a bazillion browser tabs open at once? Here&#8217;s something for you, and for the tab-curious: Tab Candy, a new experimental feature in Firefox that groups tabs into topical clusters to improve your workflow. It&#8217;s made entirely with JavaScript and HTML. Firefox creative lead Aza [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled --><a href="http://www.webmonkey.com/wp-content/uploads/2010/07/tabcandy.png"><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/tabcandy.png" alt="" title="tabcandy" width="230" height="151" class="alignright size-full wp-image-48135" /></a>
<p>Are you one of those hyper-multitaskers (aka insane weirdos) who keeps a bazillion browser tabs open at once?</p>
<p>Here&#8217;s something for you, and for the tab-curious: Tab Candy, a new experimental feature in Firefox that groups tabs into topical clusters to improve your workflow. It&#8217;s made entirely with JavaScript and HTML.</p>
<p>Firefox creative lead <a href="http://www.azarask.in/blog/post/tabcandy/">Aza Raskin offers this synopsis</a>:</p>
<blockquote><p>With one keystroke Tab Candy shows an overview of all tabs to allow you to quickly locate and switch between them. Tab Candy also lets you group tabs to organize your work flow. You can create a group for your vacation, work, recipes, games and social sites, however it makes sense to you to group tabs. When you switch to a grouped tab only the relevant tabs are shown in the tab bar, which helps you focus on what you want.</p></blockquote>
<p>Here&#8217;s a video of Tab Candy in action.</p>
<p><object width="580" height="384"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13560319&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=13560319&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="580" height="384"></embed></object>
<p><a href="http://vimeo.com/13560319">An Introduction to Firefox&#8217;s Tab Candy</a> from <a href="http://vimeo.com/user532161">Aza Raskin</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>Tab Candy has been kicking around as a pre-release for a while, but it&#8217;s just now getting to the point where the Mozilla folks feel it&#8217;s ready to be tested by a wider audience.</p>
<p>If you want to try it out, head to Raskin&#8217;s site where you can download a <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/tryserver-builds/edward.lee@engineering.uiuc.edu-15284adb0a68/">TabCandy-enabled build of Firefox</a>. Note that this isn&#8217;t an extension, it&#8217;s a bleeding-edge build of Firefox with Tab Candy built in, so plan accordingly.</p>
<p>There&#8217;s also <a href="https://wiki.mozilla.org/Firefox/Projects/TabCandy/FAQ">an FAQ</a>, and <a href="http://feedback.mozillalabs.com/forums/56804-tabcandy">a feedback forum</a> you can use to get answers or submit requests.</p>
<p><b>See Also:</b></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/07/firefox-4-beta-2-due-next-week-adds-tabs-on-top-for-macs/">Firefox 4 Beta 2, Due Next Week, Adds Tabs on Top for Macs</a></li>
<li><a href="http://www.webmonkey.com/2010/06/mozilla-moves-tabs-to-the-top-for-firefox-4/">Mozilla Moves Tabs to the Top for Firefox 4</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/07/firefox-offers-a-taste-of-tabcandy/feed/</wfw:commentRss>
        <slash:comments>14</slash:comments>

        
    </item>
    
    <item>
        <title>An Alternate Version of Firefox&#8217;s Home Button</title>
        <link>http://www.webmonkey.com/2010/07/an-alternate-version-of-firefoxs-home-button/</link>
        <comments>http://www.webmonkey.com/2010/07/an-alternate-version-of-firefoxs-home-button/#comments</comments>
        <pubDate>Thu, 22 Jul 2010 18:15:55 +0000</pubDate>

                <dc:creator>Michael Calore</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=48110</guid>
        		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[Firefox Button]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/07/FirefoxButtonRaskin.jpeg" type="image/jpeg" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/FirefoxButtonRaskin.jpeg" alt="An Alternate Version of Firefox&#8217;s Home Button" /></div>Back at the beginning of July, we saw the release of Firefox 4 beta 1. The first beta version of Mozilla&#8217;s next browser shipped with some important user interface changes &#8212; most notably, Windows users got tabs-on-top and the new Firefox Button. It&#8217;s a button that sits at the top of the browser window and [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p><a href="http://www.webmonkey.com/wp-content/uploads/2010/07/FirefoxButtonRaskin.jpeg"><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/FirefoxButtonRaskin.jpeg" alt="" title="FirefoxButtonRaskin" /></a></p>
<p>Back at the beginning of July, we saw the <a href="http://www.webmonkey.com/2010/07/firefox-4-beta-1-now-available-for-download/">release of Firefox 4 beta 1</a>. The first beta version of Mozilla&#8217;s next browser shipped with some important user interface changes &#8212; most notably, Windows users got tabs-on-top and the new <a href="http://blog.mozilla.com/faaborg/2010/07/18/details-about-the-firefox-button/">Firefox Button</a>. It&#8217;s a button that sits at the top of the browser window and contains all of the most-used menu options, neatly nested in hierarchical menus and accessible via one click.</p>
<p>The final browser isn&#8217;t expected <a href="https://wiki.mozilla.org/Firefox/4/Beta">until October</a>, but the team is still experimenting. The picture above is one such experiment, a rough first draft at &#8220;flattening&#8221; the new Firefox Button, which turns it into something less of a &#8220;Greatest Hits&#8221; menu and more of a browser dashboard.</p>
<p>Firefox creative lead <a href="http://www.azarask.in/blog/">Aza Raskin</a>, who really did this to satisfy his own curiosity, <a href="http://www.flickr.com/photos/azaraskin/4814044361/">writes</a>:</p>
<blockquote><p>
Hierarchical menus are almost always slower to use than flattened menus. This is a first-draft pass at flattening the Firefox Button&#8217;s menu. For things like accessing bookmarks, I&#8217;ve left the menu as a secondary action. In truth, I ran out of time while doing the bottom left hand corner of the mockup and so it is still very raw and not right. I&#8217;ve also moved more rich interactions to the right side pane. Letting us bubble up interesting add-ons and extension points inside the Firefox menu, as well as give real indication and controls to Sync.
</p></blockquote>
<p>Keep in mind that this design is just an idea and most likely will not be part of the next Firefox. But Raskin&#8217;s design could push the button in interesting directions.</p>
<p><b>See Also:</b></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/07/firefox-home-syncs-your-faves-to-your-iphone/">Firefox Home Syncs Your Faves to Your iPhone</a></li>
<li><a href="http://www.webmonkey.com/2010/07/firefox-4-beta-2-due-next-week-adds-tabs-on-top-for-macs/">Firefox 4 Beta 2, Due Next Week, Adds Tabs on Top for Macs</a></li>
<li><a href="http://www.webmonkey.com/2010/07/firefox-4-beta-1-now-available-for-download/">Firefox 4 Beta 1 Now Available for Download</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/07/an-alternate-version-of-firefoxs-home-button/feed/</wfw:commentRss>
        <slash:comments>3</slash:comments>

        
    </item>
    
    <item>
        <title>Firefox 4 Beta 2, Due Next Week, Adds Tabs on Top for Macs</title>
        <link>http://www.webmonkey.com/2010/07/firefox-4-beta-2-due-next-week-adds-tabs-on-top-for-macs/</link>
        <comments>http://www.webmonkey.com/2010/07/firefox-4-beta-2-due-next-week-adds-tabs-on-top-for-macs/#comments</comments>
        <pubDate>Thu, 15 Jul 2010 19:43:41 +0000</pubDate>

                <dc:creator>Michael Calore</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=48028</guid>
        		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Faaborg]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[Firefox 4]]></category>
		<category><![CDATA[UI/UX]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/07/appTabPandora.jpg" type="image/jpeg" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/appTabPandora.jpg" alt="Firefox 4 Beta 2, Due Next Week, Adds Tabs on Top for Macs" /></div>Mozilla hopes to deliver the second beta version of Firefox 4 to users before the end of next week, according to the minutes from its recent developer&#8217;s meeting. Tuesday&#8217;s meeting notes show the team has picked next Thursday, July 22 as the proposed ship date for Firefox 4 beta 2. There are several enhancements on [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p><a href="http://www.webmonkey.com/wp-content/uploads/2010/07/illustration.jpg"><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/illustration.jpg" alt="" title="Firefox 4 beta" /></a></p>
<p>Mozilla hopes to deliver the second beta version of Firefox 4 to users before the end of next week, according to the minutes from its recent developer&#8217;s meeting.</p>
<p><a href="https://wiki.mozilla.org/Platform/2010-07-13">Tuesday&#8217;s meeting notes</a> show the team has picked next Thursday, July 22 as the proposed ship date for Firefox 4 beta 2.</p>
<p>There are several enhancements on the way in beta 2, but the one sure to raise the most interest (or the biggest stink) is the new tabs-on-top interface for Mac OS X users. Windows users got the tabs-on-top look as the default interface in Beta 1 <a href="http://www.webmonkey.com/2010/07/firefox-4-beta-1-now-available-for-download/">earlier this month</a>. With beta 2, the rollout continues to other OSes.</p>
<p>The tabs-on-top interface is a growing trend among browser vendors. It was popularized by Google Chrome, which shipped with top-tabs as the default within its initial release. Reaction was mostly positive &#8212; Opera now puts the tabs on top, and Safari tried the same thing in a beta release thing before abandoning it. But there are some within the Firefox user community who don&#8217;t want to see Mozilla&#8217;s browser make the switch just to chase the latest design fad.</p>
<p>Mozilla&#8217;s lead user experience designer Alex Faaborg <a href="http://www.webmonkey.com/2010/06/mozilla-moves-tabs-to-the-top-for-firefox-4/">defends the decision</a>, saying it has nothing to do with fashion. By putting the tabs on top, <a href="http://blog.mozilla.com/faaborg/2010/06/24/why-tabs-are-on-top-in-firefox-4/">he argues</a>, Firefox 4 will be better suited to running web applications that sit in their own tab. It turns the tab bar into something much closer to a dock or a task bar &#8212; a fitting change, since the browser is becoming something much closer to a GUI for an operating system.</p>
<p>Here&#8217;s a mock-up showing several web apps running in top-placed tabs in Firefox. The browser may not end up with this design, but it nicely illustrates Faaborg&#8217;s idea.</p>
<p><img src="http://www.webmonkey.com/wp-content/uploads/2010/07/appTabPandora.jpg" title="appTabPandora" /></p>
<p>Here&#8217;s a seven-minute video his team produced that furthers the debate:</p>
<p><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/HmgtW2Iw-kE&amp;hl=en_US&amp;fs=1?hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HmgtW2Iw-kE&amp;hl=en_US&amp;fs=1?hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object></p>
<p>Of course, if you don&#8217;t like your tabs up top, you can always revert to the old look in the browser&#8217;s View menu.</p>
<p>Some other stuff due in Firefox 4 Beta 2: CSS transitions, better handling of retained layers on pages and a new feature in the add-ons manager that confirms when an add-on has been installed.</p>
<p>As always, Mozilla&#8217;s ship dates and feature lists (especially for beta releases) aren&#8217;t final. The team usually sticks to the proposed plan, but don&#8217;t be angry or surprised if the release slips to the following Monday.</p>
<p>The final browser is expected within a few months, and you can read <a href="http://www.webmonkey.com/2010/05/first-look-firefox-4-preview-delivers-speed-revamped-interface/">our preview of Firefox 4</a> on Webmonkey.</p>
<p><em>Illustration at the top courtesy of Mozilla. Firefox mock-up by Stephen Horlander and Alex Faaborg/Mozilla/CC.</em></p>
<p><b>See Also:</b></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/06/mozilla-moves-tabs-to-the-top-for-firefox-4/">Mozilla Moves Tabs to the Top for Firefox 4</a></li>
<li><a href="http://www.webmonkey.com/2010/07/firefox-4-beta-1-now-available-for-download/">Firefox 4 Beta 1 Now Available for Download</a></li>
<li><a href="http://www.webmonkey.com/2010/06/firefox-sync-graduates-from-labs-ready-for-firefox-4/">Firefox Sync Graduates From Labs, Ready for Firefox 4</a></li>
<li><a href="http://www.webmonkey.com/2010/05/first-look-firefox-4-preview-delivers-speed-revamped-interface/">First Look: Firefox 4  Preview Delivers Speed, Revamped Interface</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/07/firefox-4-beta-2-due-next-week-adds-tabs-on-top-for-macs/feed/</wfw:commentRss>
        <slash:comments>14</slash:comments>

        
    </item>
    
    <item>
        <title>Design for Readability First</title>
        <link>http://www.webmonkey.com/2010/06/design-for-readability-first/</link>
        <comments>http://www.webmonkey.com/2010/06/design-for-readability-first/#comments</comments>
        <pubDate>Thu, 10 Jun 2010 19:20:57 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=47685</guid>
        		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[safari 5]]></category>
		<category><![CDATA[Safari Reader]]></category>
		<category><![CDATA[Type]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/06/lettering.jpg" type="image/jpeg" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/06/lettering.jpg" alt="Design for Readability First" /></div>Safari 5&#8242;s seemingly innocuous new Reader feature, which isolates the text on a webpage making it easier to read, has sparked a surprising amount of outrage from web publishers who think Apple is trying to squash online advertisements and attack their livelihood. But there&#8217;s been an equally distinctive and vocal reaction from readers, one that [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled --><a href="http://www.webmonkey.com/wp-content/uploads/2010/06/lettering.jpg"><img src="http://www.webmonkey.com/wp-content/uploads/2010/06/lettering.jpg" /></a></p>
<p>Safari 5&#8242;s seemingly innocuous new <a href="http://www.webmonkey.com/2010/06/safari-5s-reader-simplifies-the-web/">Reader feature</a>, which isolates the text on a webpage making it easier to read, has sparked a surprising amount of <a href="http://jimlynch.com/index.php/2010/06/07/safari-reader-apples-weapon-of-mass-destruction/">outrage from web publishers</a> who think Apple is trying to squash online advertisements and attack their livelihood.</p>
<p>But there&#8217;s been an equally distinctive and vocal reaction from readers, one that can be summed up quite simply: &#8220;Thank you.&#8221;</p>
<p>Similar tools have been around for eons, starting with the &#8220;Print this page&#8221; link of the last century, all the way up to tools like <a href="http://lab.arc90.com/experiments/readability/">Readability</a>, whose code <a href="http://www.theregister.co.uk/2010/06/08/safari_reader_based_on_open_source_project/">Apple borrowed</a> for its browser. But the advent of Safari Reader seems to have galvanized a point of view that&#8217;s been brewing for a while: Webpages are too cluttered and difficult to read.</p>
<p>So publishers, listen up. Your readers, the people you depend on to reach your bottom line, have something to say. It&#8217;s a pretty simple message: Your webpages are hostile to reading. It&#8217;s time to start paying much closer attention to the design of your pages &#8212; not just to reduce clutter and make everything easier to read, but to make sure your text maintains that readability across the broad range of screen sizes, devices and browser configurations people are using today.</p>
<p>It&#8217;s telling that Apple, a company with a history of only adding the most-needed features to its products, decided its browser would benefit from a tool that strips away the clutter on a page. Of course, one could make the argument that Reader is simply a subtle attempt to <a href="http://www.wired.com/epicenter/2010/06/safari-5s-ad-blocker-nudges-web-publishers-to-app-store/">drive publishers toward Apple&#8217;s iOS platform</a>, where you can create apps filled with iAds that can&#8217;t be removed. However, it would be a shame if that&#8217;s the only message publishers took from Safari&#8217;s Reader. After all, Reader is not an ad blocker, and given that there are ad blockers available for every browser, Reader is hardly a new threat. Reader is only presented as an option after the page has loaded, the ads have been displayed and impressions (i.e., the money part) have been registered.</p>
<p>The message of Reader (and tools of its ilk) isn&#8217;t that the online publishing model is doomed, but that it desperately needs a reboot to get rid of all the junk that&#8217;s clogging up the whole point of the system: connecting readers with the information they want.</p>
<p>Savvy publishers have an inkling that something is wrong. The popular British news site <em>The Guardian</em>, for one. <em>The Guardian</em> notes in its <a href="http://www.guardian.co.uk/media/organgrinder/2010/jun/09/apple-ad-blocker-save-media?CMP=twt_gu">review of Safari 5&#8242;s Reader feature</a>, &#8220;technologies like Safari Reader sound a salutary warning to media companies and advertisers&#8230;. From now on, we must love our readers or die.&#8221;</p>
<p>But <em>The Guardian</em> is putting its money where it&#8217;s mouth is. The site recently launched its <a href="http://www.guardian.co.uk/open-platform">Open Content Platform</a>, complete with a <a href="http://explorer.content.guardianapis.com/">Content API</a> which allows anyone to grab an article from <em>The Guardian</em> and use it how they see fit &#8212; within the guidelines of <em>The Guardian</em>&#8216;s terms of service.</p>
<p>One of the best creations to come out of <em>The Guardian</em>&#8216;s new API is Phil Gyford&#8217;s <a href="http://guardian.gyford.com/">Today&#8217;s Guardian</a>.</p>
<p>The primary purpose of Today&#8217;s Guardian is to make reading news articles easier. For Gyford, that means eliminating distractions &#8212; sidebars are gone, comments zapped, menus pared down and page navigation radically simplified. We take issue with the removal of comments, but in short, it&#8217;s <em>The Guardian</em> redesigned with ease of reading as the primary goal.</p>
<p>As Gyford <a href="http://www.gyford.com/phil/writing/2010/06/09/todays-guardian.php">notes in his overview</a>, it&#8217;s &#8220;a shame that such tools are even necessary &#8230; if you were creating a site whose purpose is to provide articles to read, wouldn&#8217;t you want to make it perform that task really well?&#8221;</p>
<p>If you&#8217;re wondering what makes a more readable design, read through Gyford&#8217;s post first. Also check out Mandy Brown&#8217;s <a href="http://www.alistapart.com/articles/indefenseofreaders">In Defense of Readers</a> on A List Apart. It&#8217;s filled with excellent advice on what to think about when designing a reader-friendly layout. (She&#8217;s the creative director at <a href="http://www.etsy.com/">Etsy</a>.)</p>
<p>&#8220;Limit distractions to the full extent possible,&#8221; Brown writes. Pull quotes are great, she says, as long as they&#8217;re near the top of an article where they can draw a reader in. But they become distracting farther down. She also advises on white space, typographic treatments, and where best to place your visual distractions so you don&#8217;t foul up the reading experience (the top and the bottom).</p>
<p>Brown&#8217;s own site, <a href="http://aworkinglibrary.com/">A Working Library</a> is an exemplar of usability. Load it in Safari Reader and the only things that are removed are the header and footer.</p>
<p>A clean page layout falls apart when the proper attention isn&#8217;t paid to typography, and in that department, <a href="http://blog.romeda.org/2010/06/beautiful-lines.html">Blaine Cook has some homework for you</a>. He gives you a way to calculate the proper text size mathematically by sizing all of your text in ems. This makes it much easier to find the proper pairing of column width and text size, giving your readers an easier time no matter what resolution, browser, or device they&#8217;re using.</p>
<p>He points to two useful tools: his own <a href="http://github.com/blaine/republish/">RePublish</a>, which helps solve font-size issues across multiple screen resolutions, and Mathias Nater&#8217;s <a href="http://code.google.com/p/hyphenator/">Hyphenator.js</a>, a JavaScript library that intelligently reflows your text with <a href="http://www.mnn.ch/hyph/hyphenation1.html">clean hyphenation</a> so you can run justified columns.</p>
<p>Cook&#8217;s methods will &#8220;make your site look amazing on the shiny new devices,&#8221; he says, but they will also improve readability in a good old-fashioned desktop web browser. On that note, he warns against the common practice of designing different layouts and serving different stylesheets for different-size screens.</p>
<p>&#8220;You shouldn&#8217;t be optimizing for iPads,&#8221; Cook writes. &#8220;Or iPhones. Or iPhone 4Gs. Or Nexus Ones. Or 30-inch 90ppi screens, or 30-inch 300ppi screens. You should be optimizing for reading experience, and you should be using the best techniques available to do so.&#8221;</p>
<p>Advice? Links we should see? Put them in the comments below.</p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/06/safari-5s-reader-simplifies-the-web/">Safari 5’s ‘Reader’ Simplifies the Web</a></li>
<li><a href="http://www.webmonkey.com/2010/06/first-look-at-safari-5s-new-features/">Review: New Features Bring Safari 5 Up to Speed</a></li>
<li><a href="http://www.webmonkey.com/2009/12/designers__step_away_from_the_photoshop/">Designers, Step Away From the Photoshop</a></li>
<li><a href="http://www.webmonkey.com/2010/05/where-on-the-web-is-html5/">Where on the Web Is HTML5?</a></li>
</ul>
<p><em>Photo: Vlasta2/<a href="http://www.flickr.com/photos/bluefootedbooby/3763842999/">Flickr</a>/CC</em></p>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/06/design-for-readability-first/feed/</wfw:commentRss>
        <slash:comments>40</slash:comments>

        
    </item>
    
    <item>
        <title>Safari 5&#8242;s &#8216;Reader&#8217; Simplifies the Web</title>
        <link>http://www.webmonkey.com/2010/06/safari-5s-reader-simplifies-the-web/</link>
        <comments>http://www.webmonkey.com/2010/06/safari-5s-reader-simplifies-the-web/#comments</comments>
        <pubDate>Tue, 08 Jun 2010 18:22:41 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=47636</guid>
        		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[safari]]></category>
		<category><![CDATA[safari 5]]></category>
		<category><![CDATA[Safari Reader]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/06/reader.jpg" type="image/jpeg" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/06/reader.jpg" alt="Safari 5&#8242;s &#8216;Reader&#8217; Simplifies the Web" /></div>Steve Jobs hates your website&#8217;s design. That&#8217;s the impression we&#8217;re left with after playing with Safari 5&#8242;s new feature, Reader. It takes a web page and, in Apple&#8217;s words, &#8220;removes annoying ads and other visual distractions from online articles,&#8221; presenting a clean, uncluttered version of the page content. To try it out &#8212; head the [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p><a href="http://www.webmonkey.com/wp-content/uploads/2010/06/reader.jpg"><img src="http://www.webmonkey.com/wp-content/uploads/2010/06/reader.jpg" alt="" title="reader" width="580" height="355" class="aligncenter size-full wp-image-47637" /></a></p>
<p>Steve Jobs hates your website&#8217;s design.</p>
<p>That&#8217;s the impression we&#8217;re left with after playing with Safari 5&#8242;s new feature, Reader. It takes a web page and, <a href="http://www.apple.com/safari/whats-new.html#reader">in Apple&#8217;s words</a>, &#8220;removes annoying ads and other visual distractions from online articles,&#8221; presenting a clean, uncluttered version of the page content.</p>
<p>To try it out &#8212; head the Safari download page and <a href="http://www.apple.com/safari/download/">grab a copy of Safari 5</a>, which was made available Monday for Mac OS X and Windows. Click the Reader button (located in the URL bar once a page loads) and Safari 5 will overlay the current page with a black shade. You can also launch it with a keyboard shortcut (Command-Shift-R on a Mac, Esc to exit). The main article on the page is shown against a plain white background, stripping away ads, sidebars, headers and footers. Also, Reader pulls multiple-page articles into the window, so once you hit the first page, you don&#8217;t have to click anything to read more. Just scroll down, and the extra pages are tacked on at the end automatically.</p>
<p>The result is a clear message to web designers: Your designs are failing your readers. In contrast to what we all see everyday, Reader&#8217;s vision of the web is a very clean and more readable place &#8212; there are no distractions, nothing competes for your attention, the web page is suddenly simple and elegant.</p>
<p>It&#8217;s no secret that most people spend very little time on a web page; sites have mere seconds to capture a reader&#8217;s attention. With so many sidebars, gadgets, animated ads and other confusion, is it any wonder that most people just move on?</p>
<p>Reader&#8217;s vision of the web doesn&#8217;t make sense on every site, but for long articles in particular, it&#8217;s a godsend.</p>
<p><em>Read our <a href="http://www.webmonkey.com/2010/06/first-look-at-safari-5s-new-features/">full walk-through of Safari 5</a> here on Webmonkey</em>.</p>
<p>Of course, Reader isn&#8217;t an entirely new idea. Browser add-ons and bookmark scripts like <a href="http://lab.arc90.com/experiments/readability/">Readability</a> have long offered the same feature (with customization options even), but this is the first time we&#8217;ve seen a browser ship with the feature. In that sense, Reader could be a signal of the tides changing.</p>
<p>On one level, Reader seems like it could hurt publishers by subtracting ad revenue, and it could hurt ad networks like Google&#8217;s. But Safari loads the entire page &#8212; ads and all &#8212; before it presents the Reader button in the URL bar. So, by the time the person clicks on the button and launches the Reader view, the ad impressions have already been counted. Reader also has the ability to string multiple pages together, and it appears as though Safari is loading all of the information (including the ads) from the next pages, but only displaying the text. Ad impression numbers should be unaffected by Safari Reader, but click-through numbers will no doubt go down. Also, we noticed some ads served within the text body made it through into the Reader view, so it&#8217;s not perfect at stripping out ads.</p>
<p>The message that ads are distracting is nothing new &#8212; ad blockers are as old as sin &#8212; but the the more interesting implicit message is that the web is currently a cluttered confusing mess. Or at least Apple thinks it is and, having used Reader all morning, we&#8217;re inclined to agree.</p>
<p>Apple&#8217;s vision of the web does not include Twitter sidebars, recently popular article links, fancy headers or sharing widgets. In short, Reader cuts through the distractions to the actual content. Of course, that&#8217;s exactly what good design should do in the first place &#8212; focus your attention on what&#8217;s important. If every web page were well-designed, there would be no need for Reader. Clearly, that&#8217;s not the case.</p>
<p>As web developers ourselves, we appreciate experimental page layout designs. But when it comes to actually reading things on the web, less is far more. In short, we&#8217;re hooked. Well, technically, we installed Readability in Chrome and Firefox, but conceptually, the idea of a cleaner, simpler, more readable web is a step forward.</p>
<p>What remains to be seen is how designer&#8217;s react to Reader. Some backlash seems inevitable; some sites may even go so far as to block Safari &#8212; though that would an extreme move given that just because you&#8217;re using Safari does not mean you&#8217;re using Reader. In fact, most users may not even notice or use the feature.</p>
<p>However, we&#8217;re hoping that not only will something similar appear in other browsers, but that web designers will focus on simplifying their designs. Reader takes things to an extreme. There are ways to give content focus without eliminating nearly everything, and we look forward to seeing that idea gain more currency.</p>
<p>We&#8217;re also looking forward to an iPhone version of Reader that eliminates iAds.</p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/06/apple-almost-releases-safari-5/">Apple (Almost) Releases Safari 5</a></li>
<li><a href="http://www.webmonkey.com/2009/12/designers__step_away_from_the_photoshop/">Designers, Step Away From the Photoshop</a></li>
<li><a href="http://www.webmonkey.com/2010/05/where-on-the-web-is-html5/">Where on the Web Is HTML5?
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/06/safari-5s-reader-simplifies-the-web/feed/</wfw:commentRss>
        <slash:comments>37</slash:comments>

        
    </item>
    
    <item>
        <title>Firefox Ditches the Dialog Box</title>
        <link>http://www.webmonkey.com/2010/06/firefox-ditches-the-dialog-box/</link>
        <comments>http://www.webmonkey.com/2010/06/firefox-ditches-the-dialog-box/#comments</comments>
        <pubDate>Thu, 03 Jun 2010 18:05:08 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=47579</guid>
        		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[Firefox 4]]></category>
            <enclosure url="http://www.webmonkey.com/wp-content/uploads/2010/06/ffmockupincontent1.jpg" type="image/jpeg" length="48000" />
                    <description><![CDATA[<div class="rss_thumbnail"><img src="http://www.webmonkey.com/wp-content/uploads/2010/06/ffmockupincontent1.jpg" alt="Firefox Ditches the Dialog Box" /></div>Get ready to say goodbye to Firefox&#8217;s multitude of dialog boxes. Recent design mock-ups show Firefox moving toward an &#8220;in-content&#8221; look where settings, the add-on manager, themes and other &#8220;things which formerly appeared in dialog boxes&#8221; will now become just another tab in your browser. The mock-ups were posted by Mozilla designer Stephen Horlander, who [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p><a href="http://www.webmonkey.com/wp-content/uploads/2010/06/ffmockupincontent1.jpg"><img src="http://www.webmonkey.com/wp-content/uploads/2010/06/ffmockupincontent1.jpg" alt="" title="ffmockupincontent" width="580" height="297" class="alignleft size-full wp-image-47581" /></a>Get ready to say goodbye to Firefox&#8217;s multitude of dialog boxes. Recent design mock-ups show Firefox moving toward an &#8220;in-content&#8221; look where settings, the add-on manager, themes and other &#8220;things which formerly appeared in dialog boxes&#8221; will now become just another tab in your browser.</p>
<p><a href="http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/">The mock-ups</a> were posted by Mozilla designer Stephen Horlander, who calls them a &#8220;work in progress&#8221; and notes that the final versions may differ significantly. At this point, the designs have a natural feel. To navigate through the various preference setting in Horlander&#8217;s mock-ups, you simply use the back and forward buttons as you would on any other web page.</p>
<p>While the final look may change, the move to in-content displays is already well under way. The recent <a href="http://www.webmonkey.com/2010/05/first-look-firefox-4-preview-delivers-speed-revamped-interface/">alpha testing release of Firefox 4</a> already has a tentative design for the new in-content Add-ons manager. Firefox has also long used in-content views for session restore, about:config, network error pages and phishing/malware warning pages. Horlander says that &#8220;future possibilities for integration are things like preferences, the library, home tab, tabcandy and about:firefox.&#8221;</p>
<p>Whether or not Horlander&#8217;s designs for the preferences panel and other UI elements make it in time for Firefox 4 remains to be seen, but the future of Firefox, and possibly browsers in general, is looking free of dialog boxes.</p>
<p>Firefox isn&#8217;t alone here. <a href="http://www.google.com/chrome">Google Chrome</a> displays its history pages, bookmarks, add-ons and other information with in-content tabs. <a href="http://www.opera.com/browser/">Opera</a> has long had similar designs. Other desktop apps are moving that way, too &#8212; recently Photoshop CS5 <a href="http://blogs.adobe.com/jnack/2010/04/polishing_the_adjustments_panel_in_cs5.html">removed a couple of dialogs</a> in favor of what Adobe calls &#8220;non-modal&#8221; windows.</p>
<p>While this trend has its detractors, the move is motivated by a desire to make software easier for beginners to use. It&#8217;s also evidence that designers are being influenced by the newer types of human interactions we&#8217;re seeing on new devices like the iPad and phones with touchscreens. Particularly, in-content designs are vastly preferable for tablets and mobiles, where the primary method of interaction is touch. Browsing on netbooks and other devices with smaller screens gets cluttered and confusing very quickly once you start opening additional windows and dialog boxes.</p>
<p>Even if you have a big screen, there are still advantages. In the browser anyway, in-content designs eliminate annoyances like the need to close a dialog box before interacting with the web page. And, it requires less brainpower from the user if the software maker can easily replicate the same design on all devices. So when you&#8217;re moving from Firefox on your 27-inch iMac to browsing with Firefox Mobile on your Android phone, it&#8217;s much more pleasant of a jump if all the controls and dialogs are in the same places on both platforms.</p>
<p>If you&#8217;d like to see more screenshots of the mock-ups, check out Horlander&#8217;s blog post which showcases several looks for both Windows and Mac OS X. As Horlander <a href="http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/#comment-5698">notes in the comments</a>, &#8220;designing something that will fit into a variety of Linux environments takes a little more thought&#8221; than Windows and Mac. For the time being, Linux users will have to use their imagination.</p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/05/first-look-firefox-4-preview-delivers-speed-revamped-interface/">First Look: Firefox 4 Preview Delivers Speed, Revamped Interface</a></li>
<li><a href="http://www.webmonkey.com/2010/06/firefox-3-6-4-isolates-flash-for-a-more-stable-browser/">Firefox 3.6.4 Isolates Flash for a More Stable Browser</a></li>
<li><a href="http://www.webmonkey.com/2010/06/firefox-sync-graduates-from-labs-ready-for-firefox-4/">Firefox Sync Graduates From Labs, Ready for Firefox 4</a></li>
<li><a href="http://www.webmonkey.com/2010/06/firefox-takes-its-first-steps-into-64-bit-territory/">Firefox Takes First Steps Into 64-Bit Territory</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/06/firefox-ditches-the-dialog-box/feed/</wfw:commentRss>
        <slash:comments>33</slash:comments>

        
    </item>
    
    <item>
        <title>Kiosk</title>
        <link>http://www.webmonkey.com/2010/02/kiosk/</link>
        <comments>http://www.webmonkey.com/2010/02/kiosk/#comments</comments>
        <pubDate>Mon, 15 Feb 2010 20:45:47 +0000</pubDate>

                <dc:creator>Webmonkey Staff</dc:creator>

        <guid isPermaLink="false">http://stag.wired.com/primate/?p=187</guid>
        		<category><![CDATA[Glossary]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[wiki]]></category>
        <description><![CDATA[The more modern definition of kiosk refers to public terminals that offer anything from internet access to travel information to ATM services. Electronic kiosks require a simple user interface and rugged hardware. Touchscreens enable a user to enter and display information without the need for a mouse or keyboard. Alternative input methods must be considered, [...]]]></description>

            <content:encoded><![CDATA[<!-- wpautop disabled --><p>The more modern definition of kiosk refers to public terminals that offer anything from internet access to travel information to ATM services. Electronic kiosks require a simple user interface and rugged hardware. Touchscreens enable a user to enter and display information without the need for a mouse or keyboard. Alternative input methods must be considered, however, for those who can&#8217;t use touchscreens, such as people with physical disabilities.

</p><div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/02/kiosk/feed/</wfw:commentRss>
        <slash:comments>1</slash:comments>

        
    </item>
    </channel>
</rss>