With the multitude of phones, tablets, phablets, fondleslabs, and other devices on the market, it can be difficult to determine whether or not your new responsive web site is actually responsive. Unless you have a lot of cash to blow on every mobile device that exists, you are probably going to want to use a variety of emulators, applications, and browser tricks to test your responsive design.

Within the browser

If you just want a super quick overview of what your site looks like in various screen sizes, you can type in your site’s URL in one of the many responsive web design testing tools. However if you are developing the website yourself or doing more extensive testing, you may want to get a little more involved.

When I first start development on a responsive project, I mainly do my testing within Google Chrome. There are a couple of browser extensions you can use to aid in this process. The first is called ‘Window Resizer’.

Window Resizer adds a handy button to your Google Chrome toolbar that allows you to choose between a few predetermined breakpoints such as iPhone, Windows Phone, iPad, Desktop etc. After installing the extension, simply go to your website URL and choose a breakpoint from the list of options. Once you click a breakpoint, the browser window will automatically resize itself to that particular dimension. There’s even a way to easily add your own preset screen sizes. As you drag the corner of the window, Window Resizer will tell you the exact pixel width and height of your browser window.

Window Resize

Since I have installed dozens of extensions in Google Chrome, it can sometimes be difficult to resize the window below certain dimensions. The menu bar only contracts so much. That’s why I also installed an extension called ‘Open as Pop-up‘. Clicking this simple button will, as you can probably guess, open the current tab in a popup window, without the address bar and other things cluttering up your screen. If you really want to get fancy, you can install another extension that hides Google Chrome’s scrollbars, giving you an unadulterated view of your design. I like the extension called ‘No Scrollbars Please!‘.

iOS Simulator

Since Apple products are some of the most ubiquitous devices on the planet, it might be in your best interest to make sure your website works on iPhone & iPad. If you develop on a Mac, the easiest way to do this is with the Apple developer tools.

The first thing you need to do is make sure you have Xcode installed. Once you have that you can select Open Developer Tool > iOS Simulator from Xcode’s main menu. The iOS simulator provides you with emulators for iPhone and iPad in various resolutions. Simply select the device you want to emulate from the Hardware > Device Menu. Open up the Safari app and type in your website’s address to see exactly what your website looks like on an iPhone. It even allows you to switch between landscape and portrait mode, simulate shake gesture, and more. If you’re developing a responsive website, the iOS simulator is essential. But what if you don’t develop on a Mac?

Browser Stack

Browser Stack is an amazing service that allows you to spin up remote machines using whatever OS and web browser you desire. BrowserStack uses real desktop browsers, not emulators or virtualization, for the most accurate testing possible. Just take a look at the vast array of browsers they support. This means that if you use Windows, you can test on Mac, and vice versa.

BrowserStack even allows for local testing via a secure connection, allowing you to test as you develop locally. The only downside to the service is that connecting to the remote machines is sometimes slow, and you don’t have any control over the remote system. BrowserStack also requires a monthly subscription.

Virtual Box

Normally if you want to run IE on your Mac, you would have to either dual-boot (which can be time consuming), run something like Parallels (which can be expensive) or use something like Wine (which can be buggy). Virtual Box is a powerful open-source virtualization tool that allows you to run a virtual machine right on top of your desktop without a license key. I tried installing ie9 on my Mac, and it downloaded and installed in minutes.

Virtual box Running WIndows 7 on my Mac

Adobe Edge Inspect

Edge Inspect allows you to wirelessly synchronize your mobile devices with your desktop. As you browse your website on your desktop, the paired device will automatically update, allowing you to preview both devices at once. Edge Inspect even supports localhost so you can test while you develop. Obviously Adobe Edge Inspect will always provide you with the most accurate test results, as you are testing on the actual device, and not in an emulator, virtual machine, or plug-in.

As you can see, there are a variety of options for testing your responsive design without breaking the bank. The only method I’ve mentioned that costs money is the BrowserStack subscription. If you are a web developer or if you just want to make sure your website is working correctly, the above methods should have you covered. What do you use to test your responsive designs? Let us know in the comments section.

The post How to Test Responsive Web Design appeared first on Portent.

Enter Intention.js. Intention.js is a small but powerful script developed by Dow Jones. If you are stuck with a design that requires a lot of dynamic restructuring, this tool will save you a lot of headaches.

Dependencies

To use intention.js, you will need jQuery, Underscore.js, and context.js. (Context.js is optional, depending on whether or not you want to create your own contexts). Once you include these scripts, you are ready to go!

Example 1: Reordering

Say you have a design where the top navigation has to move to the bottom of the page, right above the footer, but only on phones. With CSS you’d have to do some kind of absolute positioning to achieve this. But with Intention.js, you just do something like this:

<nav data-intent data-in-mobile-prepend=".footer"></nav>

On your mobile breakpoint the navigation will be moved from the top of the page to above the footer.

View an animated gif example.

See example

Example 2: Changing Classes

Changing classes is just as simple. If you want to change the body class on different screen widths, you can do it like so:

<body data-intent data-in-mobile-class="red" data-in-tablet-class="blue" data-in-standard-class="green">

View an animated gif example.

See Example

Example 3: Changing Attributes

Intention.js also responds to changes in screen resolution.

For example if you want to change an image for retina screens, you can do this:

<img alt="car" data-intent data-intent-base-src="images/car.jpg"
   data-intent-highres-src="images/car-retina.jpg" width="525" height="350"/>

See Example

Example 4: Creating your own Contexts

If you’d like to create your own breakpoints, Intention.js has you covered. The Intention.js documents go into great detail on how to do this, so I’ll keep it simple. Here is an example of some custom contexts that you can use in any practical application:

var intent = new Intention();
var horizontal_axis = intent.responsive({
   ID: 'width',
   contexts: [
      {name:'standard', min:980}, 
      {name:'tablet', min:768},
      {name:'mobile', min:0}
   ],
   matcher: function(measure, context) {
      return measure >= context.min;
   },
   measure: function() {
      return $(window).width();
   }
});
horizontal_axis.respond();

$(window)
.on('resize', horizontal_axis.respond);

window.intent = intent;

$(function() {
   intent.elements(document);
});

Now that I have created my context and everything is working, I can begin manipulating elements without even touching the html. For example, if I want to collapse the sidebar on mobile:

intent.on('mobile', function() {
   if ( $('.sidebar-collapse').hasClass('in') ) {
   	$('.sidebar-collapse').removeClass('in');
   }

Let’s say I want to arbitrarily move the advertisement around. I can add a function for each breakpoint:

intent.on('standard', function() {
   $('.commercial').insertBefore('.footer');
});
intent.on('tablet', function() {
   $('.commercial').insertBefore('.footer');
});
intent.on('mobile', function() {
   $('.commercial').insertBefore('#sidebar');
});

View an animated gif example.

See Example

And More

Intention.js can respond to almost any change in your screen. It can listen for orientation (landscape versus portrait), scrolldepth, and even time changes. It’s worth noting that you shouldn’t rely on javascript for coding your responsive designs, but when CSS fails, it’s nice to have something to fall back on. What workarounds do you use when CSS is not enough? Let us know in the comments.

The post How to use Intention.js for Responsive Design appeared first on Portent.

*****

If you’ve ever used Photoshop on a Mac, you’re probably familiar with this guy. Would you like to send him packing and never see him again? If you answered yes, strap on your Photoshop helmet and get ready for the blog post of your life.

For this blog post I am using Adobe Photoshop CS5 on OS X.

Need for speed

If you’re new to Photoshop, Adobe has included a lot of helpful tools and settings to keep you from flying blind. But I know that you’re a Photoshop superstar! You don’t need any of that stuff, so let’s turn it off!

General Preferences

Turn off Export to Clipboard

Export to clipboard is only useful if you’re copying things from Photoshop and pasting them into other applications. Why would you do such a thing?

Go to Photoshop > Preferences > General (Mac OS) or Edit > Preferences > General (Windows) and uncheck Export to Clipboard.

Interface Preferences

Turn off Drop Shadows and Tabs

Now that you’re in the preferences pane, select Interface.

There are three dropdowns here for Standard Screen, Full Screen with Menus, and Full Screen. Set the border to None on all of them. Drop Shadows around your window just add unnecessary visual clutter and probably a small performance dip, too. We don’t need any of that noise.

This is a personal preference, but I don’t like the tabs feature in CS4, CS5, and CS6. I like to see all of my windows open at once.

Uncheck Open Documents as Tabs and uncheck Enable Floating Document Window.

File Handling Preferences

Turn off Image Previews and set Maximize PSD Compatibility to Always/Never

Now Switch over to the File Handling panel. The first thing in there is the Image Previews setting.  Image previews are a thumbnail version of your file. They are useful when you’re browsing through folders in finder/explorer, but they also slow you down every time you save. Go ahead and set it to Never Save.

Maximize PSD and PSB File Compatibility is a dialog box that pops up the first time you save something in Photoshop. If you choose yes, it will make it easier to open your files in different versions of Photoshop, but it will also add a fair amount of bloat to your file.

If you work with other people who have different versions of Photoshop, you want to set this to Always. If you are working by yourself, set it to Never. Either way, you won’t have to see that annoying pop-up anymore.

Performance Preferences

Get more RAM

Now we come to the most important panel in the preferences window with regards to speeding up Photoshop. Select the Performance Panel, and take a look at the Memory Usage box.

RAM is the workhorse of Photoshop. If you don’t have any RAM, you’re gonna have a bad time. Drag the slider as high as you can without breaking the rest of your computer.

Use fewer History States and set Cache Levels to 1

History States allow you to go back in time and undo your mistakes. If you’re terrible at Photoshop, you probably need a lot of these. But we talked about this already. You’re a Photoshop samurai, so cut that in half.

While you’re at it, set the Cache Levels to 1. This will allow you to open your Photoshop files faster. If you set the Cache Level higher, files will open slower but Photoshop will be more responsive while editing larger files.

Buy an SSD

When Photoshop runs out of RAM, it will write to the hard disk.  This is called your scratch disk. For best results, get another hard drive besides the one Photoshop is installed on.

If you can, get a solid-state drive and use that as your scratch disk. Solid-state drives are more expensive than hard disk drives, and you get less space, but the write speeds are incredibly fast.

Type Preferences

Turn off font previews

Finally we arrive at the Type Preferences Panel. If you don’t have any idea what font you’re using, I suppose this would be useful. But let’s be honest, you’re only using Helvetica.

Set the Font Preview Size to NOTHING (uncheck it).

Obligatory conclusion

If you followed the steps above, Photoshop should now be running as smooth as butter. You’ll never have to see the spinning beach ball again. Do you think I missed anything? Do you want to fight about it? Let me know in the comments.

The post Make Photoshop Faster with These Simple Settings appeared first on Portent.

How wide should my email be?

Thin is in! This email weighs in at a scant 484 pixels wide.

Due to the unpredictable nature of email clients, it’s better to keep your emails thin. Between 480-600 pixels wide is a safe bet. You don’t want your users to be scrolling horizontally, especially if they’re viewing your email on a phone.

Use Tables for email layout

Email is pretty far behind when it comes to following web standards. Most of the fancy CSS3 tricks and HTML5 features you enjoy on the regular browser are not going to work in email.

CSS tags like float and position are unpredictable in email clients, so you’re going to rely on tables for most of your layout. I know this is contrary to what many web designers have been taught, but until email clients catch up to the rest of the Internet, that’s the way it’s going to have to be.

Design emails without images

This email looks good, even without images

It’s safe to assume that when someone opens up your email, they’re not going to see any images. Design your email with this in mind. Always provide alt text for your images, and never use one large image for your whole email. All the user will see is a blank screen.

Don’t Use Background Images

Though there are some hacks and workarounds, most email clients will not display background images of any kind. Don’t rely on background images in your design. Background colors however, will always work.

Use Inline CSS

Premailer takes the frustration out of email coding

Some email clients will prevent any non-html from rendering, so you’re going to have to keep all of your css inline. If you want your links to be something other than blue, you need to declare the color on every link. I recommend coding your email the traditional way, and using Premailer to move the css inline automatically.

Adhere to the CAN-SPAM Act

The CAN-SPAM act of 2003 lays out some rules you must follow if you don’t want your emails to end up in the trash can. To be safe, follow these rules:

• Don’t lie or be deceptive in your header or subject line
• Make it clear that your email is an advertisement
• List your company’s address somewhere in the email
• Provide a clear unsubscribe function

Read more about the CAN-SPAM Act of 2003.

Test, test test

Services like Litmus take the guess-work out of email testing

Just because your email looks good in Mozilla in your gmail account on your 15 hundred-dollar iMac, doesn’t mean it’s going to look the same to someone on a hotmail account. Always send test emails. If you are a hardcore email marketer, there are various services that will help you test every eventuality.

Did you find this post helpful, or do you have any other tips for good email design? Let me know in the comments.

The post Basic Guide to Email Design appeared first on Portent.

1. No call to action

I went to this page to download the Headspace2 Plugin. But where is the download button? It’s not immediately apparent

Say you are creating a landing page for a product. You could have a beautiful landing page with lots of great information on it, but if the user can’t find out where to buy your widget, they will quickly abandon your page. The call to action should be the most prominent item on your page, and the user shouldn’t have to scroll down to see it.

2. Alignment

An example of pixel perfect alignment

One of the most basic mistakes new designers make is not aligning things correctly. For example if you have a heading, a paragraph, and a button, they should all line up vertically. Breaking the user’s line of sight will make your page confusing and difficult to read.
If you have 3 boxes, the space between each box should be equal.

3. Too many different fonts and colors

This website isn’t that bad, but the overuse of drop shadow effects, bad colors and fonts make it somewhat confusing to look at.

The easiest way to make something look tacky is to add several outlandish fonts and colors that don’t match. Less is always more. It may be helpful to start out in black and white, and then add colors gradually. Generally, you’ll only need one to four fonts in any given design.

4. Lack of Contrast

The text on this site is too similar to the background color.

So you’ve designed your page and everything looks great, but nobody can read it because you are using black text on a purple background. If you want to play it safe, a white background with black text will always work. You can sometimes get away with the reverse, but you will always take a hit in readability.

Contrast can also help the user differentiate between parts of your website. If your sidebar looks the same as your main content, the user won’t know where he’s supposed to look.

5. Trapped White Space

An example of trapped white space

Sometimes the things you can’t see are as important as the ones you can. This one is easy to miss, but it can potentially ruin your design. Trapped white space is like a hole in your shirt. Everybody will stare at the hole, not the shirt around it.

6. Arrows that point off the page

The bird’s orientation directs the viewers attention away from the text.

Arrows are everywhere, and we have been trained to follow them, sometimes to disastrous results. If you put an arrow on your website, make sure that it is pointing inward. Keep in mind that an arrow is not always an actual arrow. It can be anything that directs the viewer’s eye gaze. It could even be as simple as a picture of a bird or a man.

Subtle differences can often make or break your design. If you have the feeling that something is not quite right, but you can’t quite figure out what it is, you might be making one of these mistakes. Leave a comment if you’ve seen other basic design flaws that often go unnoticed.

The post Six Basic Web Design Mistakes appeared first on Portent.

Step 1: Download facebook.php from the Facebook PHP SDK

You can get a copy of the PHP SDK here. Download and unzip this directory. In the src directory, you will find facebook.php.

Step 2: Create index.php

Index.php will contain the logic that determines whether or not your page is liked. If someone likes your page, it will point them at a page called liked.php. If they do not, it will point them to a page called notliked.php. Note that there is a place to enter your app id and app secret. We will come back to this later.

require 'facebook.php';

$app_id = "APP_ID";
$app_secret = "APP_SECRET";
$facebook = new Facebook(array( 'appId' => $app_id, 'secret' => $app_secret, 'cookie' => true
));

$signed_request = $facebook->getSignedRequest();

$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$like_status = $signed_request["page"]["liked"];
$country = $signed_request["user"]["country"];
$locale = $signed_request["user"]["locale"];

// If a fan is on your page
if ($like_status) {
$a = file_get_contents("liked.php");
echo ($a);
} else {
// If a non-fan is on your page
$a = file_get_contents("notliked.php");
echo ($a);
}

Step 3: Create the unliked page

The first step is to create your poor lonely, unliked php page. This is a simple html page with an image. You can make it as complicated as you like.

Create a file called notliked.php and insert this code:

<?php ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>This Page is not Liked</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
</head>
<body>

<img src="http://i.imgur.com/JdEeS.jpg" title="Like this page" />

</body>
</html>

Step 4: Create the Liked Page

This is the pretty and popular page. It includes some javascript and css to prevent facebook from showing scrollbars on your iframe. Note that towards the bottom of the page, there is a place to enter your App Id. We will come back to that later.

<?php ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>This Page is Liked!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow:visible;
overflow-x:hidden;
}
</style>
<script type='text/javascript'>
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1000 });
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>
</head>
<body>

<img src="http://i.imgur.com/WL84m.jpg" title="Liked Page" />

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
</body>
</html>

Step 5: Upload your files to your website.

Your folder structure should now look like this.
Remember that your website must have PHP and the CURL extension installed. Make sure that your site is using index.php as the homepage of that directory

Step 6: Create your facebook Tab

Go to https://developers.facebook.com/apps and click Create New App.

Step 7. Copy your App Id and App Secret

The next step is to copy your app id and app secret to index.php. and to the bottom of liked.php

Step 8: Enter privacy policy url

Enter privacy policy. Your app must have a privacy policy.

Step 9: Enter url and domain.

Click Web, and set the url and domain. The url should be the path to your index.php.

The domain is the domain that it is hosted on.

Step 10: Enter canvas urls

Click ‘On Facebook’ in the left.

• Set the canvas page, you can name this whatever.
• Set Canvas URL, this should be the path to your index.php file.
• Set Secure Canvas URL. It should be the same as canvas url but with https:// instead of http://
• Set tab name to whatever you want.
• Set Tab URL this is the same as the canvas url but you actually link to index.php.
• Set Secure Tab URL to the same as the tab url but with https:// instead of http://

Step 11: Click View app profile page

Step 12: Click add to my page

Find your page, and click Add to Page.

Step 13: Your app will now appear on the left of the page you added to.

Step 14: Congratulations

The facebook Like Gate should now be added to your page. Just click the like button and it should work.

The post Facebook Reveal Tab Tutorial appeared first on Portent.

These cheerful logos also give the appearance of levity to the otherwise cold and calculating machine mind that is Google. Look upon the face of your destroyer and weep. Your death will be slow and merciless!

Unfortunately some of these logos have turned out better than others. So without further ado:

The Worst

Can color blind people even read this? I don’t know!

Seriously Google, you want to celebrate the birthday of Robert Bunsen? Well I guess someone has to.

This Halloween Logo was done before 2010, or before the Google Logo artist learned to draw.

<em>”Cricket? Nobody understands cricket! You gotta know what a crumpet is to understand cricket!”</em>

This logo was designed by Michael J. Fox on methamphetamines.

I guess this is how they play soccer in South Africa. GOOOOOAL!

Someone was paid money to make this.

This logo represents national Tron day.

This logo is unintentionally phallic in nature.

What.

I spent more time on this blog post than they did on this logo.

This is just all kinds of terrible.

Take time out of your crushing economic depression, rioting, and battling nuclear fallout to celebrate the union of two spoiled aristocrats you’ve never even met! Yay! Just kidding I’m sure they are splendid people. Like OMG can you believe Pippa Middleton wore white to her own sister’s wedding? LOL! ^_^

The post The Worst of Google Logos appeared first on Portent.

There are some films you can go your entire life without seeing. These are not those films. If you don’t know your A,B,S from your A,B,Cs, I am here to help. Many of these movies are available on the Netflix Instant Watch, so you can pump this steaming hot knowledge directly into your nucleus accumbens.

This is what the news people would call a “Fluff” Piece (if anyone read the news anymore. Haha, take that, Journalism), so take off your thinking helmet, and ride the water skiing squirrel into oblivion.

<h2 >Helvetica</h2>

Yes, it’s an entire movie about a font. If you are interested in graphic design and typography at all, you will enjoy this documentary. If not, you’ll probably want to burn down an American Apparel store by the end.

We Live In Public

We live in Public is the story of a delusional momma’s boy who thought he was cool enough to document his entire life on camera; Think of it as a cautionary tale on the dangers of overexposure and the hubris of the dot-com era. In other words, youtube is the fifth horseman of the apocalypse.

<h2 >Art & Copy

Ever wanted to know how “Where’s the beef?” came about? Art & Copy is the story of real life advertising superstars. Not like that Jon Hamm poser. Speaking of which:

Mad Men

Question: Why does Peggy Olson, an average looking woman, attract the attention of so many dapper young gentlemen?

1. Her winning personality
2. Her tenacious spirit
3. Drinking in the office
4. Women writers

<h2 >Glengarry Glen Ross

“You call yourself a salesman, you son of a b***?”
Worth it for the dialogue alone. The cut-downs roll off like sub-machine gun fire.

<h2 >Wall Street

Another classic about the cut-throat nature of business. Charlie Sheen doesn’t learn from his mistakes. And neither does America, apparently. This movie was made in 1987, and it should teach you to never do business with a guy named after a reptile. Gordon Gecko might as well have been named General Grievous or Admiral Bad Guy or something. Skip the sequel with that Lebouf turd.

<h2 >Winnebago Man

I bet you’re thinking “This article is stupid, there’s no way a story about a guy who sells Winnebagos is relevant to my career of playing on the Twitters and Faceblogging!” Well hear me out for a minute. Winnebago Man chronicles in exhaustive detail one of the oldest viral video sensations. See how an obscure Winnebago promotional video, in which salesmen Jack Rebney throws a hilarious tantrum, made its way from videocassette to Youtube and eventually, our hearts. “Are you buying any of this sh**?”

The Social Network

This movie is most notable for making me not want to kill Justin Timberlake. Hey, didn’t David Fincher do the same thing for Brad Pitt? Maybe he can make Shia Lebouf less annoying too. Nah.

The post Movies Every Internet Marketer Should See appeared first on Portent.

This method is based upon Float-less Layout. But I have made it simpler to fit my needs. I also don’t like how they make their entire site a list, while it seems to make sense, I find that putting a whole bunch of stuff inside a list becomes annoying fast, just like using tables.

Since I started making websites, one of the most annoying things I’ve had to deal with is creating a three or more column layout that is cross-browser compatible, and easy to update and maintain. For some reason this seemingly simple task has frequently led to many hair-pulling moments and frustrated cries of ‘why don’t I just use a @#$# table?’ Of course, these problems will all be solved whenever css3 is supported by all the major browsers, but until then I am sticking to display:table-cell;

Why We Float

For many, many years I’ve used the css property float to align things to the left or right of something else. I started doing this because using table cells for non-tabular data was and still is a taboo among people who like to use words like ‘semantic‘ or ‘emergence‘, or for that matter ‘tabular‘ in every day conversation. In fact, just using the word ‘table‘ is likely to bring a rain of smug imbued Starbucks cups down upon my head.

Why Floats Blow

Floats are stupid for a number of reasons. When objects with backgrounds are floated beside each other, they usually end up looking like this:

Example of CSS columns with floats.

What we normally want is this:

Example of CSS columns with table-cell.

In my example files, each of the columns is given the class ‘column’. If we remove the column class from one of these columns, you can see another common issue we have with floating. Unless you add a clear for the float, for example:

The content in the last column will wrap around the floated elements. This is not a problem in the example with table cells.

Example of common wrapping problem.

Pros and Cons:

Here’s a list of pros and cons for using display: table-cell; instead of floats.

Pros:

• When floating the columns, I had to add height:100% to everything from the column up in order to paint the background completely, eliminating all of the red color. This isn’t necessary with the table-cell method.
• No unnecessary clear class.
• Numerous float related bugs and other headaches are avoided.

Cons:

• You have to add a conditional comment for ie7 and less.
• The background ‘painting’ problem isn’t so easily solved in ie7 and below.
• It’s not so easy to add a margin to table cells.

In Summation

Use CSS floats if you’re doing something simple like floating an image and want text to wrap around it. Use CSS table cells if you want to do columns. Only use actual HTML tables if you are doing a table, like an excel document in your web page.

The post Easy CSS Columns: to Float or not to Float? appeared first on Portent.

The Magic Number

If you have ever had any interest in the art of graphic design, chances are you have heard of the golden ratio. Throughout history, artists, mathematicians and musicians alike have studied this peculiar number. Some say that it is the most aesthetically pleasing of all proportions, while others contend that this has merely been ingrained into our collective consciousness through centuries of overuse.

It is said that Leonardo Da Vinci used the golden ratio to construct his masterpiece, the Mona Lisa. It can be found in subjects as diverse as seashells, hurricanes, galaxies, and even the path of a hawk circling its prey.

“A golden rectangle is a rectangle whose side lengths are in the golden ratio, (one-to-phi), that is, approximately 1:1.618”—Wikipedia

The construction of a golden rectangle is fairly simple. wikipedia has more information on the subject than you would ever need to know.

Finding Phi

Golden Ratio Calculator

I’ve found a few tools across the internet that do a good job of finding the golden ratio, for those of us too busy drawing to be bothered with terrible things like math. The first is Kevin Cannon’s Golden Ratio Calculator. He also has a golden ratio widget, for those of you lucky enough to be on a Mac. Even his site is pleasantly laid out with golden rectangles.

Photoshop Script

This is a script for photoshop CS2 that you can install. It will create an editable grid of golden sections and the rule of thirds.

Adobe Exchange

There are a few golden rectangle eps and illustrator files on the Adobe Exchange. You can resize them to fit your composition.

Power Retouche

Finally, probably the only Photoshop plug-in I will ever buy, the Power Retouche Golden Section plug-in. It costs about $30 but is worth every penny. Just open up the power retouch filter, like any other filter, and you can overlay golden rectangles, spirals, rule of thirds—the works. The only way it could be better is if it created these grids as vector shapes.

Laying Down the law

I used the golden spiral (and the rule of thirds) as a guide for laying out this banner for Ian’s webinar. The intention was to guide the viewer’s eye around the text.

Intelligent Design

The legacy of the golden ratio is almost as storied as the Da Vinci Code, but whether or not you believe the mysticism surrounding its origins, the fact remains that behind every image lies a mathematical structure. The golden ratio is one that has stood the test of time. You can think of design as a series of decisions. The best decisions are those that are driven by purpose. Whether you use the golden spiral, the rule of thirds, or just your eye, you should always be able to explain the reason behind your composition.

The post The Golden Rule of Graphic Design appeared first on Portent.