It’s actually super easy to do, and I’d recommend it for pretty much any webpage you use passively on a regular basis but which takes up valuable browser tabs and hog memory.

Fig. 1

Examples include Pandora, obviously, but also Gmail, Facebook, Twitter etc. Of course you could always download applications for all that but in my opinion it’s nice to not have to go through the hassle of installing Apps and cluttering your Applications folder with stuff.

Well let’s get on with the action!

Direct your Safari browser to http://pandora.com and once the page loads, go to FILE > OPEN IN DASHBOARD [Fig. 1]. Now you’ll have the option to select a certain area of the page, which means you can select only the music player. Now just select the area you want, which for me is the Pandora player and none of the other stuff. Now once you’ve selected the area you’ll see a purple ADD button in the upper right corner of Safari [Fig. 2].

Fig. 2

Fig. 3

The Dashboard will open automatically and you will see the widget. Now wait for it to load and you’ll be able to play music through it. The default setting is to only play music in the Dashboard which isn’t necessarily helpful. Your next step is to click on the (i)nformation symbol in the lower right corner of the new widget [Fig. 3] and uncheck “Only play audio in Dashboard.” This will keep Pandora playing even when you are not in the dashboard and you can get rid of that extra tab you’ve always got up.

Congrats, you’ve done it!

What’s it do?

Page Speed adds new tabs to the Firebug panel letting you “record” a page load, saving metrics on everything the browser pulled down. Then Page Speed examines the recorded metrics and provides a detailed performance analysis, including suggestions for tweaking your code. It will even find unused CSS in your style sheets and tell you precisely which lines you can remove.

There are loads of desktop applications and web sites that can give you similar stats and speed tips, but Page Speed’s integration with Firebug, robust data collection and smart analytical abilities really stand out. It’s no wonder Google used it internally.

Last month I wrote about 10 Firefox Add-ons for Web Designers. Less than a full day after its release, Page Speed is definitely #11 on that list, and easily in the top 5 must-haves.

The Vendor Client relationship – in real world situations

“Sir… we’re not the Taco Stand.”

“I had beef. Same thing as I had here.”

“You had the filet!”

“Yeah, cow.”

It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time. Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache.

Check out the full article here »

LoreM9:
I think that “dummy lipsum” add-on has to be the 11th add-on for web-designers! ^_^

What is lorem ipsum?

It is “a common piece of text used as mock-content when testing a given page layout or font.” It’s especially useful when you need to show how text will appear in your designs, but don’t have actual content. The fact that lorem ipsum is “dummy” text that has no readable meaning helps assure that people reviewing your design are not distracted by reading the content, and instead pay attention to the design itself.

You know all those times you’ve shown a design concept to your client or management and they’ve pointed out grammatical or spelling changes, despite you telling them that the text is just a placeholder? Irritating, isn’t it? Use lorem ipsum and you’ll nip that issue in the bud. Beware though, with lorem ipsum you’ll still hear comments like “What language is that? I don’t speak Latin, and I don’t think our customers do either…”

You might like a Firefox add-on, a desktop app, or maybe you prefer a web-based generator. Here’s a list with something for everyone:

Firefox Add-ons

• Dummy Lipsum
• Lorem Ipsum Content Generator

Desktop apps

OSX

• MacLorem (I tend to use this one most often)
• Lorem Ipsum Widget (dashboard widget)
• Corporate Ipsum (dashboard widget for Office Space fans)

Windows

• Lorem2Clipboard (I haven’t tested this one myself)
• Dummy Lipsum (I haven’t tested this one either)

Linux

• Lorem Ipsum Generator

Web-based

• Lipsum.com
• Designer’s Toolbox – Lorem Ipsum Generator (there is a truckload of other great designer resources on this site as well)
• Dummy Text Generator (a big thanks to Enzo Fiorello for suggesting this one)

Well, that’s my quick list. If you have one you’d  like to add, drop it into the comments.

My favorite line: “Double-space men! Increase your margins! That way they’ll think there are more of us than there really are!”

In case you missed it, be sure to check out the Font Conference. At least now we know where Papyrus was hiding out…

I recently wrote an article for Webdesigner Depot entitled Why Does Clean Markup Matter in Web Design. Here’s an excerpt:

Because the web is always in flux, it’s important to build sites that can grow with it and easily ride the current instead of drowning when a new wave approaches. Clean markup and building with web standards not only helps you do this, but will save both time and money.

I explain what “clean” markup is and why it is vital to any site. I also outline steps you can take to clean up your own markup and get into the habit of writing clean code.

Read the full article at Webdesigner Depot »

Here are 10 free add-ons covering everything from DOM inspection to screenshots, making designing and developing with Firefox a breeze.

1. Firebug + Firecookie + Codeburner

The first on our list of 10 is actually 3 separate add-ons but they are all meant to work together, and when combined they form one of the most powerful development tools available.

First and foremost, if you’re doing any sort of Javascript development Firebug is essential. Otherwise you’re really just stumbling around in the dark when it comes to debugging. Firebug not only gives you a robust error console, but also lets you add breakpoints in your code. Firebug’s HTML and CSS inspector gives you the freedom to either browse your source code in a collapsible tree, or click an element within the page to see its markup. Firebug also lets you edit your “live” HTML and CSS and instantly displays the results for you to review – no reloading, no saving.

Install the Firecookie add-on and Firebug gets a new super-power: complete cookie viewing and management. You can view the full content of each cookie, and even edit and delete them all from Firebug’s window.

Codeburner then rounds out the Firebug setup by adding a compete W3C reference lookup with search-as-you-type on HTML elements & attributes as well as CSS properties. Ever wonder which browsers support the text-transform CSS atrtribute? Codeburner will tell you that it’s buggy in IE7, but has full support in Firefox 3, Safari 3 and Opera 9.

Get Firebug, Firecookie, Codeburner

2. Web Developer Toolbar

If writing Javascript without Firebug is like fumbling in the dark, building a site without the Web Developer Toolbar is like blindfolding yourself, tieing your hands and and trying to run through the woods without hitting a tree. Disable your cache, images and cookies, switch style sheets by media type, auto-fill forms with temp data, outline certain element types, resize the browser window to common sizes and validate your markup – all from within one toolbar. The Web Developer Toolbar does a whole lot more and is always the first add-on I install in Firefox. Give it a try and you’ll wonder how you ever got along without it.

Get Web Developer Toolbar

3. Measure It

Ever need to know just how much space you have for a photo, or how wide a dynamically sized column is? This handy little guy lets you measure, in pixels, any area on the page. Super simple and super helpful.

Get Measure It

4. Colorzilla

Another very simple but very useful add-on that displays the RGB and HTML color codes directly beneath your cursor. With a click, Colorzilla will copy the HTML color code to your clipboard for use in your favorite editor.

Get Colorzilla

5. CSS Viewer

CSS Viewer takes one of the features in the Web Developer Toolbar and makes it a little easier. Just point your cursor at any element on the page and CSS Viewer will show you all of its CSS attributes, from size and position to fonts and colors, all in an easy to read overlay.

Get CSS Viewer

6. Screengrab

A simple screenshot tool, Screengrab will save the visible area or the complete page as a file on your desktop. You can choose to save as a png or jpg, and even auto-add a datestamp to the file name.

Get Screengrab

7. Gridfox

If you use grid layouts or want to learn how, Gridfox is for you. It displays a simple overlay on your page to help you align elements to both vertical and horizontal grid lines. You can easily set the column and row sizes and spacing, choose from left-aligned, right-aligned or centered layouts and set the opacity of the overlay.

Get Gridfox

8. Firefox Accessibility Extension

See how your pages will be displayed when viewed with assistive devices – high contrast, images disabled, etc.  This add-on will go a long way in helping you design accessible sites and includes links to FAE, WAVE and other accessibility evaluators.

Get Firefox Accessibility Extension

9. User Agent Switcher

If you swap style sheets or display alternate content based on which browser the user is viewing your site with, this add-on will tell Firefox to pretend it is another browser. Choose from Opera, Internet Explorer, or add your own custom user-agents to the list.

Get User Agent Switcher

10. PageDiff

Those of you familiar with the linux/unix “diff” command will instantly understand what this add-on does. Compare the source code of any two pages and see where they differ. This is very useful when comparing staging and production environments, or comparing a backup to a current deployment before restoring any code.

Get PageDiff

There are may ways to approach a wireframe, some highly detailed and others incredibly simple, and it’s important to choose the right one. If you over-simplify you can miss key elements, which leads to dead ends and surprises later in the project. If you over-complicate, you can get lost in the details.

The scale model of a skyscraper doesn’t include every doorknob, plumbing pipe and electrical outlet – and neither should your wireframe.

Just Three Files

The Low Voltage Wireframe is as simple as it gets aside from a bar napkin sketch (hey, they can be handy too). Just 3 files: an index, a style sheet and an XML file. When it comes time to make a new wireframe just update the XML file. That’s it.

1. index.php – This file does all of the heavy lifting for you by loading and parsing the XML and wraps it up nicely in a simple page structure. You can leave this file untouched, but it’s also easy enough to edit the HTML inside for a more customized layout.
2. style.css – Much like index.php you don’t need to edit this or even look at it, but can if you’d like to customize things.
3. data.xml – This is your content along with a couple of configuration lines. Here is where you list your pages, their child pages and any content.

This version makes use of PHP 5’s simplexml_load_file() function, but you can easily accomplish the same with PHP 4 and an XML parsing class.

View a working example.

Download files - Low Voltage Wireframe v1.0.zip

The Code

Let’s take a look at data.xml – the only file you’ll need to edit.

The <pagetitle> node will appear within the <title> and <h1> tags on your site. The <imagepath> node specifies your image folder. It’s optional, but can come in handy. More details on that later.

<?xml version="1.0"?>
<root>
<config>
<pagetitle>Low Voltage Widgets</pagetitle>
<imagepath>img/</imagepath>
</config>

Now let’s define a page. Create a new <page> node, add a <title> node and put the page title inside of that. Now add some content text to the <content> node. Any text you add to the <content> node will display with line breaks intact, thanks to PHP’s nl2br() function.

<page>
<title>Home</title>
<content>
- masthead
- featured product
- latest blog posts
</content>
</page>

You can also define child pages (sub pages) using the <child> node. Just embed it within a <page> node.

<page>
<title>Products</title>
<content>
- masthead
</content>


<child>
<title>Blue Widget</title>
<content>
- description / copy
- add to basket
</content>
</child>


</page>

And finally, if you want to get fancy use the <image> node to drop images into your pages.

<page>
<title>Contact Us</title>
<content>
- map
</content>
<image>comment-box-okcancel.jpg</image>
</page>

This really comes in handy for using design patterns for mock forms, buttons or other higher-level functionality. Remember, a wireframe is supposed to save you time as a visualization tool, so you don’t want to waste time coding an actual form when a image of one will get the point across. Here I’m using a design pattern from Wellie to mock up a comment box.

And that’s it – you have a working, clickable wireframe in just a few minutes.

Wash, Rinse, Repeat

So you just got another client and you want a new wireframe just for them? Copy index.php, style.css and data.xml to a new folder, edit the XML file and bang – you have a whole new wireframe in less time than it took you to read this paragraph. No databases, no subscriptions or software to buy – just 3 files.

Killing Bees with a Sledgehammer

Wireframing is supposed to simplify your development work, save you time and make planning a breeze. Choose your wireframing tools and methods carefully, and don’t overcomplicate. Do you really need to fire up Visio for  a 10 page brochure site? Is PowerPoint really the right tool for that web store job, or is it better suited for making ugly slide shows?

The Low Voltage Wireframe is meant to be, above all else, simple and fast to assemble. It does a bang-up job for most sites, and can easily be modded into something more robust.

Still, sometimes you might need a more complex tool. There are loads of wireframing apps and websites out there that might fit your project better. Here are a few other solutions you may want to check out:

• Jumpchart – hosted, web based wireframing. Basic accounts are free, with premium options for a subscription fee.
• Gliffy – web based diagram software. Free 30 day trial, but otherwise commercial.
• OmniGraffle & OmniOutliner – commercial desktop apps for OSX that do a great job with more intracate outlines and function diagrams. Output as TIFF, JPEG, PNG, EPS, PDF or HTML.

As always, we’d love to hear your comments. Let us know how you’re using the Low Voltage Wireframe and how you’re modding it.

10 Volt Media’s site has also been featured in:

• Elite By Design – 30 Most Inspirational Blog Designs
• Nicole Tongson’s design blog (thanks Nicole!)
• Velvet Blues
• CSS Drive Gallery
• CSS Scoop
• Web 2 Inspiration
• Best Web Gallery
• Web Creme
• Submit CSS
• Red Hot CSS
• CSS Lounge
• CSS 2.0
• Make Better Websites
• FanatiCSS