Here’s a great video on how to install WordPress and MAMP:

Here’s a simple text explanation on how to install WordPress and MAMP.

Boilerplate is a merger theme, combining Starkers by Elliot Jay Stocks and the awesome HTML5 Boilerplate framework by Paul Irish.

Upon installing Boilerplate, you’ll see that your site will look like the above screenshot. All of the necessary WordPress files are included in the install, but the CSS if void of imagery and styling, allowing you to have a clean slate for applying your own design and front-end development, as opposed to the laborious stripping clean of an existing theme.

Although it doesn’t look like much, there is a lot going on. Boilerplate includes:

• IE specific classes
• Eric Meyer’s CSS Reset
• IE6 PNG fix
• .htaccess file that allows proper use of HTML5 features and faster page load
• Modernizr 1.6 for using the latest HTML5 and CSS3
• Mobile browser optimizations
• iOS, Android, Opera Mobile-adaptable markup and CSS skeleton
• …and loads more…

The left side profile image now has a max width and height of 180 x 540. I’m not sure what will happen if your current image is larger, but if you have a Facebook page, you might want to reduce your image size soon.

Earlier this year, Facebook disabled the Suggest To Friend feature that allowed you to easily suggest your page to all of your friends and easily build your fan base. Without this functionality, it is much more difficult to build your initial fan base. As of this post, the Suggest To Friend link still appears, but it does not work. Hopefully it will be working soon, as opposed to permanently being disabled.

Purpose

About.me allows you to create a custom one-pager aimed at delivering all of your social media content into a concise package, all free of charge. You can then create a friendly public URL, like mine: about.me/carlfranke. All you need is a good image that you want to represent yourself with, a short bio blurb, and links to whatever sites you want to integrate. The end result is a screen sized interactive business card about you.

Dashboard

Once you’ve created an account, you can log in and check your Profile Statistics to see how may views you’ve had for the past week, month, and year. You can also get stats on how many people clicked on your social media outlets, as well as search the directory of users.

Look And Feel

The background image that you choose ultimately sets the tone. Upload any image you want for the background, as long as it is at least 1024×768 and no larger than 1680×1050. Most people seem to use a personalized photo of themselves. It’s good to choose an image that has some dead space for the content area.

The content area displays your name, headline, and bio text, as well as social media icon links. Choose any color you want for the text and content area background. A variety of Typekit fonts are available as well to spice things up.

Social Media Content

When viewing an About.me site, click on the social media icons to reveal the latest updates and additions. These will appear in a tabbed and centered box.

Until I discovered Web Standards, designing for the web was utter chaos and a DHTML table-based layout of insanity, filled with Flash versions of sites, as well as Netscape and IE specific versions.

The above photo was taken of me by Melissa at some park in Northern Liberties. The hat was bright green, but easily made bright blue in Photoshop.

Learn more about Web Standards

The Deal

Shutterstock has a standard package deal that is amazing: $249 for up to 25 downloads a day for 30 days. That’s any image in their collection (photos and vectors) at any size! That’s roughly $0.33 per image and 750 images total. That’s not bad at all!

Who The Hell Needs 25 Images A Day?!

Nobody does. But if you know what projects that you’re going to be working on in the next year or two, or maybe some personal project you’ve been putting off, this deal is well worth it.

How Do You Keep Track?

Fortunately, you can tag images within your account and assign them into a lightbox, enabling you to refer to them or download them later.

Personally…

I’ve been using iStock for about a five years now, and have been quite happy. But the savings with this $249 deal is definitely an eye opener.

My site as displayed on the iPad landscape mode and iPhone portrait mode.

iPad Design Guidelines

There’s a great article by SixRevisions.com that explains everything you’ll need to know to set up your site for the iPad.

Basic 4 To Look Out For

As a web designer, the key 4 items I picked up on to look out for are:

1. Can’t Jazz It Up With Flash

Since Flash doesn’t work on the iPad, don’t use Flash for anything primary, such as navigation. If you use Flash for slideshows or decorative itemes, use SWFObject to replace the SWF file with a static image file.

2. Mouseover States Are Dead

Mouseover and hover states will not work. The days of creating intricate hover states are over. There is absolutely no need, at least for your mobile stylesheets. Dropdown / pulldown menus still work well, such as massive mega menus, as long as they are triggered by onClick as opposed to mouseover.

3. Frames Do Not Work

Weren’t frames dead anyway? I have an occasional iframe set up here and there. Darn.

4. Fixed Positioning Does Not Work

Nah, dawg. Gotta unfix that jawn.

Setting Up The CSS Media Query

In order to alter how your site is displayed on an iPad, you can either have a separate iPad site in its own directory. Or, you can utilize the more simpler CSS media queries.

For tweaking portrait mode, add to the <head>:

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="file.css">

For tweaking landscape mode, add to the <head>:

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="file.css">

For Philadesigns.com, I simply had to set a fixed position Back To The Top arrow to {display: none;}

Add The Viewport

Add the following to the <head>:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0; user-scalable=0;" />

Since the viewport, rectangular area where your web site is displayed in the browser, is different on desktop computers, the viewport needs to be adjusted. The initial-scale=1; and the maximum-scale=1.0; are not necessary, but they are if you are setting up your site for the iPhone. The user-scalable=0; turns off the pinch screen capability. Depending on how large yours fonts are displayed, you can set this to zero.

The Responsive Way

If you’re a fixed width designer, check out this eye opening article from A List Apart: Responsive Web Design. It simply makes sense, as more and more mobile devices are released. I mean, how many stylesheets do you really want to have? One for each browser?

I’ve used fixed width for practically the entirety of my career, aside from some personal projects. Fixed width seemed to make sense for large desktop screens and clients seemed to understand and feel more comfortable with a web site that doesn’t have shuffling elements around.

If you lay out your sites with the more complicated fluid method, you seem to be ahead of the game, as you can more easily adjust your web site for multiple devices and viewport sizes.

Some prime examples of great fluid / elastic sites that look great on desktop, iPhone, and iPad include ClearLeft.com, SimpleBits.com, and Stuff And Nonsense.