Independent: Not dependent on or affiliated with a controlling entity.

If forward-thinking is part of your web strategy, then pay attention. The flood of new devices to access the web are arriving in all different shapes and sizes. At one point Apple’s iPhone seemed to be creating the benchmark for mobile website dimensions, but the arrival of the iPhone 5 has shattered that.

A website should be device-independent. How can you be certain which platform and device your users use to access your content? This is why responsive web design should be fluid between breakpoints.

When designed properly, your site should be ready for any conceivable device size. If someone is asking “Where is the button to view the full website?” then the site wasn’t designed properly. You should be able to interact with the same content on your mobile device as you can on the desktop.

The mobile first mentality gave us the picture that many web users prefer the simpler experience, rather than sometimes cluttered and off-topic design for the desktop.

The key is having great content. Then build a fluid and responsive website to allow interaction with the content on any device and browser that your visitors choose.

And remember, be agile.

In most responsive layouts, we need to size elements based on a width as a percentage. To figure out the percentage width of an element, divide the width of the element by the width of its parent, then multiply by 100.

Say we have a container div set to a max width of 940px. Inside that div we have two columns. Column 1 is floated left and has a width of 220px. Column 2 is floated right and has a width of 700px. That leaves a gutter of 20px. Here is an example:

HTML

<div id="container" class="row">

	<div class="col1">
		<h2>Column 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
	</div>

	<div class="col2">
		<h2>Column 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>

</div>

CSS

.row {
	padding: 0 40px;
	max-width: 940px;
	margin: 0 auto;
}
.col1 {
	float: left;
	width: 220px;
}
.col2 {
	float: right;
	width: 700px;
}

Now to make the columns responsive, we change the pixel width’s to percentages:

CSS

.col1 {
	float: left;
	width: 23.4042553191%; /* 220px / 940px */
}
.col2 {
	float: right;
	width: 74.4680851064%; /* 700px / 940px */
}

I’m sure you see why this can be cumbersome. We have to do the math, write out the long decimal, and optionally write a comment so we remember what we did to arrive at the decimal. If we decide to change the proportions of the columns, then we have to go back and do the math again.

CSS calc() Example

An easier way is to use the css calc() function. Here’s the example updated using calc.

CSS

.col1 {
	float: left;
	width: calc(220 / 940 * 100%);
}
.col2 {
	float: right;
	width: calc(700 / 940 * 100%);
}

Browser support is not yet sufficient enough to use this without a fallback, and the webkit vender property is needed for some browsers, so this technique is still experimental. There are many other exciting uses for calc(), so I’m really looking forward to full support.

View Demo

The proliferation of mobile web devices has necessitated a change in our approach to web design. A responsive design approach has allowed us to build websites that work across multiple devices, but it created an incompatibility with our design process.

Prior to the switch to responsive design, we would design for the desktop browser only, and design and development were two separate processes. We would start development only after all strategy, research, wireframing, and design were fully completed.

With an agile design approach, we can test ideas quicker and make decisions based off of real data in the mobile environment. We can see how the site responds in different devices, rather than in only a stationary mockup. Try doing this in Photoshop. You can’t.

Agile means “able to move quickly and easily.” We need a design process that allows us to move quickly into development and easily adapts to new technologies.

The result is that the line between design and development is erased. The two must coexist in an integrated fashion. We need to see a working prototype early on in the process so we can make design decisions based off of how it looks and functions in each device.

Gone are the days of obsessing over every design detail, going back and forth with the client over the design before any line of code is even developed. We have to let go of pixel-perfect design mentality, understanding that technology is unpredictable, and we need to produce results quickly.

Designing in the browser allows us to quickly test fluid layouts. With a flat design mockup, you need to produce versions for multiple widths, and even then it is difficult to account for every scenario. Working with a prototype in the browser, we can demonstrate by changing the window size and design multiple layouts in a much smoother process.

Designing in the browser allows us to experiment with newer CSS properties. Rounded corners, box shadows, opacity, transformations, gradients, and the like are soon to become the norm for CSS. Finding a corner radius or setting levels for gradients should all be fine-tuned in the browser. There isn’t necessarily a direct correlation between the settings used in Photoshop and values in CSS, so it requires a bit of tinkering in the browser to get it right.

Designing in the browser allows us to test web fonts. Fonts always look different in the browser than in a mockup. Typography is design. It’s important to see the differences between 300, 400, 500, and 600 weight fonts. Furthermore, when designing in Photoshop I’m limited to the fonts I own, whereas experimenting in the browser I have many more options available, thanks to services such as Typekit.

Ultimately it saves time, because we’re directly working on the final product. We’re not trying to cut corners, we’re aiming to make a better end result.

Designing in the browser isn’t the first step. For me, a design always starts with pencil and paper. Depending on the project, I may also use an online tool to provide wireframes. Using a tool like Photoshop or Fireworks is still a must for visualizing concepts. Designing in the browser doesn’t eliminate these other steps, but is valuable asset in any web designer’s toolkit.

Goals

1. To get the Delete button to move messages to the Trash
2. To use the Archive button

Note: As of this writing I’m using Mac OS X 10.7.3 Lion with Mail version 5.2. Also, this article assumes you already have setup your Gmail account in Mail, and that you are using IMAP.

Deleting Messages

If you set up Apple Mail using Google’s Recommended Gmail IMAP client settings, deleted messages will not show up in the Trash mailbox–they show up in the All Mail folder. Here’s why:

In Gmail, when you receive a new email, this email actually has two labels: “All Mail” and “Inbox.” Deleting a message from the Apple Mail inbox removes the “Inbox” label. So when you delete messages, it removes the message from your inbox, but doesn’t permanently delete the message. The messages still exist in “All Mail.”

Note: Gmail uses “labels” instead of “folders.” Folders in Mail are your labels in Gmail.

Deleting a message from a folder removes that label from the message, but it still remains in All Mail.

See: How do actions sync in IMAP?

My Improved Settings

I prefer to hit the delete button and have the message go to the Trash. If there’s a message I want to save, I move it to the proper folder (technically a “label”) or Archive it.

Step 1: Configure Apple Mail preferences

You need to setup Apple Mail a little bit differently than the recommended settings. Open Mail Preferences, make sure the Accounts tab is selected, select your email account from the list (if you have more than one), and select the “Mailbox Behaviors” tab.

Check the options to “Move deleted messages to the Trash mailbox” and “Store deleted messages on the server.” Set “Permanently erase deleted messages when” to “Never.”

Next, go to the Advanced tab and set [Gmail] as the IMAP Path Prefix:

Make sure to save your changes when you close the preferences window. If you have a lot of messages, this may take a few minutes to sync. Just for precaution, restart Mail to make sure everything is in sync.

Setting the IMAP path prefix to “[Gmail]” gets rid of the ugly [Gmail] in the mailbox pane, although you may notice your custom labels are missing. Don’t worry—they haven’t been deleted. Mail just doesn’t know where to find them yet.

Step 2. Assign mailbox functions

You should assign the correct mailbox function for Drafts, Sent Mail, and Trash. Starting with Drafts, click on the Drafts folder/label under your email account name—then go to the Mailbox menu and select “Use this Mailbox for” and select Drafts. Then do the same for Sent Mail and Trash, carefully selecting the corresponding function.

Step 3: Set the [Gmail]/ prefix on custom labels

After everything is synced in Mail, go to your browser and login to Gmail.

Go to Settings, then click on the Labels tab.

If you have created any custom labels, you will need to add “[Gmail]/” to the name of each label to get it to show up in Apple Mail. From now on when you create a new label in Gmail, remember to add the [Gmail]/ prefix so they show up in Apple Mail.

Step 4: Designate which labels show in IMAP

While you’re in the Labels tab, uncheck the “Show in IMAP” box for All Mail because you don’t want that showing up in Apple Mail anymore. This is important to ensure the delete button sends messages to the Trash in Mail.app.

The “Show in IMAP” box will determine which labels appear in Apple Mail. Feel free to uncheck the “Show in IMAP” box for any other labels while you’re at it. Changes are saved automatically.

Step 5: Forwarding and POP/IMAP

Next go to the Forwarding and POP/IMAP tab. IMAP should be enabled and check the following settings:

When I mark a message in IMAP as deleted:
Auto-Expunge off – Wait for the client to update the server

When a message is marked as deleted and expunged from the last visible IMAP folder:
Move the message to the Trash

The key here is “last visible IMAP folder.” Now that you’ve hidden the All Mail label in IMAP, there should only be one “visible” copy of your message, so when you delete the message in Mail, it will now move the message to the Trash.

Make sure to save changes.

Step 6: Restart Apple Mail

Restart Mail to make sure it is in sync with Gmail.

Step 7: Test it out

Now when you delete a message from your Apple Mail inbox, it should show up in the Trash. The action should also be mimicked in Gmail.

Note: Messages that are in the Trash will be automatically deleted permanently after 30 days. You can empty the Trash manually in Gmail if you wish.

To create a new label in Mail, simply use the Mailbox > New Mailbox feature and type the in name.

ARCHIVING MESSAGES

Step 1: Add the Archive button to Apple Mail

Right-click on the toolbar in Apple Mail and choose “Customize Toolbar…” Find the Archive button and drag it to the toolbar.

Step 2: Find a message that you wish to archive and click the Archive button.

Apple Mail will create a label called “Archive” under your Gmail account and move the message there.

But…

There is a discrepancy between how Apple Mail and Gmail handle archiving. In Gmail, as you know, there is a label called “All Mail.” This is where the archived messages are stored. When you receive a new email, this email will have two labels: ‘All Mail’ and ‘Inbox’. When you archive a message in Gmail, you are actually removing the label ‘Inbox’.

As you may have noticed, when you archive a message in Apple Mail, it gives it the label ‘Archive.’ I think this is perfect, because if it sent the message to ‘All Mail’ it would not be viewable in Apple Mail since we have hidden that label. You would have to go into Gmail to search for it or view it.

 

So, in conclusion, I’m now happily using my Gmail accounts in Mail.

It feels like my head is gonna explode. I read dozens of articles a week to stay up on technology. Constantly studying the latest web development techniques. Researching and strategizing for clients. Brainstorming with the Penguin team. Managing a business. Channeling creativity.

Information overload.

Enter Evernote.

Referred to as “your new brain” by Inc. magazine, Evernote is an app to help you remember everything.

You can save web pages, notes, lists, code snippets, quotes, and virtually everything else you can think of.

And then you don’t have to think about it anymore, until you need it. Once stored in Evernote, your information is just a quick search away.

Evernote syncs seamlessly between the cloud and all your devices.

 

Requirements: Photoshop
Level: Beginner

Images play a lead role in most of the websites we build. It’s been said a picture is worth a thousand words. Crisp, well-balanced images have a profound effect on the perceived quality of a website, which in turn have a positive effect on the quality of a brand.

The challenge comes when handing the keys to the website over to the client, who often has no experience prepping images for the web. While we wish we could manage all the images for every site, sometimes the client needs to be able to upload images themselves.

This tutorial demonstrates how to optimize images for web, with a few simple secrets to make images “pop.”

This is meant as a starting point for the beginner. We often use many other techniques when editing images, but these following steps are almost always used.

Step 1: Crop

Always start with resizing or cropping the image to the actual size you need for the website layout. A picture from a digital camera may be over 3,000 pixels wide — much bigger than your website.

Select the Crop Tool and enter the width and height in pixels for the new image. Your image may need to fit exact dimensions, or either the width or height is variable. For example, you may know that the width of your content area is 500px, so you would set the width to 500px and leave the height blank.

Click and drag around the area of the image to retain. Don’t be afraid to drastically alter the original photo by leaving out parts of the image that are not relevant.

Step 2: Smart Sharpen

After cropping or resizing an image, the image may lose some clarity. This trick will help your image stand out or “pop” on the web, With the image layer selected go to Filter / Sharpen / Smart Sharpen. Make sure the Preview box is selected, and set amount to 50% and radius to 0.5px. Using your eye, you may need to back off the Amount or Radius slightly if the image appears too crisp. If your image has type in it, you may need to cut the values in half so the type doesn’t look jagged.

Step 3: Levels

Add a Levels adjustment layer, and look at the image histogram. If the graph has space to the left or to the right, you may need to bring in the endpoints. The goal is to optimize the image so the darkest pixel goes to black and the lightest pixel goes to white. This may not always be desired, so be sure to use your eye as you drag the endpoints closer to where the graph begins to slope. After adjusting the endpoints, you may need to adjust the midtone slider.

Step 4: Save for Web

This final step is to make sure your image file size is the lowest it can be so it loads quickly on your site. Go to File / Save for Web & Devices. For most images you will select JPEG. Alternatively you could select PNG if your image has a lot of text, is a graphic like a logo, or has transparency. PNG is a lossless format, so it is higher quality than the lossy JPEG, but often means larger file size.

JPEG
Choose the quality level High which by default has Quality set to 60. This is a great starting point and may not need further adjustment if you are in a hurry. You can compare the original image side-by-side with the 60 quality image, comparing both the quality of the image and the new file size. The dimensions of the image as well as number of colors has an effect on the file size, so only by experience will you learn what is an appropriate file size for the image. The goal is to get the file size as low as possible while still maintaining good quality.

PNG
There are 2 settings for PNG: PNG-8 and PNG-24. If your image has transparency, it is best to select PNG-24. If you are saving a graphic with limited colors, PNG-8 may be your best option. Always compare the file size for a PNG-8 with a JPEG.

That’s it! Now you should be ready to save images for the web.

If you use SSH a lot, you will want to setup SSH keys and a config file. SSH keys allow you connect to other machines securely without having to enter your password every time. You then store your host entries in an SSH config file, allowing a simple short command to connect to your server.

So, instead of having to write ssh -p 2323 user@domain.com every time to connect to your server, you could type something like this:
ssh myserver

SSH Key Setup

1. The default key directory is “~/.ssh”. Create this directory in on your local server if it doesn’t already exist.

mkdir ~/.ssh

2: Generate a new SSH key on your local server. If you already have an existing key/pair you may skip to step 4.

ssh-keygen -t rsa -b 2048 -f ~/.ssh/id_rsa -C "Enter an optional comment about your key"

You will be asked for a passphrase for the private key. I’d recommend you choose a very secure passphrase.

Enter passphrase (empty for no passphrase):

You will be asked to enter the passphrase again.

Then you should see output similar to:

Your identification has been saved in /Users/username/.ssh/id_rsa.
Your public key has been saved in /Users/username/.ssh/id_rsa.pub.
The key fingerprint is:
60:b5:c1:b7:ee:ab:31:d1:70:d8:03:41:df:0f:08:eb Enter an optional comment about your key
The key's randomart image is:
+--[ RSA 2048]----+
|     .=.         |
|     . B o       |
|      X B o      |
|     o X o o     |
|      E S   .    |
|       o         |
|      o .        |
|       +         |
|      ..o.       |
+-----------------+

3. Make sure your .ssh directory and the files it contains have the correct permissions:

chmod 700 ~/.ssh && chmod 600 ~/.ssh/*

4. Create the “~/.ssh” directory in on your remote server if it doesn’t already exist.

mkdir ~/.ssh

5. Go back to your local server and and run the following command to install the public key on the remote server. Make sure to change root@domain.com to your user and domain.

cat ~/.ssh/id_rsa.pub | ssh root@domain.com 'cat - >> ~/.ssh/authorized_keys'

6. Finally, set correct permissions for the “~/.ssh” directory and file on the remote server.

chmod 600 ~/.ssh/authorized_keys && chmod 700 ~/.ssh/

You should now be able to log in to your remote server from your local computer without being prompted for a password.

SSH Config Setup

1. Create a config file on the local server if it doesn’t already exist.

mate ~/.ssh/config

2. Make a host entry for your server. Host is the shortcut you will use to connect to your server, Hostname is the domain or ip address of your server, User is your username, and Port is optional if you use a non-standard port. Example:

Host myserver
  HostName mydomain.com
  User root
  Port 2323

Save the file when you’re done. You can later add more entries to this file to configure settings for multiple servers.

Test It

If everything went right, you should now be able to connect to your server using the name of the shortcut. For example:

ssh myserver

In this tutorial I will demonstrate how to build a horizontal scrolling gallery using jQuery. View the demo and source code used in this tutorial.

The Dependencies:

jQuery
jQuery UI

If you are building a custom jQuery UI download, you must at least select the following components:
Core
Widget
Mouse
Slider

This tutorial is based on the code from the jQuery UI Slide Demo. I made a few changes – primarily I’m using images instead of fixed-width content. The images may be different sizes, which causes an interesting challenge. I’ve had to adjust the CSS to allow for any number of images and content width. Also, the jQuery UI Slide Demo uses the UI CSS Framework, and I’ve opted to write my own CSS to keep things clean and relative to this demo.

The HTML

I’m using the classes from the jQuery UI Slide Demo, and wrapping the images in a list. You can add any number of images to the list, and it will automatically calculate the size of the scroll handle.

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
        <ul class="scroll-content">
            <li><img src="mad-01.jpg" alt="Image 1" /></li>
            <li><img src="mad-02.jpg" alt="Image 2" /></li>
            <li><img src="mad-03.jpg" alt="Image 3" /></li>
	    <li><img src="mad-04.jpg" alt="Image 4" /></li>
            <li><img src="mad-05.jpg" alt="Image 5" /></li>
            <li><img src="mad-06.jpg" alt="Image 6" /></li>
            <li><img src="mad-07.jpg" alt="Image 7" /></li>
            <li><img src="mad-08.jpg" alt="Image 8" /></li>
            <li><img src="mad-09.jpg" alt="Image 9" /></li>
            <li><img src="mad-10.jpg" alt="Image 10" /></li>
            <li><img src="mad-11.jpg" alt="Image 11" /></li>
        </ul>
	<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
		<div class="scroll-bar"></div>
	</div>
</div>

The CSS

I’ve opted for rounded corners on the scrollbar and handle using CSS3. You can completely customize the look of the slider to suit your needs. The important setting to note here is white-space: nowrap on .scroll-content which ensures the images are kept in a horizontal row.

.slider { margin: 20px 0 30px; }
.scroll-pane { overflow: hidden; width: 940px; }
.scroll-content { white-space: nowrap; float: left; list-style-type: none; margin: 0 0 36px; }
.scroll-content li { display: inline; margin-right: 10px; position: relative; }
.scroll-content li:last-child { margin: 0; }
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; background-color: #222; -moz-border-radius: 14px; -webkit-border-radius: 14px; border-radius: 14px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 30px; margin: 0 auto;  }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { position: absolute; top:2px; height: 24px; z-index: 2; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
.ui-state-default { background: url("slider.png") repeat-x scroll 50% 50% #222222; border: 1px solid #666; }
.ui-state-hover, .ui-state-focus { background: url("slider-hover.png") 50% 50% repeat-x; border: 1px solid #999; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; background: url("ui-icons_cccccc_256x240.png") 0 -224px no-repeat; height: 16px; width: 16px; display: block; overflow: hidden; text-indent: -99999px;}
.scroll-content img { border: 6px solid #fff; height: 400px; }

The Javascript

I’ve placed the javascript at the bottom of the page for fast loading. After including the jQuery libraries, add the script below. Note: this is the code from the jQuery UI Slide Demo with one important modification – you need to use window.onload = function () instead of $(function() because we are using white-space: nowrap in our CSS instead of a fixed-width. What this does is waits until all the images are loaded before the script is run, making sure it can calculate the width of the content. The downside is that the entire page must load before the scrollbar is displayed.

<script>
window.onload = function () {
	//scrollpane parts
	var scrollPane = $( ".scroll-pane" ),
		scrollContent = $( ".scroll-content" );
	
	//build slider
	var scrollbar = $( ".scroll-bar" ).slider({
		slide: function( event, ui ) {
			if ( scrollContent.width() > scrollPane.width() ) {
				scrollContent.css( "margin-left", Math.round(
					ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
				) + "px" );
			} else {
				scrollContent.css( "margin-left", 0 );
			}
		}
	});
	
	//append icon to handle
	var handleHelper = scrollbar.find( ".ui-slider-handle" )
	.mousedown(function() {
		scrollbar.width( handleHelper.width() );
	})
	.mouseup(function() {
		scrollbar.width( "100%" );
	})
	.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
	.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
	
	//change overflow to hidden now that slider handles the scrolling
	scrollPane.css( "overflow", "hidden" );
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar() {
		var remainder = scrollContent.width() - scrollPane.width();
		var proportion = remainder / scrollContent.width();
		var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
		scrollbar.find( ".ui-slider-handle" ).css({
			width: handleSize,
			"margin-left": -handleSize / 2
		});
		handleHelper.width( "" ).width( scrollbar.width() - handleSize );
	}
	
	//reset slider value based on scroll content position
	function resetValue() {
		var remainder = scrollPane.width() - scrollContent.width();
		var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
			parseInt( scrollContent.css( "margin-left" ) );
		var percentage = Math.round( leftVal / remainder * 100 );
		scrollbar.slider( "value", percentage );
	}
	
	//if the slider is 100% and window gets larger, reveal content
	function reflowContent() {
			var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
			var gap = scrollPane.width() - showing;
			if ( gap > 0 ) {
				scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
			}
	}
	
	//change handle position on window resize
	$( window ).resize(function() {
		resetValue();
		sizeScrollbar();
		reflowContent();
	});
	//init scrollbar size
	setTimeout( sizeScrollbar, 10 );//safari wants a timeout
};
</script>

In addition to the demo I’ve set up, the slider can be seen in action here: Stephanie Russell Wedding Portfolio.

Ciao

It’s Spring Cleaning time and I’m going through my closets. I basically only wear the same five shirts and three pairs of pants. Why keep all the rest of clothes that I rarely wear? What about those magazines that I’ve saved that I’ll never have time to reread? There are all kinds of things that are just in the way taking up space.

I have a friend who makes a living playing guitar for a popular recording artist. Recently I helped him move and noticed he didn’t have much furniture or many clothes, but a lot of music gear. Another friend came over and jokingly said, “So, I see you’re still playing music.”

His Personal Brand is clear, whether he is aware of it or not. There’s no doubt in anyone’s mind that he’s in to music. For as long as I’ve known him, I’ve know him as a musician. He lives and breathes music, and even what fills his house reflects that.

Just like the items in your house can pile up overtime, so can the facets to your Personal Brand. It’s okay to have different interests and be good at a lot of things, but what is it that makes you great? How do you want to be perceived? Having too many specialties creates a diluted brand.

Are you sending a clear message about who you are? Pick your leading attributes and make them clear and obvious to your audience. You can’t be all things to all people. Cut the clutter and keep your brand focused and specific.

These are just a few of the tools I use to develop killer websites.

My editor-of-choice for the past few years has been TextMate. I use the Blackboard theme (a darker screen seems to help prevent eye fatigue) and have the TextMate CSS and HTML bundles installed to minimize typing—a lifesaver. I’ve been customizing the commands and shortcuts to allow super-fast development.

I develop all my sites on a local server environment running PHP, MySQL, and Apache. I use Terminal for such things as configuring the server and connecting to GitHub. What I love most about Git is how fast I can deploy sites. I prefer to use Navicat for database administration. For transferring files, I use Transmit.

For design and layout it’s primarily Adobe products. I use Photoshop the most. I’ve heard good things about using Fireworks for web layouts, but haven’t taken the time to get acquainted with it yet. For vector work I use Illustrator.

To run Windows on my Mac I use VirtualBox. It allows me to easily test sites in Windows (ugh!) without having to go to a different computer.

Recap

TextMate
Terminal
Navicat
Transmit
Photoshop
Illustrator
VirtualBox

With so many different screen resolutions these days, it’s impossible for your website to look the same on each device. Furthermore, it’s not just each resolution, but what type of viewport—landscape or portrait—your site is viewed. Responsive Web Design is about building flexible layouts that move and resize to fit the screen they are on. The goal is to optimize a single design to fill the shape of whatever resolution it is in—promoting a better experience for the user.

Before designing a Responsive Website, we first need to know the screen resolutions of our users. I’ll use my website, jeffschuette.com as an example:

These statistics may vary greatly for your website. My target market is primarily other designers and developers, who typically use bigger screens, hence the large percentage of users over 1440px (48%).

So, I need to decide how many resolutions I want to cater to. A great starting point is to look at the Less Framework 4, which uses four layouts:

Mobile Layout: 320px
Wide Mobile Layout: 480px
Tablet Layout: 768px
Default Layout: 992px (Leftover space for scrollbars @1024px: 32px)

Essentially what this says is that any browser having a width over 1024px will see the default layout, and as the width decreases, the other 3 layouts will be shown.

The Perils of Perfectionism

It’s terribly difficult to design your own website or brand identity, especially when you are a perfectionist. Most creative individuals would agree that it’s challenging because your own website or portfolio is supposed to represent your best work. So there’s an inherit need for perfection. While second guessing and thinking it could be better, it can be tough to feel like you’re finished. You end up spending hours more than you planned. Weeks turn into months, and all productivity is lost.

Set deadlines and stick to them

In The 4-Hour Workweek Timothy Ferris says, “The end product of the shorter deadline is almost inevitably of equal or higher quality due to greater focus.” When you limit the amount of time to complete a task, you increase your productivity. It forces you stay on track with the important aspects of the task and avoid the perfection pitfall. The trick is to stay disciplined to your self-imposed deadlines.

Focus on the Goals

The project goals should always be clearly defined before any design is initiated. Keep them in front of you at all times when working on the project. When you set deadlines and stay focused on the big picture (i.e. getting results) you will avoid mental roadblocks. Don’t let small decisions such as deciding if a subheading looks better at 20px or 18px become obstacles.

Relax

The nice thing about designing for the web is the ability to easily change and make improvements as you go. Instead of over-obsessing about a layout or design detail, give it a try and if it really doesn’t work, you can always change it later. You’ll be getting user feedback and monitoring analytics anyway, right? Take more breaks, get outside and enjoy the fresh air, and relax. It doesn’t have to be perfect.