Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is a Masonry Layout?

When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

However, if the objects have variable heights, the results are much more difficult to predict. Instead of a nice tight grid, we get something that tends to be fairly scattered.

The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. It’s a pretty interesting topic and various developers have come up with several ways to go about it. Let’s take a look at three of the current best solutions.

To go one step further, we’re going to make sure that all three solutions are responsive, meaning the grid will reflow as the window size changes.

jQuery Masonry

jQuery Masonry is the most popular solution to pull off this type of layout. It utilizes some pretty fancy JavaScript to reflow a series of divs.

Putting Masonry into practice is pretty easy, all you need is a container that holds a series of divs that you want to arrange masonry style. You can place anything you want inside the divs, in this case I threw in some placeholder images.

Once you have that in order, toss in jQuery and jQuery Masonry. Then you need to create a simple function that identifies your container and targets the class that we used for our Masonry images divs. Here’s a basic example:

<div id="container">
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/200/food/1" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/150/food/10" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/250/food/3" alt="" />
	</div>
 
	. . .
 
</div>
 
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
 
    var $container = $('#container');
 
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.masonryImage'
      });
    });
 
  });
</script>

CSS

As long as we have a width set on our container div, the code above performs the magic we need it to and reflows the elements. If you set the div width to a percent, jQuery Masonry even automatically reflows the items as the page resizes.

Even though this is the case, things can get messy if you want to keep your container centered. I found it easier to apply a static width to my container, then use media queries to reflow the columns as the page size decreases past the container size.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
/*Media Queries*/
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#container {
		width: 400px;
	}
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#container {
		width: 200px;
	}
}

See It In Action

This gives us a nice tight image gallery that perfectly responds to various browser window sizes. I’ve taken all the spacing out to illustrate just how tight you can get your images, but feel free to build in some margins so your images are spaced out a bit more.

Demo: Click here to launch demo

Wookmark

Another popular JavaScript solution for achieving the same type of layout is Wookmark.js, which is the driving plugin behind the Pinterest-like Wookmark.com.

Wookmark.js is in my opinion a little trickier to implement than jQuery Masonry because of the lack of documentation, but it’s still pretty basic stuff. All we need to do to start is toss a bunch of images into an unordered list. The catch with this plugin is that we have to declare inline height values for each of the images.

<ul id="myContent"> 			
	<li style="height: 206px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/animals/1" alt="" /></li>
	<li style="height: 256px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/animals/2" alt="" /></li>
	<li style="height: 216px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/animals/3" alt="" /></li>
	<li style="height: 276px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/animals/4" alt="" /></li> 
	. . .
</ul>

Once you’ve got that set up, then you insert the JavaScript at the bottom of the body just like last time. Insert both jQuery and Wookmark.js, then set up the simple function below, which targets the list items in our #myContent unordered list.

I tossed in another simple function here which essentially reloads the script as the window changes size. This will ensure that the columns automatically reflow and provide that responsive functionality. This time around we’ll ditch the media queries and let the JavaScript handle all of the layout.

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.wookmark.js"></script>
 
   <script>
		$('#myContent li').wookmark({offset: 2});
 
		window.onresize = function(event) {
		    $('#myContent li').wookmark({offset: 2});
		}
   </script>

CSS

The CSS for this version is super minimal. All we need to do is set our ul width with a percentage and use position:relative. Then we set a specific width for each list item. That’s it!

#myContent {
	width: 80%;
	position: relative;
}
 
#myContent li {
	width: 200px;
}

See It In Action

Just like last time, the result is a tight grid of images. However, even though spacing options are adjustable with Wookmark.js, I couldn’t get it to work at zero so we have a little bit of spacing in between the images.

Demo: Click here to launch demo

Pure CSS

The JavaScript solutions are probably the safest and most widely compatible ways to go about a masonry layout, but the CSS nerd in me knew there had to be a way to pull it off without JavaScript.

It turns out, it’s actually pretty easy using some fancy CSS3. This technique was pioneered by Radu Chelariu at SickDesigner and though it’s definitely not as powerful, flexible, or cross-browser-compatible as the previous options, it’s still extremely impressive given that it’s all CSS.

To start off, let’s use the same unordered list that we did last time (no inline styles necessary), thrown into a container div.

<div id="container">
	<ul id="myContent"> 			
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/nature/1" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/nature/2" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/nature/3" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/nature/4" alt="" /></li>
		. . .
	</ul> 
</div>

CSS

Here’s where the voodoo happens. To start, apply a width to the container and center it. Then use the new CSS columns functionality to lay out the content into six columns with zero gap. Finally, target the images directly and set the display to inline-block with a width of 100%. Inline-block allows us to flow elements inline without floats while maintaining block level functionality.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
#myContent {
	-moz-column-count: 6;
	-moz-column-gap: 0px;
	-webkit-column-count: 6;
	-webkit-column-gap: 0px;
	column-count: 6;
	column-gap: 0px;
	width: 1200px;
}
 
#myContent img{
	display: inline-block;
	margin-bottom: 0px;
	width: 100%;
}

That’s all we need for the masonry layout, but we still have the responsive bit to go. We’ll basically use the same trick that we used for the first layout, only this time we’ll change the column count and container width when the window size gets too narrow.

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#myContent {
		-moz-column-count: 5;
		-moz-column-gap: 0px;
		-webkit-column-count: 5;
		-webkit-column-gap: 0px;
		column-count: 5;
		column-gap: 0px;
		width: 1000px;
	}
 
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#myContent {
		-moz-column-count: 4;
		-moz-column-gap: 0px;
		-webkit-column-count: 4;
		-webkit-column-gap: 0px;
		column-count: 4;
		column-gap: 0px;
		width: 800px;
	}
 
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#myContent {
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 34;
		column-gap: 0px;
		width: 600px;
	}
 
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#myContent {
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
		width: 400px;
	}
 
	#container {
		width: 400px;
	}
}

Compatibility

The big problem here is that IE doesn’t have support for CSS columns until IE10. This means that you’ll have to use jQuery Masonry as a backup for IE users if you want to implement this technique in a real world scenario.

See It In Action

Here’s our third and final masonry layout demo. At a glance, the effect is exactly like we saw with jQuery Masonry. Not bad for plain old CSS!

Demo: Click here to launch demo

Conclusion

In a recent article on Pinterest, I discussed just how powerful masonry layouts can be from a UX perspective, especially when combined with infinite scrolling.

You can definitely expect this budding trend to increase in popularity and before you know it you’ll have clients asking for a layout like the one they see on Pinterest. When this happens, you’ll now be prepared with not one but three possible solutions!

Are traditional paper business cards becoming obsolete? Have you considered a digital option? The type of card you use and how it looks can say a lot about you and your work. The style of card – from simple embossed text on a white card to ornate colors and fonts – can be a client’s first impression of your work.

You want to use a card that represents your style and works with the kind of clients you work with. When looking for a business card, consider both digital and paper options and integrate your digital self into paper cards. A business card does more than provide your contact information, it is a gateway to your portfolio as well.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Digital Business Cards

It started with the first-generation iPhone and the Bump application. With a tap, two iPhone users could exchange contact information on the fly without having to hold on to cards or write anything down. Bump is still around today and can be used for more than just contact information but only works between phones (available for iOS and Android), which could be a hindrance when doing business.

Most recently, people are beginning to turn to web-based business “cards.” Sites like About.me, IdentyMe and Flavors.me allow users to create a digital presence using a mix of photos and graphics – use preset choices or upload your own – with links to all of the users’ relevant work. You can connect to Facebook, Twitter, LinkedIn, Instagram, Foursquare, blogs and a host of other sites. With just one link, you can connect clients to all of your relevant information on the web. Because these networks are public, you can share and access your digital business card with a variety of potential clients that you might not have been able to contact otherwise.

A custom site is easy to create and just requires registration. You can change and update your digital card at any time. Make sure to keep your digital profile current and add keywords that describe what you do so your card is picked up in online searches.

Include a link to your digital profile on all outgoing correspondence and embed a custom QR code into your site so that potential clients can add your contact information to their phones and databases in a snap. (A QR, or quick response code, is a customizable barcode that can be used to store information and is readable with smartphones. Think of a QR code as a universal “Bump,” which is universally readable by iPhone, Android and BlackBerry phones.)

Think about what your digital profile says about your work. As a designer, you should look beyond stock images or templates. Use some of your own work as the main image. The design should represent a sample of what you can do for clients.

Try not to go overboard with images and fonts, the main thing you want to accomplish is to provide information so you can pick up clients. Make sure phone numbers and addresses are clearly visible as well as links to related work.

Pros

The best part about going the digital route is that everything is connected. Instead of listing a host of links on the back of a business card, you need just one link that can send people to different parts of your portfolio. You can update your profile as often as you like and don’t have to send out new links when you update the site or your contact information.

Going the digital route also helps keep your costs down. The “cards” are fully customizable and free on most sites. Shop around to find the site that works best for you, because some do charge to house your digital account. Access to some premium features, such as mobile layouts and custom domain names, come with an annual fee on some sites.

Most digital cards allow an almost unlimited number of options to showcase your portfolio. You can post video, flash images and photos in addition to links and text. You don’t have to worry about running out of space in the same way you do on a 2 inch by 3.5 inch card.

Cons

Some clients may not quite be on board with the digital trend and prefer paper products and you won’t have anything to hand out when you meet people in person. Evaluate your client base and their needs before ditching paper cards altogether. Links can sometimes be hard to remember and may get lost if you jot them down on paper.

Also think about the way you use business cards. Do you post them on billboards to drum up business? Or pass out hoards of cards at conferences or business meetings? Going digital may not be the best option if your cards are used this way.

Traditional Business Cards with Digital Elements

For most designers, the easiest link between digital and traditional business cards is something of a meshed version. While making the full-scale digital transition, think about printing a few paper business cards with a digital touch.

Create a QR code – try a free service such as JumpScan, BeQRious or QuickQR – and download your personalized QR image. Then just add the image to each of your business cards when you have them printed. If you already have a stack of cards and want to add a code, consider adding printed stick-on labels to the back of your cards.

Create a digital business card and embed that link in the QR code printed on your paper cards. Having both types of cards can help you expand your business reach and will allow those paper clients to get a taste of your digital products. When designing your paper and digital cards, consider creating a visual link between the two. Use the same image, fonts and color scheme to create a brand identity.

Passing out a business card has an element of traditional classiness and can say a lot about the person handing it out. The quality of printing, use of typography and color can serve as a lasting impression about your style of design. Make sure your cards have personality. Shoot for a special paper or color with a lot of pop and have them printed professionally.

Pros

Some people just like the feel of a card. They are easy to save and identify. Cards that are blank on the back are great for scribbling a little extra nugget of information for clients, such as a price quote. Having a card to hand out can make you look more professional and lend a little extra credibility to a new business.

You get the traditional look and feel of paper business cards with your portfolio attached. When you hand out cards, people can scan the code and toss the card without losing track of your information. You can also show a client your work on the fly with a quick scan of the code. Creating a code only takes a few minutes and can be done for free. Use a QR code generation site that allows you to update your code as well, so you can add links and keep your digital profile up-to-date.

Cons

Nice business cards can be expensive to print and need to be reprinted if contact information changes. Cards can also be lost or thrown away. For some, using a paper card just does not work with the type of business being done in the digital marketplace. If you include links on a card, they need to be short (or sassy) enough that they are easy to remember and type. Cards also offer a limited amount of space to make an impression, and don’t always allow designers to showcase the full scope of their work.
Not all of your clients may understand QR codes and you may have to explain what the code is and how it works.

Information to Share (and Avoid)

A digital business card allows you an unlimited space to promote yourself, but make sure to limit what you publish online. Try not to overwhelm potential clients with too many project links. Use your digital business card to promote your best work and not everything you ever created.

Always make sure your contact information is clearly stated. Remember that some people who check out your digital business card will still want to visit you or pick up the phone as well as send you an email.

Create space between your personal and professional selves. Do you use Facebook and Twitter for business? Include those links. If your accounts are strictly personal, don’t include them in your professional online profile. Make sure to use only links for sites that you monitor regularly. If you only log in to Facebook once a year, don’t bother adding it to your profile.

Digital Cards with Pop

Represent Your Work

Nothing sells your work better than showing off good work. Photographer Ricky Li does just that with his card. Using a striking and colorful photo, Li shows the kind of work he produces and provides a link to more if his photography. June Kim uses a super interesting image that represents Kim’s work and incorporates her name into the image. He resume opens with just a click and you contact information is clearly visible.

Use Your Face and Type

Tony Conrad, co-founder of about.me, uses his photo to sell himself and here it works. The photo is striking and makes you look twice, especially with the contrast of the start black and white photo with the blue text box. Mark Frederking took a similar approach with his card, using his face on a plain, but clean, background. Both cards use strong text choices – an interesting font for Conrad and a color that pops for Frederking – to pull you in.

The most striking use of a self-portrait and type is from Henry Timisela (shown near the beginning of this article). From the image you know what he does, and his achievements are stated with links to his work. The card uses a clean, crisp style which you might associate with his work.

Conclusion

Digital business cards may be the next big thing and can help your promote your work to a client base that you have yet to meet. Going the digital route allows you to showcase more of your work and can be inexpensive, but it might not always work for your client base.

Consider using both paper and digital business cards to get your name out. This will allow clients who meet you face-to-face to take a little reminder of you with them and hopefully do online to learn more about your work. Remember, both types of cards can be a lasting impression of you and your work so make sure they represent you well.

Image Sources: Murat Erturk, and jaaron.

Twitter launched a radically new layout to users Thursday. The first to see the new look were mobile users through the Twitter iPhone and Android apps. After updating those apps, the new look of Twitter became active on those users’ computers as well. All other users will begin to see the updated Twitter look over the course of several months.

The results are mixed. The new look and interface is great for mobile users and the sleek interface is cool. Features on the computer version mix the super-sleek interface with a few bonuses but also a few misses. Pages have more pop but still have the look and feel you would associate with Twitter. The site also rolled out branding pages for companies that have a nice look but could change the organic feel that has brought people to Twitter.

Visually, Twitter has reinvented itself consistently across various platforms. Aside from slight, device-specific tweaks the interface looks the same on the website, on a tablet and on a smartphone (no update for the Mac app as of yet). The biggest plus for designers and other visual professionals is an enhanced use of images to push you toward content. Twitter is starting to define itself as more than just a 140-character platform.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Web Design

The Twitter update adds a variety of new features, including better search functionality, keyboard shortcuts and better tools for social interaction.

The worst part? Twitter flipped the location of key items on its homepage, moving the timeline to the right and all of the extras to the left. I have clicked the wrong item on multiple occasions.

Home, Connect and Profile

These three “new” features speak for themselves. Home is a user’s landing page, and clicking the connect symbol (@) will show a user’s timeline. The thing that looks the most different is the profile page, which makes the account holder a star on his or her page. Profile information is in a larger box that stretches across the page with a much larger icon. Custom backgrounds are still very visible (and don’t have to be reset with the update).

Twitter did not change the font, size or color usage in tweets other than to make link text gray rather than black. So the timeline looks pretty much the same. It’s all the stuff around it that has an added pop (in part because of the lack of visual change to the basic part of the site).

Designers who are marketing themselves or their work could benefit from the use of larger images throughout the site design. The list of recent items has images that are also a bit larger as well. Images and videos now appear in each user’s timeline and are viewable without a link to another site.

Discover

The new “Discover” feature is a mashup between hashtags and trending topics. Click on the icon and get immediate access to things generating buzz. Each topic has a link to pages for that topic or hashtag.

This is one of those fun little features that adds visual punch to trending items. The photos and text are much larger than in the general timeline and really looks newsy in the mobile application. The downside is that it adds an almost false sense of credibility to Twitter as a news organization because the feature so closely resembles some news websites.

Hello, Shortcut Keys!

Twitter developers built 21 keyboard shortcut combinations so you can get away from the mouse. Want to send a Tweet? Hit “n” and the dialogue box pops right up.

The keys are something I have been waiting for. Unfortunately, they don’t work quite like shortcuts in other applications. Because the web browser already uses ctrl-letter combinations, Twitter uses single-letter keys. I must admit, it has made me a little nervous in the early stages. Am I typing random letters somewhere?

But it seems to work. Even the “gh” combination to get to the home screen sends me there without stray letters or Tweets getting sent out. The shortcuts don’t work when the Tweet window is active though, which prevents inadvertent tweeting.

But is it too late? After clicking through Twitter all this time, will users take to having keyboard shortcuts? It sounds like a great concept, but I am not convinced my habits will change. Still, it’s nice that they went the extra mile and included them for users who prefer to use the app this way.

Mobile Design

Twitter’s biggest improvement affects mobile users. I left Twitter for third-party applications on my smartphone a long time ago. Twitter’s app could not compete with the speed and simplicity of others that were free to download and use. Maybe that is why Twitter is offering the new-look site to its mobile users first, to get us to come back (it worked for me.)

It more than met my expectations. The feed is easy to navigate with home, connect, discover and me buttons that are anchored at the bottom of the screen (these are anchored on the left for tablet users). The “Discover” feature is visually appealing with large images and text and might be my new go-to source for information on the go. It is tailored to the mobile user as well and, according to Twitter, will adapt to your preferences with use. It uses your interests and location (if allowed) to showcase relevant trending topics.

The smartphone app looks and works like Twiter.com on a computer. It is easy to follow users without having to leave the item you are viewing. The tablet application has the same feel as well, with a popup window to view links without navigating away from the timeline.

Brand Pages

There goes the grassroots feeling that has made Twitter the anti-Facebook. With the update, Twitter introduced brand pages for companies. (Facebook and Google+ already offer something similar.)

It is a great concept for your small-time design shop or freelance business. Registering through Twitter advertising allows companies to have a distinct layout with a banner featuring a company logo rather than just the Twitter user icon, and other extras such as logos, taglines, videos and quick access to promoted Tweets, according to the Twitter Advertising Blog. In addition, Twitter promises that no other companies’ advertisements will appear on your page.

The new features will be free to all users, according to the Twitter Advertising Blog, but are being tested with only a handful of companies at this time. Most are household names – McDonald’s, Coca-Cola, Nike, Verizon Wireless and a page for the latest movie in the Mission: Impossible franchise. The new pages are only viewable on the new Twitter interface and there is no definite timeline for when these pages will be available to everyone; Twitter says it will be rolled out “in the coming months.”

These pages look good. As soon as you hit the page for @nikebasketball, the owner of the site is obvious. The brand pages have a visual definition that has been lacking on Twitter until now.

This feature could be a great asset to designers trying to showcase certain work and who are working with a limited advertising budget. Since Twitter does not charge to host a site, there is no upfront cost. Just visit Twitter.com and complete the business registration, upload your information and start tweeting.

The Lowdown from a Design Perspective

Historically, Twitter’s UI branding has been a bit all over the place. The iPhone, iPad, Android, web and Mac versions each had their own visual presentation style. This overhaul is a clear attempt to tie it all together and you can expect to see similar changes rolled out over the remaining areas sometime soon. Items like the new Home, Connect and Discover symbols give the official Twitter brand a much needed distinct style that helps it stand out from the third party Twitter universe (at least for now).

There are some nice usability tweaks as well in the web interface. For instance, clicking on a tweet expands it to show relevant information like retweets and other pieces of the conversation. This strategic placing of key information helps keep the interface clean and simple. This type of functionality also gives the web app a richness that makes it feel more like a native app, a clear trend in web app design that has really taken off lately.

Another interesting design observation: With each new iteration Twitter’s design focus on pure text tweets has faded. The latest round really pushes the new Twitter image-sharing service. Features like the new media grid shown below and the ability to embed videos into business pages hint that the days of Twitter being the simplest social media site around are over.

This represents an interesting change in identity that some users will hate initially, but I suspect we’ll all adjust before no time. However, in the long run it raises questions about just who Twitter wants to be. Let’s hope they can keep their core focus while adding helpful features and avoiding bloat.

Conclusion

Twitter has added enough extras and visual interest to its homepage that will allow it to compete with some of the other applications out there such as Hoot Suite and Tweet Deck. The look of the interface is much more visual with variance in text and photo sizes.

Although it has some faults, the new design works because it is simple and organized. Twitter may win back some users who have not been using their mobile applications with the streamlined site across platforms. Branding is a bonus for companies and looks really nice, but I worry all the corporate pages will just junk up my timeline with unwanted ads.

What do you think of the new Twitter design and functionality changes? What do you love? What do you hate? We want to know!

From here you gain access to a slew of applications both free and paid. These are all built for OS X Lion and can be downloaded directly into Launchpad. In this case study I’ll be looking into design trends for Mac app websites. These are specifically geared towards OS X and do not include iOS apps… the styles are very different. Along with these tips I have also compiled a small showcase gallery of my favourite Mac app sites to share a bit of inspiration.

Enlarge your Key Points

When people land onto any app website they hope to figure out the purpose of the application very quickly. The easiest way to do this is by immediately grabbing the visitors’ attention and guiding them throughout the layout. And from past experience it seems jumbo-sized text/graphics will often do the trick.

Alfred App is one such example which incorporates the entire screen into a sliding layout. Both the app logo and download button jump off the page at a glance, along with the monstrous app icon! Users familiar with the Alfred app will recognize the unique hat and magnifying glass. And it’s not just the top page area, either.

As you scroll down you should notice each page section is also broken into pieces. The demo screenshot area has a small column for thumbnails with a beautiful display of the app. Just by checking out the few demo shots it’s generally understood what the app can do. As you find more application websites keep your eyes open for the “big picture” stuff which is meant to stand out. Also keep yourself thinking about what should be jumping off your own app website.

Clean-cut Characteristics

The more popular site designs are often featuring the same type of elements. This could be a more finalized and detailed icon design, fancy logo text, and other fun graphics. But you should follow Apple’s example and cut out the expendable stuff. Clean and simplified interfaces will keep your visitors’ focus moving through more downloads and purchases.

I am a huge fan of Instagram which has taken up plenty of my time on iOS. And the Mac app Carousel is a beautiful sister-service on the desktop. If you notice their site layout features a smaller logo area with more room for screenshots. Additionally the typography appears more refined to match the classy, upscale theming.

You should also notice there isn’t any main navigation here. Consider duplicating this for your own app website, it removes a lot of user frustration. This idea goes double for mobile users finding your website for the first time on iPhone or Android. If you can portray your app’s message on a single page I say go for it!

Include Standard App Store Icons

To grab your visitor’s attention is one important requirement, but you also want to garner their trust. And people who are using the Mac OS are generally trusting of Apple developers. You should include badges and/or buttons on your site to let people know that you’ve been published into the app store. It may seem small, but it can be of huge significance to new potential customers.

The Mac App Store Marketing Guidelines (PDF) go into a bit of detail about the App Store badge you see on most of the popular Mac apps. I also like to hit up dribbble’s shots to see if anybody has cool design sets or icons relative to the theme.

Provide a Demo Where Possible

Remember the whole point of conveying your message quickly? This can most easily be achieved through images or video – no big surprise there. But even just thumbnail galleries or slideshows sometimes aren’t enough.

You should try to include a demo of your service in a type of workflow infographic There are tons of free PSDs to download which fit into MacBooks, iPhone’s, iPad’s, and everything else. Here’s a beautiful example of a free iMac PSD template to download. Now you could take screenshots of your application and build small demonstration images.

This works really well in the example above for NotifyMe. The app is open and developed for all 3 platforms on iOS/iPad and OSX. At first glance you can assume the app is a notification-type system. Through a small demo graphic and some further explanation, you can put together the extended features to compose your opinion on the app.

Dynamic Animations & jQuery

Apple is also well known for having beautiful transition animations. Their attention to detail in both design and function is incredible – spanning the breadth of their entire software portfolio. And as a web designer publishing under Apple you may find your app site could use a magic touch.

Reeder for Mac is beautiful and the demo site fits just as well. Notice the page URLs are extremely simple and easy to pass along to friends or via social networks. Additionally the navigation is held in a side column, while page content is slimmed down to the bare minimum.

Although Reeder does have quick page speeds, it is only one example of many app websites. If you enjoy these dynamic animations consider looking into the jQuery library and also the jQuery UI set as well. These are two very popular JavaScript libraries with pre-built functions for page effects… and you can build a lot! For one idea you may enjoy this small Apple-style tutorial using jQuery to build a splash screen fade-in effect.

Inspiration Gallery

As mentioned earlier no case study would be complete without a small design showcase. Below are just a few examples of my personal favorite OS X app website layouts. Check ‘em out and let us know what you think! And if we missed any awesome app layouts you really like be sure to let us know in the comments.

Versions

Espresso

Things for Mac

Delibar

Transmit

Checkout

Kaleidoscope

Tangerine!

Dropzone

Postbox

Courier

Lighthouse Keeper

Git Tower

Espionage

Cornerstone

Soulver

iBank

WalletApp

Sparrow Mail

Pre-built themes and templates provide you with a quick and easy way to get started with responsive web design. Many of them do all the work for you and provide a simple plug and play workflow, others just take care of the heavy lifting by taking care of the media queries and give you complete control over design. This post contains 20 free and premium templates, all of which are fully responsive right out of the box.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Responsive Layout: Fad or Necessity?

There’s been a ton of discussion about responsive web design lately. Many hail it as the future of web design and even go so far as to say that you’re simply not doing web design the right way if your sites don’t conform to their specific formula for maximum compatibility. Others contend that this is just another toy in a long line of fads that come and go.

The answer is likely somewhere in between the two. The truth is, web design has indeed hit a major obstacle with the wealth of different screen sizes that now access the web regularly. Many sites can neither afford to leave out large portions of mobile users nor can they build custom sites perfectly tailored to every smartphone, tablet, laptop and desktop on the market.

Responsive design, be it trend or not, is currently the best answer to this problem. If media queries fall out of favor it will simply be because a better solution has come along, not because the problem ceases to be important.

I can’t say how we’ll be developing sites ten years from now, but you can bet that screen sizes will only continue to become more fragmented as everything with a battery or plug is quickly becoming capable of accessing the web. If we define “responsive” web design as a set of techniques used to ensure maximum compatibility across as many devices as possible, then we are definitely not looking at a fad but the current and future standard for professionals in our industry.

Some complain about the added effort and development time but it’s really not as bad as you might think and once you’ve pulled it off a couple of times the impact on your workflow can be quite minimal. The tools in this post make it even faster, taking most of the pressure off you when it comes to the responsive elements.

20 Responsive Templates & Themes

Yoko – Free HTML5/CSS3 WordPress 3.1+ Theme

“Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.”

Price: Free

Skeleton

Skeleton is a boilerplate that successfully makes developing responsive websites a breeze to accomplish. We’ve written about it a few times on Design Shack and really love its simplicity. Along with the download you of course get a demo file, which can easily be used as a starting template to build your own work on.

Price: Free

Super Skeleton: Responsive, Minimal, Beautiful

“SuperSkeleton is more than a template, it’s a comprehensive HTML5 framework; A collection of several incredibly powerful scripts and CSS structures that’s been tied together into a kit that’s perfect as a jumping off point of your next project.”

This is a super premium package with 20 HTML templates, a PSD UI kit, multiple skins, fontstacks and more. It’s a steal for under $20 and is the perfect way to launch your ventures into responsive layout.

Price: $17.00

Responsive Twenty Ten (WP Theme)

Responsive Twenty Ten is a child theme of the default WordPress theme with lots of great features like flexible images. The authors give you permission to “download, take, use, change, and do whatever you want with it.”

Price: Free

Onextrapixel Responsive Web Design Template

A very basic but solid free template/tutorial for responsive web design. This is perfect if you just want to dig around and see how a simple responsive template works without all the fluff.

Price: Free

The Novelist: Responsive WP Theme for Writers

A very unique looking theme with a simulated open book interface that scales nicely when you resize the browser. Perfect for personal writer portfolios.

Price: $35

Ari WordPress Theme

Ari is a very minimal blog theme that is super attractive in its simplicity. It’s built for WordPress 3 and up and features both a light and a dark theme. You’ll definitely want to give this one a look.

Price: Free

Golden Grid

Like Skeleton, Golden Grid is more than a template, it’s a framework for building responsive sites. Self-labelled as a folding grid for responsive design, “the 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones.”

Price: Free

Hero – A Responsive Single Page Template

“A responsive, clean and minimal style single page template for personal and business type. It has a fixed menu on the very top of the document for easy to navigate. It has also a 10 pixel border in the body.”

Hero comes with both a light and dark theme, both of which look great but the dark is especially slick.

Price: $14

Good Minimal – A Responsive HTML5 Template

“Good Minimal is a clean and minimalist style template that is good for portfolio, blogs and businesses.” Very similar to the previous template in many regards but with a bolder, more unique design. I really like the look of the typography in this one.

Price: $14

iTheme2 (WordPress)

iTheme2 is a gorgeous free blog template that has a responsive layout and tons of great features like a customizable feature slider, a social media widget, two theme skins and more.

Price: Free

Folio Two

“Folio Two is an advanced portfolio, a practical and usable template designed with HTML5 + CSS3 and using jQuery to enhance an awesome user experience.”

This template features a really nice big grid of images that morphs smoothly as the browser window resizes. The grid looks great both small and large!

Price: $12

Grido WP Theme

Grido is an awesome and impressive feat of web layout tricks. It features both a masonry-like layout and a responsive system that readjusts that layout for several screen sizes. It comes with multiple color schemes, a lightbox gallery, seven skins and more.

Price: $39

Flexible WordPress Theme

“Flexible is a WordPress Theme that helps present your content and display it to fit different screens sizes, with a design of your own. It also provides a really easy integration with Facebook and Fan Gate option, a must have if you are running a website.”

Price: Free

Deresan Gray Profile Template

A sophisticated looking template with a nice neutral color scheme, an image slider and lots of great little design touches. The responsive scaling isn’t my favorite but it is functional.

Price: $14

Constellation WordPress Theme

This theme has it all. Not only is it responsive, it’s built on HTML5 Boiler Plate and contains both a horizontal grid and a pixel perfect vertical rhythm that scales nicely across devices. This is the perfect starting point for your next WordPress project.

Price: Free

Seamless Responsive Photo Grid

A nice little experiment from Chris Coyier that you can download and use. It’s basically just a big grid of photos that instantly adjusts to difference browser window sizes.

Price: Free

Tisa WP Theme

Another great looking and responsive Themify theme with lots of big images, a beautiful color scheme and six theme skins.

Price: $39

Meerkats Responsive WordPress Theme

“The Meerkats Theme is built to respond to different platforms and devices. It is a simple and basic WordPress theme built by Gregor McKelvie. ”

Price: Free

Whiteboard Framework

“Whiteboard framework for WordPress was developed to speed up the process of developing a WordPress theme. Whiteboard does so by eliminating the time spent on code common to all WordPress themes and includes non-intrusive code that improves the overall WordPress theme in many ways – including SEO, speed, usability, and mobile support.”

Built on the Popular Less Framework, Whiteboard utilizes both HTML5 and CSS3 and gives you a nearly unbeatable starting point for developing perfectly responsive WP themes.

Price: Free

Conclusion

With these twenty amazing resources, you should be fully armed to begin creating responsive web designs in both straight HTML/CSS and WordPress. No matter what your budget is, there are several themes and templates here that are perfect for you.

Leave a comment below and let us know if we missed any. Have you come across any great responsive templates and themes? We want to see them!

Today we’re going to dig deeper into this model and build a full-on web page with it. It will by no means be ready to implement on your projects but it will give you further insight into one possible way that we will be coding websites in years to come. Plus, this stuff is just flat out fun to play with!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Highly Experimental: Webkit Only

My goal for this post was to have a working page up and running on several browsers, that didn’t happen. At this point the implementation is buggy and inconsistent across browsers, even after installing Flexie.js, I was still getting vastly different results between Firefox and Safari (I think it has to do with mixing typical margin-centered containers and Flexbox).

For this reason, today’s project will primarily be targeted at Safari and Chrome because frankly, it’s still a mess in other browsers! I definitely encourage you to follow along and then play with the finished product to see if you can get it up and running in a cross-browser implementation. If you have suggestions, I’d love to hear them in the comments!

Step 1: Reusable Classes

Since I briefly explained the basic concept of Flexbox in yesterday’s post, I’ll be focusing on implementation here. But don’t worry, you should get the gist as we go along.

The first thing we want to do is create some basic classes that will help define our layout. These attributes can be applied to an ID on an as-needed basis, but I find it helpful to and tidy to do it this way.

.hasflex {
    display: box;
    display: -webkit-box;
    display: -moz-box;
}
 
.box0 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}
 
.box1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}
 
.box2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}
 
.box3 {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
}
 
.last {
	margin-right: 0;
}

Let’s discuss how these classes work. The first class, hasflex, will be applied to a parent container whose children we want to lay out using this new Flexbox system. One thing you’ll notice is that this entire design will be completely without floats so that gives you some good indications as to where we will be implementing Flexbox in our code.

Next, we set up a few more classes to apply various box-flex values. Flexbox will conveniently distribute our child elements across the container and these will define the proportions. I believe that the default value is “0″ but the results seemed a little buggy with this assumption so I found it helpful to always just apply a value manually.

Step 2: Initial HTML & CSS

To start off your HTML document, create a container and a header. At this point, these are basic elements that we will build just like always without the aid of Flexbox.

<div id="container">
    <div id="header">
    	<h1>Design Shack Flexbox Demo</h1>
    </div>
</div>

Once you’ve got that in place, throw in the basic styles below. Basically I set up a dark body with a light 1,000px wide container that will hold all of our content. Toss in some margins to center and some basic text styles and we’re ready to move on to the fun stuff.

Note: The headline font I’ll be using is Oswald, from Google Fonts.

/*Basic Reset*/
 
* {
	padding: 0;
	margin: 0;
}
 
/*Body/Container*/
 
body {
	font-family: helvetica, arial, sans-serif;
	font-size: 15px;
	line-height: 23px;
	background: #111;
	color: #222;
}
 
 
#container {
	width: 1000px;
	margin: 0 auto;
	background: #eee;
	min-height: 1150px;
}
 
/*Header*/
 
#header {
	margin: 0 auto;
	width: 900px;
	padding-top: 20px;
	font-family: 'Oswald', arial, serif;
}

Step 3: Navigation

Now, for the navigation area, you typically create a list of links and then float them to the left. With Flexbox, the process is a little different. Here we simply apply the hasflex class that we created earlier and then use box0 for each of the list items. Applying box0 to all three has the effect of floating the links to the left but won’t distribute them all the way across the width of the container.

<div id="nav">
	<ul class="hasflex">
		<li class="box0"><a href="#">Home</a></li>
		<li class="box0"><a href="#">About</a></li>
		<li class="box0"><a href="#">Contact</a></li>
	</ul>
</div>

After this, we simply apply the same types of styles we would on any other web page. The main goal here is to space the links out a little with some margins and to make sure our links are styled properly.

/*Navigation*/
 
#nav {
    width: 900px;
    /*background: #eee;*/
    margin: 0 auto;
}
 
#nav ul {
	list-style: none;
}
 
#nav ul li {
	margin: 20px 20px 0 0px;
}
 
#nav a {
	text-decoration: none;
	color: #111;
}
 
#nav a:hover {
	text-decoration: underline;
	color: #666;
}

Step 4: The Image

Every good web page needs an image. To further illustrate how you selectively apply Flexbox only to those elements that need it, we’ll throw in a large header image using the same exact code as you typically would.

<div id="bigimage">
	<img src="http://lorempixum.com/900/300/food/1" />
</div>

/*Image*/
 
#bigimage {
	margin: 20px auto;
	width: 900px;
}

Step 5: Three Columns: Horizontal

This is where Flexbox really shines. Normally, creating a three column layout like the one shown above would involve a good amount of mathematical planning. We would need to not only split the parent container in three but also figure out the proper proportions so that the middle column is wider than the other two.

However, with Flexbox, all we have to do is apply our flexbox class in conjunction with the numbered box classes. Here I set the middle div to box2 and the others to box3. As you can see in the image above, the effect of this is an automatic distribution of the columns with the second being wider than the first.

Interestingly enough, everything I read led me to believe that the box2 class would be the narrowest in this instance, but that simply wasn’t the case in my live tests! This setup brings about a narrow first and last paragraph and a wide second paragraph.

<div id="columns" class="hasflex">
 
    <div class="box3">
    <h2>One</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="box2"> 
    <h2>Long Two</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="box3"> 
    <h2>Three</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Combine this with some basic CSS and you’ve got a quick and easy three column layout! Since Flexbox automatically takes care of the distribution relative to the parent width, any changes we make to the parent will automatically be reflected in the children.

/*Text Columns: 3 Wide*/
 
#columns {
    width: 900px;
    /*background: gray;*/
    margin: 10px auto;
}
 
#columns p {
	margin: 0 15px 0 0px;
}
 
#columns h2 {
	margin: 0 30px 0 0px;
	line-height: 35px;
	font-family: 'Oswald', arial, serif;
}

One fascinating thing about Flexbox is that we could actually reorder the columns that we setup using pure CSS. Assigning -webkit-box-ordinal-group: (a number); to each element gives you control over the order of their appearance.

Step 6: Vertical Stack

It’s important to learn that you don’t have to use vertical columns when working with Flexbox. We can use the same technique as above to stack a few paragraphs on top of each other. If you really get into Flexbox, this technique can be used to mix vertical and horizontally stacked elements, but we’ll keep it basic here just to see how it works.

<div id="rows" class="hasflex">
    <h2>Long Two</h2>
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
</div>

The primary difference here is that we’ve set box-orient to vertical, which gives us the vertical stack shown in the image above instead of the columns that we created in the previous step.

/*Text Rows*/
 
#rows {
    width: 900px;
    /*background: gray;*/
    margin: 30px auto 15px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
 
#rows p {
	margin: 0 0px 15px 0px;
}
 
#rows h2 {
	line-height: 35px;
	font-family: 'Oswald', arial, serif;
}

Step 7: Two Columns

Just to switch things up one last time, let’s create another section, this time with two columns instead of three. The principle is exactly the same. You don’t have to rethink the layout because you have two columns this time around, Flexbox takes care of all the heavy lifting once again.

<div id="twoColums" class="hasflex">
	<div class="box2">
	<h2>One</h2>
	<p class="">Lorem ipsum dolor sit amet...</p>
	</div>
 
	<div class="box1">
	<h2>Two</h2>
	<p class="">Lorem ipsum dolor sit amet...</p>
	</div>
</div>

/*twoColums*/
#twoColums {
    width: 900px;
    margin: 0px auto;
}
 
#twoColums p {
	margin: 0 20px 0 0;
}
 
#twoColums h2 {
	line-height: 35px;
	font-family: 'Oswald', arial, serif;
}

Finished Product

Check out a live demo if you’re in Safari or Chrome.

Going Further

I intentionally tried to keep this example as simple as possible. However, you can pretty easily take this layout and make it even more complex. For starters, using percentages for width will give you a nice, truly flexible layout. Also, as I mentioned above, you can perform complex actions such as rearranging columns and mixing vertical and horizontal stacks in the same row. I encourage you to play with the code as much as possible using this page as a guide.

Conclusion

This basic example is meant to shed further light into how we could be using Flexbox to create both simple and complex layouts sometime in the future. I’m fairly new to the module so this is far from perfect, as evidenced by the fact that it isn’t cross-browser compatible yet!

Despite its downfalls, you should have a strong grasp of how the module works and what can be done with a relatively small amount of code when leveraging Flexbox. Feel free to toss in plenty of suggestions in the comments!

Today’s article looks at some of the reasons that floats are pretty lame and takes a look at a number of alternative layout systems, some of which are still under development but may one day represent the standard for CSS-based layout.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Tale of Tables

Once upon a time, web designers used HTML tables to accomplish complex page layouts. Though it was a messy, non-semantic process, it attempted to make the best of the available technology to create better designs.

For newbies, when I say “non-semantic,” I mean that table-based layout is a bastardization of the table element. It’s meant to hold actual tables of information within a page, not to serve as the structure for the page itself.

Floats: The New Tables?

Today, we scoff at this practice. What a silly way to lay out a website! CSS has come to our rescue and provided us with several tools for creating much more semantic layouts that can easily achieve anything that was created with a table.

Today one of the primary ways that we have replaced our table-dependent ways is the use of floats for layout. By default, sequential HTML elements will appear vertically stacked. Floats serve as a way for us to line elements up horizontally. Float a list of li elements to the left and you’ve got yourself a nice little horizontal navigation menu.

Though many of us have simply grown accustomed to using them, floats are far from ideal. They’re awkward, buggy and difficult to learn. If you think back to when you first began CSS-based layout, the thing that had you scratching your head and troubleshooting for hours was probably a float gone wrong.

The Clearfix Band-Aid

The bane of float-based layouts (aside from IE6 margin nightmares) is of course the fact that they simply don’t play well with their container elements. In order to get the parent element to appear as if it contains floated elements, we typically insert a cleared element last in the container using “clear:both”.

Is creating an empty container to hack a broken layout a good practice? Probably not. Does it work? You bet.

A Better Clearfix

Forward thinkers have decided that this business of adding additional HTML markup is no good. The current favorite way to clear a float is to instead insert the new element using the CSS “:after” pseudo class.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Once again, this is acceptable because of how accustomed we are to messing with floats to bend them to our will. However, try taking a step back and really looking at what’s going on here. This is a mess! We’re using CSS to insert an invisible element into the HTML so that our layout problems magically disappear as we shiver at the thought of using table-based layouts because they aren’t semantic.

I’m not defending table-based layout, it’s dead and needs to stay that way, but I can’t help but wonder if future web designers will laugh at our use of floats the way that we now laugh at the thought of a web page built on a table.

The Future

You have to admit, if you really think about it, floats are a pretty screwed up and complicated way to handle page layout. I don’t see floats going completely away any time soon, they’ll likely still be useful even if we all do accept a new layout process.

However, there are several interesting layout tools on the horizon that could very well replace floats as a primary way that to structure web pages. Let’s take a look at some of these ideas and constructs and see if we can get a glimpse into what the future of CSS layout will be like.

Inline-Block

Before we dive into futuristic experimental layout techniques, it’s worthwhile to discuss inline-block as an interesting alternative to float-based layouts. Consider the snippet below:

ul li {
    display: inline-block;
    width: 100px;
    min-height: 100px; 
    vertical-align: top; /*helps with variable length content*/
}

This will actually cause our list items to appear inline while retaining their block attributes, which is completely amazing really! We get the best of both worlds.

Downfalls of Inline-Block

Andrew Tetlaw from Sitepoint recently published a fantastic article that highly praises using inline-block over floats. He correctly points out that this method works effectively on all modern browsers, including IE8 and above, which is about the same as you can expect from the pseudo-class-driven clearfix from above.

Unfortunately, as Robert Nyman points out in a similar article, this method isn’t without its problems.

In addition to the IE troubles (he has a clever hack to get support in IE7), Nyman shows using inline-block causes your layout to be somewhat whitespace dependent when it comes to your HTML. The example he uses is the following unordered list:

<ul id="display-inline-block-example">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

Believe it or not, the line returns automatically cause a slight margin to be added to the list items! The only way to fix it is to place them on the same line:

<ul id="display-inline-block-example">
    <li>Item one</li><li>Item two</li><li>Item three</li>
</ul>

Admittedly, it’s a fairly easy fix, but if you’re a fan of neatly organized code, this may make you cringe. On the whole, when compared to the trouble that we face using floats, Tetlaw has a point that this may be a better solution that you can actually use now with an acceptable amount of browser support.

Flexbox

One of the new ways that CSS3 is changing layout practices is through the Flexible Box Module, or Flexbox for short. Here’s a quote from the Flexbox w3 abstract.

[Flexbox] provides an additional layout system alongside the ones already in CSS. [CSS21] In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of “flex” to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Flexbox represents a completely new way to layout websites. You may have heard about this recently but the syntax is changing a bit so make sure you keep an eye on the working spec to stay up to date (I believe “box” will change to “flex” or “flexbox” in most cases). The current working CSS syntax for applying flexbox is as follows:

display: box;
display: -webkit-box;
display: -moz-box;

To see how it works, let’s jump right into an example. Basically, once you apply display: box to the parent element, the children can be automatically redistributed based on simple relative sizing.

Imagine we have three paragraph tags (these will serve as columns) inside a parent container with display: box applied and we want the middle column to be twice the width of the other two. Here’s what we do:

#box2 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

With that little bit of code (plus some superfluous visual styling), we can achieve the following result.

Note that the default value is “0″ for box-flex. Changing the second box to “2″ triggered the command to fill the width while making the second box wider than the other two. Let’s consider a few more examples so you can really get a feel for how it works.

As you can see, Flexbox has dramatic implications to the way we structure websites with CSS. Not only does this have the potential to solve the problems associated with floats, it makes multi-column grid-based layouts infinitely easier!

Dig Deeper

This article is merely meant as an introduction to new layout methods and is not in any way exhaustive. I’ve barely scratched the surface of what what Flexbox can do. For instance, you can accomplish the same thing we did above with vertically stacked elements and completely rearrange the boxes using only CSS.

For more on what can be done with Flexbox, I highly recommend that you play with Flexie, The Flexbox Playground. This will give you hands-on experience with the new layout system and allow you to try each setting to get a feel for the result.

The Template Layout Module

Another proposed idea for CSS layout is the Template Layout Module. Here’s a quote from the official spec.

“The properties in this specification work by associating a layout policy with an element. Rather than letting an element lay out its descendants in their normal order as inline text or as blocks of text (the policies available in CSS level 1), the policy defined in this module, called template-based positioning, gives an element an invisible grid for aligning descendant elements.”

The Template Layout Module uses a quirky but straightforward syntax that makes layout a breeze. The first thing you need to do is create a container with some child elements. For each child element, you assign an arbitrary letter (it doesn’t matter which letter, just make sure they’re unique).

#div1 {
    position: a;
}
 
#div1 {
    position: b;
}
 
#div1 {
    position: c;
}

Next, you apply a display value to the parent element using these letters to define your proportions. For example, to create three equal columns, simply type them all in a row:

#container {
    display: "abc";
}

This will give you the following result:

If you want to rearrange the boxes, simply rearrange the letters in your CSS. Instead of typing “abc”, try typing “bca”.

To create a new row, create a new set of quotes. You can repeat letters to set a sense of proportion. For instance, here we set the first row to “ab” and the second to “cc”, meaning “c” will be twice the width of “a” or “b”.

Each section (a,b,c) is referred to as a “slot”. To create an empty slot, simply use a period: “a.b.c” will create two empty slots in our row. To target a slot for additional styling, you use the slot pseudo element:

#container::slot(c) {background: gray;}

Dig Deeper

As with the previous example, there’s a lot more that can be done here such as setting heights and widths using precise dimensions or percentages. None of it is ready to use in any browser at the moment but you can install a jQuery plugin to test it out! Check out the plugin’s demo pages for some awesome coded examples of how to create any layout you want using the Template Layout Module.

Back to Tables?

The Andrew Tetlaw Sitepoint article that I mentioned before presents one more interesting option for layout.

.nav > ul {
  display: table;
  border-spacing: 0.25em;
}

Interestingly enough, setting the “display” property to “table” allows us to structure our layout as if they were tables. Right away I know this is going to freak a lot of people out. Reverting back to table-based layout!? Are you nuts? The crazy part is though that this is in fact a completely different practice than literally using a table element. Here you’re simply telling the CSS to position elements similarly to how table cells and rows are positioned.

Personally, I still like the new fancy CSS3 methods that we just covered a lot better and really have a hard time imagining this gaining widespread acceptance, but it’s worth checking out and discussing nonetheless. If you’re interested, be sure to check out Tetlaw’s explanation.

Conclusion

The point of this article was to get you thinking about how floats may not necessarily be the best way to structure websites. Though they’re one of the best solutions that we can currently use in live client projects, they represent a fairly sloppy and broken system that is far from ideal.

There are a number of ways that you can address the downfalls of floats. For now, you could check out “display: inline-block” as one option or even look into “display: table” if you’re particularly brave.

The wizards that make all this technology work recognize that the system is broken and are hard at work solving the problems with layout modules that may prove extremely useful in the future. Expect to hear a lot more on the Flexbox and Template Layout modules in the future. Who knows, one or both of these could be the standard way that future developers create web layouts!

Leave a comment and let us know your thoughts on all this. Do you think floats represent a flawed layout system? Do any of the proposed layout modules seem like a solid fix for these issues?

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

View the live examples page

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

• column-count
• column-width
• column-gap
• column-rule

At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:

1
2
3
4
5
6
7
8

.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Spanning columns

It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:

1
2
3

h2 {
column-span: all
}

Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:

In the meantime

It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.

In conclusion…

Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.

The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

• Static – 1 Column
  
  View template
  Download template

---

• Static – 2 Column
  
  View template
  Download template

---

• Static – 2 Column
  
  View template
  Download template

---

• Static – 3 Column
  
  View template
  Download template

---

• Static – 3 Column
  
  View template
  Download template

---

• Static – 3 Column
  
  View template
  Download template

---

• Fluid – 1 Column
  
  View template
  Download template

---

• Fluid – 2 Column
  
  View template
  Download template

---

• Fluid – 2 Column
  
  View template
  Download template

---

• Fluid – 3 Column
  
  View template
  Download template

---

• Fluid – 3 Column
  
  View template
  Download template

---

• Fluid – 3 Column
  
  View template
  Download template

Setting up Moo.fx

First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.

The HTML

You can download a copy of the HTML for the page to take a look and see how the effect is achieved.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

body {
	color: #222;
	font: 62.5% verdana, arial, helvetica, sans-serif;
	margin: 5px 0 0;
	padding: 0;
	text-align: center;
}
h3 {
	background: #000;
	margin: 5px 0 0;
	padding: 1px 0;
	height: 17px;
	width: 600px;
	cursor: pointer;
	font-size: 0.99em;
}
h3 a:link, h3 a:visited {
	color: #fff;
 
	padding: 2px 8px 1px;
	-moz-outline-style: none;
	display: block;
	height: 14px;
	width: 330px;
	text-decoration: none;
}
#container {
 
	width: 666px;
	text-align: left;
	margin: 0 auto;
}
#header {
	text-align: center;
}
#content {
	padding: 0 10px 25px 33px;
}
p {
	margin: 0 0 1px;
	padding: 5px;
	line-height: 15px;
}
div.wrapper {
	background-color: #EBEBEB;
}
#content div {
	margin: 0;
	padding: 0;
	height: 1%;
}
.stretcher {
	background: none !important;
}

Put it all together

Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.