In some ways, these tools are similar to Firebug, but they’re also uniquely Mozilla-ey.

Rather than try to reproduce Firebug or the WebKit developer tools, Mozilla has included only the most essential features, focusing instead on making the experience elegant.

Does the new approach work, or will designers run screaming back to Firebug? Let’s take a look.

You can pull up the Page Inspector by right-clicking a web page and choosing “Inspect.” (Firebug recently changed its context menu item to read “Inspect in Firebug,” so it will coexist peacefully with the built-in dev tools.) At the bottom of the screen, a purple bar appears with a list of the selected element’s parents and children.

You can click parents or children to select them, and you can right-click an element to see its siblings. There are also buttons labeled “Inspect,” “HTML,” and “Style.” If Firebug’s sea of tabs and buttons drove you up the wall, this layout will be a godsend. If just you want to see the DOM, having to click “HTML” first may drive you up the wall.

Digging in

Clicking the HTML button bring up a panel that shows the hierarchy of HTML tags that make up your page. In this view, you can expand and collapse tags and edit their attributes. Clicking the “Inspect” button lets you hover over elements to inspect them, and as you do so, Firefox highlights the element you’re inspecting and darkens the rest of the page.

Clicking the “Style” button brings up the Style Inspector, showing the CSS rules that apply to the selected element. In the Style Inspector, you can switch from “Rules” to a “Properties” section that gives you the computed CSS properties for the selected element, along with links to Mozilla’s documentation for each property.

The Style Inspector sits to the right of the page, while the Page inspector and HTML pane sit at the bottom of the screen. You can choose to display both panes, just one of them, or neither.

That basically covers the entirety of what the Page and Style Inspectors do. The web console and JavaScript scratchpad, introduced in earlier versions of Firefox, are separate tools. There is no network activity monitor. There’s no user agent switcher, no “edit as HTML feature,” no performance-testing tools, no way to inject new tags into a page, no way to activate an element’s hover state. There’s not even a “layout” panel for viewing the dimensions, padding, and margins of your element.

Despite all those limitations, I keep coming back to the Page and Style Inspectors. I come back for the uncluttered interface, the thoughtfully placed panes, and that funky purple chrome. I come back because they’re a pleasure to use, and because they meet my needs most of the time.

The inspectors’ simple UI also means that they’re useful even when I’ve made the window small to test responsive designs. When they don’t meet my needs, I just open Firebug or the Web Developer Toolbar. (I’d do this a lot less if the built-in dev tools had equivalents to Firebug’s Layout and Net panels.)

Mozilla’s development tools don’t have to match the feature set of their competitors’ tools, because the specialized features of those tools already exist as Firefox extensions. That’s what makes the Firefox dev tools unique.

These browsers go up to 11

In addition to the HTML and Style Inspector, some innovative features are slated for later releases of Firefox. Firefox 11’s developer tools let you view your web page as three-dimensional stacks of tags. Each time you nest a tag, that stack of tags gets taller. This feature is actually surprisingly helpful—you can see at a glance whether an element is inside the wrong parent, and seeing those tags pile up will cure new developers of div-itis right quick.

Also due out in Firefox 11 is a style editor. This is tool lets you create new stylesheets, much like any good text editor would. The main difference is that your changes are applied to live web pages as soon as you finish typing.

Previously, this sort of live CSS editing has been the domain of development environments like Espresso, so it’s awesome to see this feature built right into the browser. More features, including “tooling to assist with application performance issues,” are planned for later this year.

Even in Firefox 11, though, comparing the built-in dev tools with Firebug (or with the WebKit dev tools) is a little like comparing iOS with Android. The former has a clean, intuitive UI and some innovative ideas, but it’s short on power user features.

The latter has every feature that you can think of, and you can configure the blazes out if it, but it’s not quite as elegant as Cupertino’s wunderkind. Unlike iOS and Android, it’s easy to use both tools at the same time if you want. Mozilla continues to contribute to Firebug and has made it clear that Firebug is here for the long haul.

Which tool is right for you? That depends on what features you need, what features you can live without, and how you feel about hunting down extensions to fill in the gaps in your tool of choice. Whatever you think about the new developer tools, this is one area where you can’t accuse Firefox of aping WebKit.

Ryan DeBeasi is a front-end developer at the web design company 352 Media Group. He loves concise language, elegant design, strong coffee, and jazz. He spends far too much time on Twitter.

Are you excited about the new dev tools in Firefox 10? What are your go-to dev tools? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

Before we begin, let’s get take a sneak peak at what our final product will look like (click for a demo):

Please note: The purpose of this tutorial is to show how a simple script can be written using javascript and jQuery to enforce password complexity requirements. You’ll be able to add additional requirements to the script if needed; however, note that form validation (server- and client-side), form submission, and other topics are not covered in this example.

Step 1: Starter HTML

First we want to get our basic HTML starter code. We’ll use the following:

<!DOCTYPE html>
<html>
<head>
	<title>Password Verification</title>
</head>
<body>
	<div id="container">
		<-- Form HTML Here -->
	</div>
</body>
</html>

Step 2: Form HTML

Now let’s add the markup that will be used for our form. We will wrap our form elements in list items for better structure and organization.

<h1>Password Verification</h1>
<form>
	<ul>
		<li>
			<label for="username">Username:</label>
			<span><input id="username" name="username" type="text" /></span>
		</li>
		<li>
			<label for="pswd">Password:</label>
			<span><input id="pswd" type="password" name="pswd" /></span>
		</li>
		<li>
			<button type="submit">Register</button>
		</li>
	</ul>
</form>

Here’s an explanation of the code we used:

• span elements – these will be used for visual styling of our input elements (as you’ll see later on in the CSS)
• type="password" – this is an HTML5 attribute for form elements. In supported browsers, the characters in this field will be replaced by black dots thus hiding the actual password on-screen.

Here’s what we’ve got so far:

Step 3: Password information box HTML

Now let’s add the HTML that will inform the user which complexity requirements are being met. This box will be hidden by default and only appear when the “password” field is in focus.

<div id="pswd_info">
	<h4>Password must meet the following requirements:</h4>
	<ul>
		<li id="letter" class="invalid">At least <strong>one letter</strong></li>
		<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
		<li id="number" class="invalid">At least <strong>one number</strong></li>
		<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
	</ul>
</div>

Each list item is given a specific ID attribute. These IDs will be used to target each complexity requirement and show the user if the requirement has been met or not. Also, each element will be styled as “valid” if the user’s password has met the requirement or invalid if they haven’t met it (if the input field is blank, none of the requirements have been met; hence the default class of “invalid”).

Here’s what we have so far:

Step 4: Create background style

We are going to give our page elements some basic styling. Here’s an overview of what we’ll do in our CSS:

• Add a background color – I used #EDF1F4
• Add a background image with texture (created in Photoshop)
• Setup our font stack – We’ll use a nice sans-serif font stack
• Remove/modify some browser defaults

body {
	background:#edf1f4 url(bg.jpg);
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
	font-size:16px;
	color:#444;
}
ul, li {
	margin:0;
	padding:0;
	list-style-type:none;
}

Step 5: Create background style

Now we will style our main container and center it in the page. We’ll also applying some styles to our H1 tag.

#container {
	width:400px;
	padding:0px;
	background:#fefefe;
	margin:0 auto;
	border:1px solid #c4cddb;
	border-top-color:#d3dbde;
	border-bottom-color:#bfc9dc;
	box-shadow:0 1px 1px #ccc;
	border-radius:5px;
	position:relative;
}
h1 {
	margin:0;
	padding:10px 0;
	font-size:24px;
	text-align:center;
	background:#eff4f7;
	border-bottom:1px solid #dde0e7;
	box-shadow:0 -1px 0 #fff inset;
	border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
	text-shadow:1px 1px 0 #fff;
}

It’s important to note that we have to give our H1 tag a border radius on its top two corners. If we don’t, the H1′s background color will overlap the rounded corners of it’s parent element (#container) and it will look like this:

Adding border-radius to the H1 element assures our top corners will remain rounded. Here’s what we have so far:

Step 6: CSS styles for the form

Now let’s style our various form elements starting with the list elements inside the form:

form ul li {
	margin:10px 20px;

}
form ul li:last-child {
	text-align:center;
	margin:20px 0 25px 0;

We used the :last-child selector to select the last item in the list (button) and give it some extra spacing. (Note this selector is not supported in some legacy browsers). Next, let’s style our input elements:

input {
	padding:10px 10px;
	border:1px solid #d5d9da;
	border-radius:5px;
	box-shadow: 0 0 5px #e8e9eb inset;
	width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */
	font-size:1em;
	outline:0; /* remove webkit focus styles */
}
input:focus {
	border:1px solid #b9d4e9;
	border-top-color:#b6d5ea;
	border-bottom-color:#b8d4ea;
	box-shadow:0 0 5px #b9d4e9;

Notice that we calculated our input element’s width by taking the #container width (400px) and subtracting the margins, paddings, and borders applied to the input’s parent elements. We also used the outline property to remove the default WebKit focus styles. Lastly let’s apply some styles to our other form elements:

label {
	color:#555;
}
#container span {
	background:#f6f6f6;
	padding:3px 5px;
	display:block;
	border-radius:5px;
	margin-top:5px;
}

Now we have something that looks like this:

Step 7: Button Styles

Now we are going to style our button element. We’ll use some CSS3 styles so users with newer browsers get a better experience. If you’re looking for a great resource when creating background gradients in CSS3, check out Ultimate CSS Gradient Generator.

button {
	background: #57a9eb; /* Old browsers */
	background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
	background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
	border:1px solid #326fa9;
	border-top-color:#3e80b1;
	border-bottom-color:#1e549d;
	color:#fff;
	text-shadow:0 1px 0 #1e3c5e;
	font-size:.875em;
	padding:8px 15px;
	width:150px;
	border-radius:20px;
	box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
	background: #3a76c4; /* Old browsers */
	background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
	background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
	box-shadow:none;
	text-shadow:0 -1px 0 #1e3c5e;
}

Step 8: Password Information Box

Now we are going to style the box that informs users if they are meeting the password requirements. First, we will style the containing element (#pswd_info).

#pswd_info {
	position:absolute;
	bottom:-75px;
	bottom: -115px\9; /* IE Specific */
	right:55px;
	width:250px;
	padding:15px;
	background:#fefefe;
	font-size:.875em;
	border-radius:5px;
	box-shadow:0 1px 3px #ccc;
	border:1px solid #ddd;
}

Now let’s add some style to the H4 element:

#pswd_info h4 {
	margin:0 0 10px 0;
	padding:0;
	font-weight:normal;
}

Lastly, we are going to use the CSS ::before selector to add an “up-pointing triangle”. This is a geometric character which can be inserted using it’s corresponding UNICODE entity. Normally in HTML you would use the character’s HTML entity (▲). However, because we are adding it in CSS, we must use the UNICODE value (25B2) preceded by a backslash.

#pswd_info::before {
	content: "\25B2";
	position:absolute;
	top:-12px;
	left:45%;
	font-size:14px;
	line-height:14px;
	color:#ddd;
	text-shadow:none;
	display:block;
}

Now we have this:

Step 9: Valid and invalid states

Let’s add some styles to our requirements. If the requirement has been met, we’ll give it a class of “valid”. If it hasn’t been met, it will get a class of “invalid” (default class). As for the icons, I am using two 16×16 pixel icons from the Silk Icon Set.

.invalid {
	background:url(../images/invalid.png) no-repeat 0 50%;
	padding-left:22px;
	line-height:24px;
	color:#ec3f41;
}
.valid {
	background:url(../images/valid.png) no-repeat 0 50%;
	padding-left:22px;
	line-height:24px;
	color:#3a7d34;
}

Because we haven’t included the JavaScript functionality that will dynamically change the “valid” and “invalid” classes, all requirements will appear as invalid (we’ll change this later). Here’s what we have so far:

Hide the Box

Now that we have everything styled exactly how we want it, we’re going to hide the password information box. We’ll toggle it’s visibility to the user using JavaScript. So let’s add the following rule:

#pswd_info {
	display:none;
}

Step 10: Grasping the scope

Here is what we want to accomplish with our script:

• When the password field is selected (:focus), show it
• Every time the user types a new character in the password field, check and see if that character fulfills one of the following password complexity rules:
  • At least one letter
  • At least one capital letter
  • At least one number
  • At least eight characters in length
• If it does, mark that rule as “valid”
• If it doesn’t, mark that rule as “invalid”
• When the password field is not selected (‘:blur’), hide it

Step 11: Getting jQuery setup

First, we need to add jQuery to our page. We’ll use the hosted version. We also want to link to our “script.js” file, which is where we will write the code needed for our password verification test. So, add the following to your <head> tag:

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="script.js"></script>

In our “script.js” file, we’ll start with some basic jQuery starter code for our script:

$(document).ready(function() {

	//code here

});

Step 12: Setting up the event triggers

Essentially we have three events we will be listening for:

1. “Keyup” on the password input field
   (triggers whenever the user pushes a key on the keyboard)
2. “Focus” on the password input field
   (triggers whenever the password field is selected by the user)
3. “Blur” on the password input field
   (triggers whenever the password field is unselected)

As you can see, all the events we are listening for are on the password input field. In this example, we will select all input fields where the type is equal to password. jQuery also allows us to “chain” these events together, rather than typing out each one. So, for example, rather than typing this:

$('input[type=password]').keyup(function() {
	// keyup event code here
});
$('input[type=password]').focus(function() {
	// focus code here
});
$('input[type=password]').blur(function() {
	// blur code here
});

We can chain all the events together and type the following:

$('input[type=password]').keyup(function() {
	// keyup code here
}).focus(function() {
	// focus code here
}).blur(function() {
	// blur code here
});

So, with that knowledge, let’s create our code that will show or hide our password information box depending on whether the password input field is selected by the user or not:

$('input[type=password]').keyup(function() {
	// keyup code here
}).focus(function() {
	$('#pswd_info').show();
}).blur(function() {
	$('#pswd_info').hide();
});

You will now notice that by clicking in the password input field, the password information box will be visible. Likewise, by clicking outside the password input field, the password information box will be hidden.

Step 13: Checking the complexity rules

All we need to do now is have the script check the value in the password field every time a new character is entered (using the ‘keyup’ event). So, inside the $('input[type=password]').keyup function we’ll add the following code:

// set password variable
var pswd = $(this).val();

This sets up a variable named ‘pswd’ that stores the current password field value every time there is a keyup event. We will use this value in checking each of our complexity rules.

Validating the length

Now, inside the same keyup function, let’s add the following:

//validate the length
if ( pswd.length < 8 ) {
	$('#length').removeClass('valid').addClass('invalid');
} else {
	$('#length').removeClass('invalid').addClass('valid');
}

This checks to see if the length of the current password value is smaller than 8 characters. If it is, it’s get an ‘invalid’ class. If it’s bigger than 8 characters, it gets a ‘valid’ class.

Validating with regular expressions

As you saw above, we simply have an if/else statement that tests to see if the complexity requirement has been met. If the complexity requirement is met, we give it’s ID in the password box a class of “valid”. If it is not met, it gets a class of “invalid”.

The rest of our requirements will require we use regular expressions to test the complexity rules. So, let’s add the following:

//validate letter
if ( pswd.match(/[A-z]/) ) {
	$('#letter').removeClass('invalid').addClass('valid');
} else {
	$('#letter').removeClass('valid').addClass('invalid');
}

//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
	$('#capital').removeClass('invalid').addClass('valid');
} else {
	$('#capital').removeClass('valid').addClass('invalid');
}

//validate number
if ( pswd.match(/\d/) ) {
	$('#number').removeClass('invalid').addClass('valid');
} else {
	$('#number').removeClass('valid').addClass('invalid');
}

Here is an explanation of the three if/else statements we used:

[A-z]

This expressions checks to make sure at least one letter of A through Z (uppercase) or a through z (lowercase) has been entered

[A-Z]

This expressions checks to make sure at least one uppercase letter has been entered

\d

This will check for any digits 0 through 9

Step 14: Test it out

That’s all there is to it! You can add more to this if you want. You could add more complexity rules, you could add a submission method, or you could add whatever else you deem necessary.

Jim Nielsen considers himself a web designer at heart, though he often dabbles in other areas such as print and identity design. He loves acquiring new knowledge from the ever-expanding disciplines of the web. You can follow his latest happenings at his website www.jim-nielsen.com

Never Ending WordPress Business Bundle – only $14!

Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.

Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.

Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project.

What is Foundation?

Foundation is a framework for quickly prototyping and building responsive sites and apps. It allows you to rapidly put together pages, including layout and common elements like navigation, pagination, forms and more so you can see how your site works on desktops, tablets and phones. Then you can take that code and customize or adapt it into rock-solid production code.

Why was Foundation built?

We realized that the tools out there for building responsive sites – sites that work on any kind of device – were not only insufficient but really non-existent. There are a number of CSS frameworks that people are using, but everything was designed for fixed layouts. Mobile devices will account for over half of all Internet traffic in the next 2 years, so not designing and building for them is a death sentence for online products or services. We wanted a tool that would let us not only deliver a great experience to every device, but to very quickly test out what a great experience really looked and felt like.

Talk about a site you had to use Foundation for? How did it help? What issues did you have to deal with?

We’ve used Foundation for all of our internal sites and projects for the last several months, but if I had to pick one great example it would be a web app we released recently called Spur. Spur is a tool for doing traditional design critiques by letting you capture a web page, or upload an image, and then view it with blur, heightened contrast, rotation and other effects that reveal how the visual design holds up. We designed it from the ground up with Foundation to support desktops, tablets, and iPhones; all from the same front-end codebase.

If you pull up the app on different devices you’ll see different tools and subtly modified layouts all made possible with Foundation’s mobile visibility classes. These let you easily tag elements to be hidden or shown on specific types of devices, such as ‘hide-on-phones’ or ‘show-on-tablets’. That and Foundation’s inherent ability to scale to most any size meant that Spur has a slick, tailored experience for any device type with very little additional effort.

Working entirely with percentages of course adds some complexity, especially regarding images and the flexibility of certain objects like toolbars but beyond some specific CSS Foundation took care of almost everything.

Who should be using Foundation?

Anyone who wants their site or app to be relevant in a couple years should be building for multiple devices, and Foundation is a good tool for doing that. Foundation is perfect for new sites that you want to quickly prototype and build, since you can lay out entire sites in just a few minutes using the flexible grid and common elements already included.

We’ve found Foundation to be especially helpful for companies or organization who have concerns about the cost (in time and resources) to build for mobile devices – Foundation helps you do things quickly and all at once.

What’s the future for Foundation?

We’re constantly working on Foundation, adding common elements that people have requested or we’ve seen a need for. We just recently added a new four-column phone grid so you can do more complex layouts for very small devices, and we’ll continue to work on device and pattern support. We’re also considering things like page templates, code packs for specific uses like wireframing, and working with outside developers on plugins for other frameworks like Less, SaSS, Drupal, WordPress, etc.

Our goal is for Foundation to be more than just an open-source Framework but a complete community and development approach for the front-end. We’d love to have even more contributors, both in issues, feature requests, and code on Github and we’re happy to answer questions at  foundation@zurb.com.

Never Ending WordPress Business Bundle – only $14!

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.

Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.

The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.

Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.

Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.

Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.

Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.

Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.

Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.

A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.

Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.

Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.

Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.

CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.

20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.

Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.

A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.

Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.

Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.

The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.

Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.

To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.

The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.

11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.

Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.

Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.

Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.

CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.

Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.

How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.

Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.

How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.

Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.

Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.

Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.

Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.

Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.

Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.

Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.

Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.

FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.

Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.

The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.

Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.

Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.

Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.

Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.

Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.

Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.

Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.

The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).

Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.

Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.

Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.

Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.

1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.

320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.

Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.

Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.

Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.

Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.

SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.

Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.

responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.

Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.

Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.

Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.

Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span

Forgotten Presidents

Ben Handzo

Aaron Shekey

The Highway Hurricanes

dConstruct 2011

Merlin Ord & Media

The Happy Bit

Forefathers

Easy Readers: Adaptive Web Design

More Hazards More Heroes

Facts Regula

Hi, My Name is Andrew

Sifter

FoodDrinkEurope

The Obvious Corporation

Geek in the Park

Mapalong

JCHELBY

10K Apart

Expositio

Food Sense

New Adventures in Web Design Conference

Cisco London 2012

Team PAWS Chicago

Diablo Media

Andersson-Wise Architects

Designing with Data

Full Frontal 2011

Aaron Weyenberg

Web Design Yorkshire

Winnie Lim

Urban Svensson

Luke Williams

Upperdog

Writer

Toronto Standard

Design Professionalism

Impact Dialing

Modernizr

Johan Brook

Dust and Mold Design

Gridchin

Staffanstorp

El Sendero del Cacao

Dustin Senos

Kisko Labs

51bits

digitalHappy

Patrick Grady

Trent Walton

Headshift

Owltastic

WeeNudge

Ash Physical Training

Mark Boulton

The Modern Gentleman

Build Guild

Do Lectures

David Hughes

320 and Up

About.com

Really Simple

Splendid

Leica Explorer

Spigot Design

Cohenspire

Jason Weaver

Joni Korpi

iwantedrock.com

Converge SE

Pelican Fly

Simple Bits

Information Architects

Andy Croll

Hicks Design

8 Faces

The Sweet Hat Club

Little Pea Bakery

Sleepstreet

Andrew Revitt

Cujo.jp

Interim.it

Philip Meissner Design

Teixido

Transfinancieel

UX London

Jeremy Madrid

Brad Dielman

Thomas Prior

Clearleft

Herjen Oldenbeuving

Bureau

City Crawlers Berlin

CSS-Tricks

Robot…or Not?

Marcelino Llano

Caleb Ogden

A Flexible Grid

Simon Collison

More roundups

Here are some more great responsive design roundups from other sites.

• Responsive Web Design Techniques, Tools and Design Strategies: A very thorough roundup from Smashing Magazine.
• Responsive Web Design Articles, Tutorials & Guides: A high-quality roundup from Line25 with some great resources featured.
• 21 Top Tools for Responsive Web Design: A roundup from .net magazine that includes some great tools and resources for your responsive designs.
• 10 Excellent Tools for Responsive Web Design: This roundup from Six Revisions has ten excellent tools for responsive design, including text and image resizers and design frameworks.
• Responsive Web Design. Roundup from DesignFloat: A short roundup of other responsive design roundups, examples, and articles.
• Responsive Web Design: A Recap and Resources: This post from AIGA gives a quick overview of responsive design and offers some leading resources about the subject.

Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

It won’t be mobile apps. They’re all the rage these days. Tens of thousands of them being maintained by developers (which might be the same people who previously developed desktop apps). And they are giving those who support the open Web reason to worry.

Who knows, we might live in a future where the Web suffers a similar fate as the desktop application has — desktop applications are still being made, yes, but the future prospects are, at best, glum.

However, steps can be taken in order to save the World Wide Web, but getting there is a long and difficult path.

Web 1.0

The World Wide Web became a reality in 1990, when the first Web browser, Web server, and webpage were developed by Tim Berners-Lee. You could argue that he created the first Web app. And while it wasn’t dynamic and it wasn’t pretty, it was cause for celebration: a new wave of communication and information technology was upon us.

A recreation of the first webpage ever created.

What stemmed from a single server in 1990 turned to 26 in 1992 and over 200 in 1993. Sites like Google, Yahoo, MSN, Amazon, Craigslist, and Blogger followed thereafter. Sure enough, these websites were the beginning of incredible innovations to take place on the Web.

This period of innovation was at all all-time high heading into 2000: Internet speeds were getting faster, broadband was taking form, and millions of dollars were being made. The open Web was expanding at a hot clip, and everyone wanted to get in on the action.

Hype was also at an all-time high. Overzealous investors were throwing money at any entity that had a “.com” associated with it. Businesses could do no wrong.

But they could…

It all came to a climax in March 2000. It was at this very moment in time when things would never be the same. The stock prices of the Internet sector crashed, panic set in, and an endless supply of Internet companies were erased from existence. The “dot-com bubble” popped.

Web 2.0

Things were quiet on the Internet for awhile. Those companies that survived —Yahoo, Ebay, Amazon, Google and others — managed to stay on people’s radar through the early 2000s. But, overall, not much was going on. Innovation on the Web came to a standstill.

But it was only a matter of time before someone would change that. But no one could have known who that person was and how successful he would become. That person was Kevin Rose.

Digg might be down in the dirt lately, but Kevin Rose’s ambitious project did spur along a new age of startups and innovation that made the browser their home.

Other sites joined the party: Reddit was founded as direct competition to Digg, Flickr came onto the scene and changed how we could perceive photography, MySpace changed how people interacted with each other online, and Facebook doesn’t even need any explanation.

Blogs also took off in popularity, and entire businesses were built on blog platforms, something that was not possible a few years before.

Indeed, things were going well for Web 2.0. The browser and web app became king and the desktop application became irrelevant.

These companies were not going to make the same mistake like last time. No “dot-com bubble” here. So what could possibly go wrong?

The App

Well, there was this little thing called the iPhone — it proved to be a serious problem. But the real stars were the third-party developers who loaded the App Store with mobile applications that, at the time, were unrivaled by anything that was on the Web previously.

These applications created a new era of interactivity and information on the go that caused serious damage to the Web’s reputation. The Web was where you went to get information, but the smartphone was what you had if you wanted information to come to you. And developers of all kinds jumped on this opportunity, even Web developers.

Could you blame them?

The iPhone was a game changer. It was a new platform that gave new life to developers. Those who were out of jobs because of how poorly desktop software was selling had new reasons to be excited — this new platform could open up new doors.

But the iPhone did something even more important: it highlighted the fact that Web technologies were aging. They were not keeping up with the times; browsing the Web on a phone, back during this time, was a pain, and no one really wanted to do it. Of course, Apple changed all that with Webkit/Safari on the iPhone as well — it made browsing the Web on a mobile device something a person actually would want to do. So it is, in a way, a double-edged sword.

The technical, graphical, and interactive limitations of the Web had been exposed. Creating a mobile app was a much better solution for attracting eyes on a mobile platform. And if an existing Web application didn’t have a dedicated mobile app when the iPhone came around, there is little doubt in my mind that it lost out on many great opportunities.

Problems with the Web

Web technologies needed to adjust. Thankfully, they did — new and improved technologies like HTML5, CSS3, and JavaScript extended its support for mobile devices. Users were beginning to enjoy incredible experiences from their mobile devices; experiences not so different from what a full-fledged desktop browser would have provided.

And yet for all the things that the Web did right during this time, for all the advancements we have seen with HTML5, the fact still remains that the open Web is at a serious disadvantage when you compare it to a mobile application. Sure, the open Web can recreate similar experiences — and they might even one day be capable of rendering 3D graphics that rival those of game consoles and mobile apps — but a dedicated mobile app still has a few legs up that are not yet available through a mobile Web browser.

Attention/Accessibility

The first advantage that a mobile app has is the ability to keep a user’s attention. When a user interacts with their smartphone, the most easily accessible pieces of content on that phone are dedicated applications — if they want video, they visit the YouTube app; if they want Twitter, they click on TweetDeck; if they want weather, well, there are dozens of apps just to do that. The point being that this information and entertainment is a click away.

But you don’t have that convenience with a Web app, at least not without creating a shortcut or application shortcut that takes you directly to the website. In most cases users will decide to open up their browser, type in the URL, and wait for the webpage to load. Difficult? Not really. But is this method better (or more efficient) than a single click from a home screen on a smart phone?

Most consumers would rather have applications on their smartphone because it is the easiest way to access content. It is faster, easier, and, arguably, safer than fumbling with the browser and a URL bar. And while this issue of attention primarily comes down to time (or, arguably, laziness), the next issue is far more important; it might be the ultimate downfall of Web-based applications.

Notification

If a user is not being dinged, pinged, buzzed, alerted, or, as I will call it, notified, then that user is at a disadvantage.

We live in a world where information is always flowing towards consumers. At any given moment there will be a Tweet, status, news, text, e-mail, or any other type of notifications that can keep someone distracted. (We might even call this the age of distraction.)

Before the smart phone, websites only had one or two primary methods of notifying a user that something has happened: an email or, possibly, a text message (with the former being the most popular method).

People were more productive back then, too, I’m sure, but websites had fewer ways of keeping a user engaged. RSS came along in the late ’90s, but even as it evolved in the early- to mid-2000s, it still acted primarily as an email inbox for fresh content;  it still needed to be checked in order to be useful. Again, this was good for productivity, but not so good for Web developers wanting to keep the attention of their users.

Nowadays, however, mobile operating systems like iOS, Android, Blackberry OS, and Windows Phone 7 have made great strides in developing notification systems that enable applications to keep the user informed about what is happening. (I can’t go five minutes without my Droid X notifying me of an email, Twitter mention, or Facebook comment.)

Unfortunately, the same cannot be said for websites. Even with the drastic improvements made with Web technologies. It’s a serious problem, one that Fred Wilson, a venture capitalist, noted about how important mobile notifications have become:

Can HTML apps use the notification channel? Can developers get access to this notification channel and start to build filters and other obvious applications that we will all want and need when this becomes our primary way we use the mobile device?

Without the ability to provide notifications to users on mobile devices, Web apps don’t have a chance in competing with fully integrated applications that can provide notifications and feedback in an instant. Sure, websites can provide information, but they, alone, can’t provide interactivity and feedback that is comparable to their mobile counterparts.

API access

And then there is another serious issue — also mentioned by Fred Wilson — that revolves around the concept of always being logged in and having access to information from other applications. Native applications have a relatively easy time sharing information with each other. Mr. Wilson presented an excellent example:

Imagine you are building a mobile app that connects to the Facebook platform, the Twitter platform, the Foursquare platform, and the Google Maps platform. Assuming your users have all of those apps on their mobile, you can quickly and easily do the connections directly on the mobile device. And then you can pull data from those apps to create new experiences for the mobile users. You can create cross app notifications and other data driven experiences for users.

Web applications do not have methods to access this information. The phone’s information is effectively invisible to the Web app (although it is a different story for location data). Instead, a Web developer must go through a process of receiving permissions from each individual service through Web APIs. That can be a pain not only for the developer but for the user as well.

So, we know the problems. We know that Web apps are going to have a tough time in the future unless things change soon. But there are solutions. However, it is going to be a monumental task to make those solutions become reality. Still, it might be the last hope for leveling the playing field and keeping Web apps competitive on mobile devices in the distant future.

Fixing the problems

There are a few ways that all of the aforementioned issues can be fixed. But it will rely upon the likes of Apple, Google, Microsoft, Research In Motion, and other big-name companies to make it work.

Let’s talk first about the accessibility of the Web on mobile devices. Palm (now owned by HP) did it best with webOS. They made the Web an integral part of their platform and even had the applications themselves built using Web-based APIs and technologies. It was (and still is, as HP owns the technology) impressive and innovative. Unfortunately, I don’t see webOS gaining the popularity that its rivals have unless something drastic happens. But the integration with Web technologies is impressive, and it is an example that a company like Google should embrace.

It all raises a question: should there be a difference between a Web app and a mobile app on a mobile device, at least from the user’s perspective? Maybe. Maybe not. There are arguments for both sides. But my hope is that future iterations of mobile platforms will begin to treat Web apps more like native mobile apps — that Web apps will have the ability to integrate heavily with the operating system as mobile apps do. And if this happens, the open Web can have a chance to really compete on a level playing field. But it will take time to iron out the details.

The next issue is notifications. This issue could have two possible solutions: mobile operating systems will offer ways for websites to notify users, or a third-party developer creates a solution that will do it for them.

The latter is the most likely scenario; it is something I expect to see real soon — a company will create an application for Android, Blackberry, iOS, and others platforms that will allow websites to push notifications to that application. The application itself will then forward those notifications to the user’s device. And hopefully it will all be as seamless as notifications currently act on most mobile operating systems today. But balancing the control and frequency of these notifications and which notifications are allowed is crucial to the success of this type of service.

The final issue of accessing APIs and third-party data is also a tricky one. It’s all about security. Giving any or all websites access to personal information on a phone is a definite no-no. But I could imagine a future where — like you see today when you visit Twitter and other sites that allow ask for location data — websites will ask the user and phone for permission to access certain data. Users will then be able to allow those Web apps to access data. There should also be a way to manage these permissions on the phone, perhaps similarly to how users currently would when revoking permissions from third-parties within Facebook and Twitter.

This one will probably be left to the likes of Google, HP, and other web-oriented companies behind mobile operating systems to handle.

Conclusion

The World Wide Web has a future, and it always remain that way while traditional operating systems have control. But those days are slowly fading; it’s only a matter of time.

Mobile devices are the future, and whether it be tablet, smartphone, or other gizmo that has yet to be invented, they will compete with the open Web if things stay as they are. But if the companies involved find a way to communicate with websites that will allow them to notify users and share information with them and vice versa, the future for the Web will remain competitive.

But one point can’t be argued: the World Wide Web, as it stands today, is the easiest platform for which to create, distribute, and manage information and applications that are accessible to most, if not all, mobile devices and users today. And I, for one, hope that it will stay that way for a very long time.

Written exclusively for WDD by James Mowery. He is a passionate technology journalist and entrepreneur who has written for various top-tier publications like Mashable and CMSWire. Follow him on Twitter: @JMowery.

What/who do you think will save the World Wide web? Share below…

Never Ending WordPress Business Bundle – only $14!

Most developers now recognize that organized, valid code ensures maintainability and compatibility.

Anyone who doubts this merely has to speak to a developer who has picked up work on an old website that is littered with unorganized, uncommented spaghetti code.

Just as preparing our code to be read by other developers is important, so is preparing our code to be read by browsers. Great web development might start with great organization, but it ends with great optimization.

This article introduces best practices of front-end performance.

The Story of a Web Request

When a visitor requests a page from your website, several things happen:

• Your web server returns an HTML document;
• The visitor’s browser looks for and requests linked files (CSS, JavaScript, images);
• Your web server returns those linked files;
• The visitor’s browser displays those files, runs them or looks through them for more things to request (e.g. CSS background images).

While this process seems simple enough, a number of complications could really slow it down:

• Each requested file has headers that must also be sent. Sending many small files creates unnecessary overhead, which you avoid with a couple of big files.
• Most browsers are limited in the number of files they can download from one domain at a time. If you have 24 files to download from the same domain, the ninth won’t begin downloading until the first has finished.
• Many browsers block all parallel downloads when loading external JavaScript.

While all this might sound somewhat complicated, there are best practices to follow to make it much simpler. Both Google and Yahoo offer fairly comprehensive guidelines on taking website optimization to the extreme:

• Google Page Speed,
• Yahoo YSlow.

Many of their recommendations require a bit of work. Below are the five best things you can do today to improve your website’s performance with minimal effort.

5 Quick Changes To Improve Your Website’s Performance

1. Move your JavaScript to the Footer

Moving your JavaScript files to the page footer is the quickest and easiest thing you can do to improve performance. Many browsers block parallel downloads when loading external JavaScript files; by putting your files in the footer, browsers will begin loading other things first.

Look out, though, for side effects to timing and appearance. If you are using JavaScript to change the appearance of an element, it won’t be executed until after a longer time lag.

2. Put the CSS First

Loading the CSS first is just as important as putting the JavaScript at the end of the HTML document, for two reasons:

1. CSS often contains background images that require another round of requests. Getting these started ASAP is important.
2. Pages render as soon as the CSS is ready.

By putting the CSS at the top of the document, you ensure that all background images begin loading immediately and that your website renders as quickly as possible.

3. Compile and Minimize your CSS and JavaScript

When writing code for maintainability, using several different style sheets and JavaScript files often makes sense. When optimizing for performance, this is almost the worst thing you can do. With each file you add, a header needs to be sent and an additional request needs to make its way to and from the server.

Combine all of your CSS into one file and all of your JavaScript into another, and then minimize them both. (Don’t forget to put the CSS at the top of the HTML document and the JavaScript in the footer.)

Although recompiling and minifying your files after each change might sound like a pain, the performance difference is truly dramatic.

Compilation and minimization resources:

• Online CSS Compressor and Minifier,
• Online JavaScript Compressor,
• WordPress WP Minify plug-in,
• PHP5 library,
• Google’s Apache Module.

4. Beware Third-Party Scripts

Many websites today contain third-party scripts and widgets that load data from other servers. Examples are the Tweet Button, the Facebook fan box, the Share This button and even Google Analytics. You would think that these would all be well engineered, but many are not. For example, the Digg widget makes nine requests, is 52 KB and blocks the main page from downloading!

Use these widgets sparingly, measure their performance and look for asynchronous alternatives. Alternatives to the most popular widgets are available; installing them is slightly more complicated, but they perform much better. You can usually find them with a little digging.

Asynchronous widget resources:

• Google Analytics,
• Tweet Button,
• WordPress Asynchronous Widgets plug-in,

5. Measure Your Results

A number of great tools out there make it easy to measure the performance of your website. Some can be used in the browser; others are online:

• Firefox Firebug
  Check out the Net tab in Firebug to see a visual timeline of how long your website takes to load and why it’s so.
• YSlow for Firebug
  Yahoo has released a plug-in for Firebug that analyzes a website against its YSlow recommendations and suggests ways to improve performance.
• PageSpeed for Firebug
  This works just like YSlow but is based on Google’s PageSpeed recommendations.
• GTMetrix
  This tool takes a URL and delivers a full report on the website’s performance based on YSlow and PageSpeed. It’s convenient when Firebug isn’t available or you want to share the results via a link.

Going One Step Further

Most web developers could implement the five tips above fairly easily. That said, a number of other things are worth doing if you want to dig a little deeper and optimize your server’s configuration.

Add Expires Headers

Include an expires header with every file your server sends. This tells the browser how long the file is good for. This way, the browser knows to save the file for the next time it is referenced, so that the browser doesn’t need to fetch it again from the server.

Many websites include the same CSS file on every page, but there is no reason a visitor should have to download it for every page; the browser should know to cache it.

Use Gzip Compression

Today’s computers are really fast. Gzip compression takes advantage of this by asking the server to compress every file before sending it to the visitor.

The visitor’s browser then downloads and uncompresses it. In the past, we had to consider server resources in deciding whether to enable this. Today, there is essentially no downside to enabling gzip.

Consider Installing mod_pagespeed

Google has just released an Apache module called mod_pagespeed. It automatically implements almost all of the techniques in this article.

Understanding the techniques before implementing this module is still important, though; if you know how the website works, you’ll be able to take advantage of mod_pagespeed’s many filters. One such filter, Combine CSS, finds, combines and minifies all CSS referenced in the HTML.

The module has a number of filters and settings that could improve your website’s performance. All are worth looking at.

Conclusion

While not the most glamorous topic, optimization deserves more attention. Our job as developers is to learn the industry’s best practices in order to deliver the highest-quality work to our clients and users.

This post was written exclusively for Webdesigner Depot by Joel Sutherland, founder and web developer at New Media Campaigns. He is a part of the team that just launched HiFi, a modern content management system built for designers with their clients in mind. Follow Joel on Twitter or contact him on the HiFi website.

Do you know of an easy way to improve a website’s performance that wasn’t mentioned in this article? Please share it and your experience in the comments below.

Never Ending WordPress Business Bundle – only $14!

Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.

They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.

Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.

In this post, we’ll go over coding a basic wireframe image in HTML and CSS and see how it can benefit the creative process.

Why Bother?

Why spend time sketching a website’s structure? In some cases, it might be unnecessary, but it can help when you’re stuck in a rut or struggling to see the big picture.

It can benefit both designers and clients. In paid work, you’re responsible for pleasing the client. Showing the basic structure of their soon-to-be-designed website can give clients relief and a sense of control over the whole process.

But if the design is very basic or has a simple structure, then creating a wireframe might not be worth it; mocking up the entire thing in Photoshop, with buttons and color, might be just as quick.

Deciding what steps to take does require time and critical thinking. After all, a wireframe is merely a tool. It is underrated by many web designers but surprisingly useful once understood.

Prototyping Wireframes in Code

For years, Adobe design software has been the premier suite for wireframe creation, but the web has undergone substantial change and is still evolving.

The rise of coding standards and increase in HTML5 documentation are big steps towards a common web. Now, coding a basic wireframe in HTML and CSS is no more work than tackling the job in Fireworks.

With wireframes, you can attack a project head-on from multiple angles. You can even test for compatibility with CSS2 and CSS3 techniques and browsers. Things don’t need to be complex at the beginning; a wireframe simply serves as a solid foundation to begin coding.

Sharing content also becomes easier with a wireframe. You can host all the files you need on any web server, and you can set up a demo directory and forward live updates to clients and overseers of your project. Making changes, such as quick tweaks to margins and widths in the document’s CSS, is simple, too.

Standardize Code for the Long Haul

Wireframes save time in the development process. If the CSS styles for your basic elements are already written, then the rest is just filler (important filler, mind you).

Start out properly, with the correct HTML document type and directory structure. Document types aren’t too different from one another. You can read about them on the W3C Specs page. They don’t matter much in the old World Wide Web model, but HTML5 is thorough and allows your website to grow.

You have to test compatibility on as many operating systems and browsers as possible anyway, and the wireframe prototyping stage is the perfect time to do this, because you’re already focused on arranging the layout.

This is also a good time to work on a mobile-friendly template. As the structure changes, you should be able to incorporate ideas and manipulate the document’s code. Development becomes easier because there is less code to clutter up your mobile and custom styles.

Beginning the Structure of the Document Wireframe

The best way to start is with a blank slate, because it affords you the most creativity. The obvious elements to include in the code (as in any other web document) are html, head and body.

This is the skeleton. You’ll need a few more elements for the wireframe to look good. The div (or division) is notable. This is the element used to box certain areas of the page, such as the logo or search box.

Divs are the building blocks of HTML5 wireframe prototypes. Anything and everything can be enveloped in a div, and styling is a breeze when you apply classes and IDs to elements. Much of your main code will be split up by divs because they are the basic block elements.

With the new HTML5 specs, an element called nav has been introduced. This can be combined with an unordered list and some CSS properties to create and define your website’s main navigation area. Below is a simple example of how you could structure your nav:

<div id="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

Working With header and footer Elements

You’ll notice in the example above that I used a div with an ID of header to separate my heading navigation. This is perfectly acceptable and nothing is wrong with the above code. HTML5 gives us other options, though.

The header element in the new HTML5 specs allows you to further define your structure, which is useful mostly for web page crawlers and screen readers, which separate a “heading” portion of the content. It shouldn’t make any difference to your users, and it keeps your code shipshape and show that you really understand what you’re talking about.

Another interesting element that’s been added is footer. Same idea: use this element in place of a div to separate your footer content. Generally, footers are out of the way and contain basic information about the website or company.

You could add links to the footer and use a nav element to define some of them, but that would be ill-advised. The nav element specifies the main navigation area, so adding it to the footer or anywhere else would be redundant.

In this scenario, using the footer element and separating the navigation links as an unordered list is best. You could use a columned footer, with a number of columns of links. These could be separate div elements displayed next to each other, all wrapped in the main footer.

CSS Techniques for Styling Wireframes

If you understand HTML and have worked with the web for a while, then you probably know some basic CSS. Many of the new features of CSS3 are for adding fancy rounded corners and drop-shadows to text.

I don’t mean to suggest that CSS styling is not important, but the core layout and positioning is what ultimately makes your website’s structure. With CSS, you define width, margin and spacing. These are the basic properties of most web elements, and they’re the last step in creating a truly outstanding wireframe.

If you’re intrigued by CSS3′s new properties and selectors, then check out Webdesigner Depot’s collection of enhancements. It contains guides all over the web about the new features in CSS3.

Adding clearfix to Styles

If you are unfamiliar with the clearfix technique, do some research. It’s a popular class that you would add to a div container that holds two or more floating blocks.

If you’ve never heard of clearfix, it might seem confusing, but the concept is simple. Think of a container div that has two divs inside it, both floated left. By default, most browsers would render the two columns as directly touching each other, and the containing div would expand down the page to fit whichever column is longest.

By adding a clearfix class to your container, both columns will fit happily inside the container div, which expands down far enough to fit both elements. This solves many problems in wireframe prototyping, particularly with two-column layouts (i.e. the main content and the sidebar). This method will also work for three- and even four-column layouts, each column would just need to fit in a smaller space.

Displaying CSS: Keeping Styles External

What to do with CSS placement is another important decision. Professional web designers and developers simply suggest keeping an independent .css file, separate from your HTML code.

This way, the structure is in one document and the layout and design is in another. Both are equally important to wireframes, but they perform distinct tasks.

All of your HTML code is strictly structural. You can put links inside paragraphs inside container divs inside other containers, and so forth. Styling controls the size, spacing, margins and lettering of paragraphs and links, and the wireframe defines the width of containers and their placement on the page.

Page elements provide further examples. You would code the div containers for content and sidebars, but you would style and position them using CSS. For a designer, understanding how to separate content and style is key to mastering wireframes.

Implement Dynamic Page-Element Placeholders

Fancy jQuery effects and Ajax-ified web elements seem to be all the rage. Trends grow, and nearly all popular websites feature some dynamic content. It’s important to consider. If they complement the design, why not feature blocks in your wireframe?

Developing an entire back-end system for a dynamic log-in box might not be practical, but noting the JavaScript libraries you will need is a great start. You could also code styles that structure this box and set things in place for later, when you would add color and detail.

These themes can be applied across many interface elements. You could use search suggestions similar to Google’s or leave notes in your code to implement a dynamic news or Twitter-feed box, either of which would make your wireframe dynamic and provide an elegant way to represent a solid-state object in place of dynamic content. During the prototyping phase, this is all you need anyway.

Common Wireframe Development Mistakes

It’s difficult to go wrong when you’re just starting to code the basic structure of a website, but keep certain details in mind.

Remember that a wireframe’s purpose is to present a framework without much detail. It’s useful during the initial stages of planning the page elements; you can delve deep into your website and see the big picture.

Keep things simple and in order. Overlooking this is a common mistake and it will cripple your ability to meet deadlines. A wireframe doesn’t need to be anywhere near perfect; it’s supposed to be a rough outline of the website. Even a strictly HTML and CSS wireframe should consist only of page element outlines.

Avoid detours by focusing on your main goals. Remember why you started the process with a wireframe in the first place!

Wireframes can also solve many problems that beset the design process. Coding a prototype in HTML and CSS is the best way to get a head start on a web project, large or small. It’s a simple, efficient way to give shape to your ideas.

A ton of articles on the web relate to the wireframing process. I’ve covered the coding and development side of things, but to learn more about wireframing, keep reading. The design tips are out there; you just have to find them!

This post was written exclusively for Webdesigner Depot by Jake Rocheleau, a passionate web designer and social media enthusiast. Jake loves reading and writing about the latest digital Internet trends and networking in the design community. Check him out on Twitter @jakerocheleau for more about his work.

What are your experiences with the wireframe process? Do you work in code first or in some other type of software? What do you think are some benefits to prototyping in code first?

Never Ending WordPress Business Bundle – only $14!

Some may say that the premium WordPress space is getting a bit saturated, and they’re probably right. However, more premium theme providers does mean a wider selection for those seeking more than what a free theme can offer.

The only problem is being able to find quality and professionalism in the vast sea of premium themes. It seems that the majority of premium theme designs out there are lacking, and appear a bit amateurish.

So for this post, we’re showcasing 10 great places where you can purchase professionally designed WordPress themes.

All of these shops are run by either designers or people that understand design – and as you can see, it shows in the quality of each theme.

1. Theme Trust

Theme Trust creates beautiful WordPress themes that are dead simple to use. It’s a fairly new theme shop, but a high level of quality and attention to detail is evident in their themes.

2. Theme Shift

ThemeShift prides itself on creating “Professional” WordPress themes, and they do a great job at delivering on that promise. Their themes are all well designed and show a great attention to detail.

3. Themify.me

Themify.me is one of the latest to enter the premium WordPress theme business, but all of their themes look simply amazing.

4. The Theme Foundry

At the core of every Theme Foundry theme you will find some key ingredients: attention to detail, cleanliness, care, usability, and simplicity. The Theme Foundry is run by ex-NFL football player turned web designer, Drew Strojny.

5. Organic Themes

Organic Themes strives to create beautiful and unique WordPress theme designs that suit the needs of a variety of clients. They adhere to the belief that less can be more in terms of great design.

6. Elegant Themes

Elegant Themes are crafted with a goal of simplicity and professionalism. And each design is injected with a dose of modest elegance that lives up to the name.

7. Graph Paper Press

Graph Paper Press peddles minimalistic modular designs that can transform your blog from a tubular list of posts into an aesthetically-pleasing portfolio or news magazine website.

8. Pro Theme Design

Pro Theme Design emphasizes quality over quantity. This quality has led to enduring popularity in the WordPress themes community.

9. Obox

Obox Themes possess gorgeous design and functionality that you would normally only be able to attain from expensive, professional agencies.

10. Woo Themes

Woo Themes is by far the most popular WordPress theme provider. They’ve been around the longest and the majority of their themes look amazing.

Do you buy professionally designed WordPress themes? Which ones are your favorites?

Never Ending WordPress Business Bundle – only $14!

After all, there are plenty of great services out there that can slice up and code your files for you. But there are those cases when you may prefer to slice those designs by yourself.

That’s where From Photoshop to HTML: How to Slice Your Designs Like a Pro by Jeffrey Way, editor of Nettuts+, comes in.

In this 145-page book, the entire process of converting a .PSD file into a working website design is covered, in detail, with code examples.

A model site is used to walk readers through the entire process, step-by-step, with a single example. Everything from the basic coding to making your designs cross-browser compatible is covered.

On a daily basis—if you listen closely—screams can be heard around the world from coders unsuccessfully attempting to force a design into position. It’s not just a matter of learning the language; memorization is an easy task. The scream inducing points occur when you view your site in ten different browsers, all of which render your site at different levels of consistency.

The book assumes you have a basic working knowledge of CSS and HTML, as well as a design already created in Photoshop. The design used in the book is simple, but the concepts used to create the design can easily be applied to more complex designs.

The book starts out with a section on how to look at a design before you dive into the process of creating the HTML code.

While it might seem natural to immediately begin working on the visuals of our website, this actually couldn’t be further from the truth. Instead, we must first build our base, or the mark-up, and only once it’s been completed can we move on to the visuals.

Picking out the three basic sections most websites contain: a header, the main content area, and a footer, are covered, and then the book jumps right into the process of setting up your basic HTML file. Again, anyone with a basic knowledge of HTML will have no trouble with this part.

Once your basic HTML code is complete, From Photoshop to HTML covers how to slice up your .PSD files.

Take a moment to look over the design in Photoshop. Try to pinpoint each image that will be needed. Remember, may features can be recreated with CSS; so be creative.

While both methods for slicing up your files are mentioned, the book uses a combination of cropping, and cutting and pasting to grab the images you’ll need, rather than using the slice tool.

Both methods are perfectly valid. I recommend that you try both, and choose which ever proves to be fastest…for you.

Keyboard shortcuts for speeding up this process are covered in-depth. Saving these images for the web, including all the settings you should be using and which image file type to use for which types of images, is also discussed extensively, as are CSS sprites. Last but not least in this section, are some notes on adjustments that will then need to be made to the HTML file based on the background images being used.

Once your HTML and images are ready, it’s time to dive into the CSS for your site. Browser resets are stressed and covered in-depth, as well as how to rebuild a standardized, default CSS file.

Each browser utilizes a bit of “default CSS” to automatically style your markup. At first glance, you might think that this is extremely helpful…If every browser implemented them identically, this wouldn’t be a problem. Sadly, this is not the case.

A number of tips and tricks are covered for setting up your CSS files beyond that, including referring to your Photoshop file for text formatting values and using Fahrner’s Image Replacement Technique for part of the header. There’s also a large section on creating columns within your design, covering the concepts used extensively.

There are a number of CSS principles, including relative vs. absolute positioning and CSS shapes, covered in a practical and usable manner. For those who aren’t experts at CSS, these sections will be particularly informative, while those who are may want to skip over these parts. Another great bit of CSS code covered is how to create sticky footers, something that can be frustrating for new CSS designers.

The coding of additional pages beyond our home page is covered, including how to make slight adjustments to the layout and content, and what you’ll need to add to your CSS files. By the time you’re done with this section, you’ll have all the page templates necessary for a fully-functional portfolio website.

The final regular chapter in the book covers how to make your design cross-browser compatible, specifically when it comes to older browsers like Internet Explorer 6 and 7. One of the biggest issues covered at length is the lack of transparency handling in images in IE6, with a variety of solutions for overcoming it.

Viewing your website in Internet Explorer 7 and below for the first time will make you cringe. You might get lucky, but most of the time, you’ll find numerous issues that need to be fixed.

A bonus chapter at the end shows you how to create jQuery transitional effects, which are incorporated into the site design. For anyone new to JavaScript and jQuery, it’s an interesting project that teaches some basic techniques.

Overall, if you’ve been outsourcing the conversion of your .PSD files to HTML, or if you’ve been wanting to try out designing websites in Photoshop, this book is definitely worth a read.

With complete, step-by-step instructions that can easily be applied to many projects and tons of example code, From Photoshop to HTML is sure to get you started in converting your own designs. With a bit of practice, the concepts covered could be used on virtually any design!

The book also comes with the source files for the site created, which you can use in your own projects however you like.

Download Sample Chapter

Written exclusively for WDD by Cameron Chapman.

What do you think of this book? Please let us know in the comments area…

Never Ending WordPress Business Bundle – only $14!

Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others.

Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery.

Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash.

1. Flip! A jQuery plugin

This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis.

2. jQuery Quicksand plugin

This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects.

3. ImageFlow

This image viewer is similar to Apple’s CoverFlow interface that has become so familiar in their various products and applications.

4. Building an interactive map with jQuery instead of Flash

This demo joins the power of jQuery with Ajax to really create an engaging interface.

5. Slideout Tips With jQuery & CSS3

Clicking on the “+” symbols reveals additional information with a nice smooth animation effect.

6. Zoomer Gallery

In this demo, what appears to be a regular static image gallery is given some extra interactivity by using a multi-layer zoom effect when hovering over an image.

7. jQuery Circulate

This demo shows the much used Flash effect of circling an image around a page – all done using jQuery.

8. Photo Zoom Out Effect

This demo looks deceptively simple, but upon further examination you will find there are several layers to the complexity of the zoom-out effect.

9. Sliding Boxes and Captions with jQuery

Here we get to see how powerful transitions can be created using jQuery, a technique once reserved for Flash developers only.

10. CSS3 Lightbox Gallery

This plugin looks like it was written specifically for social-media. Dragging and dropping a photo on top of the “share box” will open a modal window that can be the interface to call an API via AJAX which can allow the user to share a photo on Flickr, Twitter, Facebook, and other sites.

11. Making a Photoshoot Effect With jQuery & CSS

Although this demo may seem like eye-candy at first glance, it could be a very powerful tool for working with large images when coupled with AJAX or HTML5 local storage.

12. Awesome Bubble Navigation

Here the developer makes good use of color transitions and animation to produce a very attractive and interactive menu.

13. Beautiful Background Image Navigation

In this demo each user action triggers several transitions which all act to fully immerse the user in the interface.

14. AviaSlider

AviaSlider uses classic Flash-like transition effects to enhance what would appear to be a standard slider interface.

15. Background Image Slideshow

Animated backgrounds are one of the areas where Flash used to dominate in web design. Here is an example using jQuery instead.

16. Panning Slideshow

Another unique take on the typical slideshow interface. Here the author adds diagonal navigation to spice up the interface and to make it stand out.

17. jqFancyTransitions

This plugin can be used to display your photos as a slideshow with fancy Flash-like transition effects.

18. iCarousel – Horizontal images slider

Another slideshow that adds just a touch of easing to make the transitions really stand out. It’s no wonder that they chose to showcase sexy Mac products in this demo.

19. Making an Interactive Picture with jQuery

This demo can be used to take advantage of websites where there is lots of screen space. Clicking on a section of the website reveals a modal box which displays more information about the clicked section.

20. Cloud Zoom

A plugin that looks like it was designed with eCommerce in mind. Cloud Zoom is easy to implement and can really enhance the user’s experience.

21. Apple-like Retina Effect

Anyone who has used an iPhone, iPod touch, or iPad is familiar with the “Retina View” that will enlarge a small area on the screen when you touch the area for an extended period of time. This demo implements this effect for the desktop.

Compiled exclusively for WDD by Kalim Fleet. He is a professional web designer and blogger with over 6 years experience. The web is his passion as he splits his time between blog writing, software development and social media. He loves using and developing new applications for the web, mobile, and desktop.

Do you know of any other great examples of jQuery effects that can rival the power of Flash? Do you ever suggest jQuery effects over Flash when your clients request them? Please share your views and examples below!

Never Ending WordPress Business Bundle – only $14!