Update: Decided to build this out a bit more, so the demo below no longer reflects the original code. Be sure to check out the full Web App Tester Tool.

So, feeling a bit silly today after asking if there were any good iPhone simulators for the iPad last night. As I do more mobile web app development, it’s becoming more of a necessity to own the devices I want to test on. If I had a simulator for smaller devices on a tablet though, I’d be all set. The frugal spender inside of me likes that idea.

After discussing some ideas with Jason Gullickson, I realized that I had completely forgotten about iframes, and how they work well with media queries. Oops.

A few short lines of code later, I have a working simulator for 320x480px devices that changes from landscape to portrait mode automatically. It’s super basic right now, and I’d like to add some customization features (additional device sizes, URL entry, device back button), but this is a good starting point for testing. When running on a tablet, it should do an ok job of mimicking a handheld touch device like the iPhone.

It works for really simple testing on a desktop as well, sans-touch.

Download Web App Tester: Web App Tester (49KB, .zip)

Try Web App Tester (Hint: Resize your browser viewport to get portrait/landscape mode.)

Currently, the demo above will just load up jQuery mobile’s documentation in the browser. If you download the system, you can plug anything in the iframe src. I’d like to build out this system a bit more, and offer an online toolkit for testing sites on a variety of devices eventually. I’ll post an update when that’s available. Until then, you’re welcome to use/modify/whatever any of the code in the download above.

One last thing! I built this for Webkit browsers, so it will have problems running in IE, Mozilla, etc as it is.

The previous navigation system we prototyped fell short for a few reasons. While the idea of making so many choices readily available on every page seemed great, it actually was just bothersome when being used. There wasn’t enough of a cue when a new page was loaded—nearly half of the device screen was always identical (or near identical anyways).

I still think I want a good balance of “backwards” functionality, and easy access to some sort of global navigation system.

Thinking points:

• A literal “Back” button in the navigation seems like a bad idea. I’m assuming people understand their devices back button functionality similar to how they use the back button in a desktop browser.
• I want a “Home” button on pretty much every page. Seems even more important in mobile design that people have a way to ground themselves and reorient their location on a site.
• When visiting a page in a sub-section of the site, I want a button to quickly go to the root of that sub-section. IE: If I’m visiting a discussion thread of a forum, I want to quickly be able to travel to the default Forums view.
• Links in this header area have to really look like links or buttons.
• Trying a dropdown navigation that allows for quick traversing across the entire site (similar to our earlier idea). Less useful because you don’t see all the options without actually clicking it. More useful because it doesn’t take up nearly half a page, and still makes for quick navigation.

Will have to wait and see how right or wrong I am about any of these assumptions.

Adobe is helping bring CSS Regions to Webkit-based browsers with their latest proposed additions to the W3C CSS modules. They’ve also released a brief demo that extends the Webkit to show some basic implementations of CSS Regions and Exclusions.

Some highlights:

• Text can take the shape of polygons drawn in CSS.
• Text can flow in assigned order from one element to another (similar to the ‘flex-order’ property of ‘display: box’ items, but of course not constrained to the flexible box model).
• Text can avoid drawn polygons in CSS.

At the risk of losing nerd-cred, I never actually played the original Tribes. It seems to have almost a cult-like following, so it must have done something right.

Today, Atlanta-based Hi-Rez Studios released the first in-game screenshots of Tribes Ascend, the most recent installment from the series since 2004. Not sure how the game will actually play, but the art direction is very colorful and impressive.

Portal 2 is a puzzle/adventure game developed by Valve software, and sequel to the popular Portal released in 2007. It’s most well known for its gameplay mechanic of using “Portals” to travel through space to solve intricate puzzles called “Test Chambers”.

I’m a big fan of the series, and was thrilled with the production quality of the latest installment. As a tribute to the game, I’ve put together a collection of wallpapers using the in-game engine (with some levels adjustments, but no other post-processing). If you’re a fan of the game, you might enjoy some of these!

Download: Portal 2 Wallpaper Set (48 1920×1080 Wallpapers, 20.9 MB)

All wallpapers are 1920×1080. However, if anyone is feeling really generous and wants to donate one of these, I’ll happily recreate every wallpaper here in 2560×1440 resolution for you personally. You ask: why does anyone need a monitor that big? I say: why not marry small monitors if you love them so much.

Some small samples:

Messing around with ideas for persistent primary navigation for the new mobile version of UX Booth. All the color/graphics/typography are just placeholders. Andrew and Matthew don’t share my strange taste for blinding, super-saturated orange colors.

We’re running a special over at UX Booth this week where you can get 30% off the entire Rosenfeld Media Library. That’s about $60 off the physical collection, and $30 off the digital version. It’s quite the spectacular deal.

This seemed like the perfect opportunity to treat myself. The collection just arrived in the mail :)

The comment form here has been messed up, not allowing URL’s to be saved when adding a message to a post. Sorry about that, all fixed.

It was not adding any URL info into the database, so sadly I can’t see anyone’s website URL’s. Please to be adding them. Always enjoy seeing other people’s websites.

Since the initial work on CSSsitemap, Andrew Maier and I have been pretty busy working on an array of other tools that are a bit specific to a project we’re collaborating on presently. The result: almost no time has been invested in CSSsitemap since the first in-house version.

Rather than make an empty promise about how we’re going to build some cool features into it eventually, I’m just going to share the code now (it’s awfully simple at this point). Yes, we’re still working on a pretty cool set of tools for project documentation & UX designers, but it’s still sort of up in the air in regards to when and how we’ll share that system with the world.

Download: CSSsitemap System (.zip, 13.3 KB) | Demo

Code example:

<ul>
  <li><span>Fruit</span>
    <ul>
      <li><span>Apples</span></li>
      <li><span>Oranges</span></li>
      <li><span>Watermelons</span></li>
    </ul>
  </li><!-- Fruit -->
 
  <li><span>Vegetables</span>
    <ul>
      <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span>
        <ul>
          <li><span>Arugula</span></li>
          <li><span>Cabbage</span></li>
          <li><span>Lettuce</span></li>
          <li><span>Spinach</span></li>
        </ul>
      </li><!-- Leaf Vegetables -->
 
      <li><span>Root Vegetables</span>
      	<ul>
          <li><span>Beets</span></li>
          <li><span>Carrots</span></li>
        </ul>
      </li><!-- Root Vegetables -->
    </ul>
  </li><!-- Vegetables -->
</ul>

The system is intended for documenting pages in a website in a visual and functional way. It’s very straight forward: pages are presented in a branched format using unordered lists. URL information can be added to any item in the tree for quickly navigating complex sites.

This system was built for webkit browsers, and will probably not work as-is anywhere else at the moment. We recently used it in part of a documentation process for a 300-page website where it has helped tremendously (a preview of which is shown below, intentionally obfuscated).

To be clear, this isn’t a sitemaps to be used on websites to aid people in their navigation or for SEO purposes. This system is for internal use at the moment, which allows us to visualize the depth of a site, section content appropriately, and create useful flowcharts. Someday, we hope to integrate more powerful functionality directly into this system such as illustrating user flows with color coded paths, and methods for organizing and filtering parts of the sitemap in realtime.

Feel free to use however you’d like. If you do anything cool with it, be sure to let me know :)

Adobe Fireworks plays an integral role in my workflow when designing wireframes and prototypes. Sometimes, I’d like to create several pages that use the same guides in the same document. Unfortunately, there’s not an easy way to setup global guides that can be shared and modified with several pages.

Luckily, there is a way to copy + paste guides from one page to another using an extension by Sarthak Singhal. Copy Paste Guides allows you to copy guides from one page using the Commands menu, and paste them in another.

To install, download the extension from Adobe Exchange, and then install the Extension in Fireworks (Commands → Manage Extensions).