The Documenting Your Life Series is presented by Western Digital. We believe your life’s most valuable moments should always be close and accessible. My Passport 2 TB portable hard drives let you dream big and carry small.

The Documenting Your Life Series is presented by Western Digital. We believe your life’s most valuable moments should always be close and accessible. My Passport 2 TB portable hard drives let you dream big and carry small.

Rafflecopter is the best thing that's come out for hosting giveaways since blog giveaways themselves. I was a little skeptical at first, but you have great customer service and answered my questions! Darcy Zalewski, DarcyAndBrian.com Not only do I sing praises as a blogger who does giveaways... but also as an active participant in entering giveaways on other blogs. Saves me so much time! “Libby” Neas, Libby's Library I love Rafflecopter! It makes setting up giveaways fast, easy, and painless for bloggers! Jerri, Simply Sweet Home

Rafflecopter is the best thing that's come out for hosting giveaways since blog giveaways themselves. I was a little skeptical at first, but you have great customer service and answered my questions! Darcy Zalewski, DarcyAndBrian.com Not only do I sing praises as a blogger who does giveaways... but also as an active participant in entering giveaways on other blogs. Saves me so much time! “Libby” Neas, Libby's Library I love Rafflecopter! It makes setting up giveaways fast, easy, and painless for bloggers! Jerri, Simply Sweet Home

You're now on our list. Don't believe us? Check your inbox for the email that proves it :-) If you want to know more about Typecast, read more about the beta, add our blog to your feed or follow us at @TypecastApp. But we'll also email you updates whenever something exciting happens.

You're now on our list. Don't believe us? Check your inbox for the email that proves it :-) If you want to know more about Typecast, read more about the beta, add our blog to your feed or follow us at @TypecastApp. But we'll also email you updates whenever something exciting happens.

As everyone in the world knows by now, Apple bumped the iPad's screen to retina-display density, quadrupling the number of pixels to a whopping 3.1 million. That's fantastic news for iPad owners—the display will be gorgeous—but it also means more headaches for designers and a potential blight on your bandwidth bill and download speed.&In bandwidth terms, pixels are heavy, and four times the pixels means four times the image size for bitmap images, give or take. If you want to take advantage of this gorgeous screen, every image you push down the wire is about to put on a ton of weight. That has implications in lots of places.

As everyone in the world knows by now, Apple bumped the iPad's screen to retina-display density, quadrupling the number of pixels to a whopping 3.1 million. That's fantastic news for iPad owners—the display will be gorgeous—but it also means more headaches for designers and a potential blight on your bandwidth bill and download speed.&In bandwidth terms, pixels are heavy, and four times the pixels means four times the image size for bitmap images, give or take. If you want to take advantage of this gorgeous screen, every image you push down the wire is about to put on a ton of weight. That has implications in lots of places.

Initializr is here to kick-start the development of your new projects. It generates templates based on HTML5 Boilerplate by allowing you to choose which parts you want or don't want from it. A&responsive templatehas also been added to start from a basic design instead of a blank page.

"H5BP" is here to handle the boring stuff you don't want to deal with. It provides a rock-solid default code that improves the cross-browser compatibility for HTML5 projects and handy tools to help their development.

Initializr is here to kick-start the development of your new projects. It generates templates based on HTML5 Boilerplate by allowing you to choose which parts you want or don't want from it. A&responsive templatehas also been added to start from a basic design instead of a blank page.

"H5BP" is here to handle the boring stuff you don't want to deal with. It provides a rock-solid default code that improves the cross-browser compatibility for HTML5 projects and handy tools to help their development.

If I want to put up a menu, I can just use their [Boostrap} code that does menus. Sure, my menu looks like all the others, and that's a good thing, for users. No need to learn a second or third way to use a menu.

I cannot agree more. Today, users are used to Facebook, used to Twitter, now used to Pinterest. They do things one way and when you take it away from them, they are confused.

Do yourself a favor and don't try re-inventing the wheel when your primary goal is for people to use your product.

If I want to put up a menu, I can just use their [Boostrap} code that does menus. Sure, my menu looks like all the others, and that's a good thing, for users. No need to learn a second or third way to use a menu.

I cannot agree more. Today, users are used to Facebook, used to Twitter, now used to Pinterest. They do things one way and when you take it away from them, they are confused.

Do yourself a favor and don't try re-inventing the wheel when your primary goal is for people to use your product.

With Colllor it is much easier to generate a consistent color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values. This tool will let you find the exact value of darker shades of any color, not just something that 'looks darker'.

With Colllor it is much easier to generate a consistent color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. All the alternative proposals produced by Colllor derive from the same color and they all have a common denominator sharing hue, lightness or saturation values. This tool will let you find the exact value of darker shades of any color, not just something that 'looks darker'.

Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.

Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.

Since publishing this yesterday, I’ve revised the post in response to many people saying that this is simply a stop-gap for browsers without&background-sizesupport. That’s true to a point, but the method proposed here offers several advantages to the&CSS-only approach.

Responsive web design, we have a problem.

We apply percentage-based widths to our&img&elements to get fluid images and this is a very good thing. But what about background images? Support for&background-sizeis pretty abysmal right now and still isn’t bulletproof, even when it&is&supported (I’ll get to that in a second), so we’ve been hacking our way around it, usually by using inlineimg&elements and absolutely positioning them behind the content. This is all well and good, but at certain browser widths, it breaks.

Since publishing this yesterday, I’ve revised the post in response to many people saying that this is simply a stop-gap for browsers without&background-sizesupport. That’s true to a point, but the method proposed here offers several advantages to the&CSS-only approach.

Responsive web design, we have a problem.

We apply percentage-based widths to our&img&elements to get fluid images and this is a very good thing. But what about background images? Support for&background-sizeis pretty abysmal right now and still isn’t bulletproof, even when it&is&supported (I’ll get to that in a second), so we’ve been hacking our way around it, usually by using inlineimg&elements and absolutely positioning them behind the content. This is all well and good, but at certain browser widths, it breaks.

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical entries from our code. So let’s dig&in. A is a thematic grouping of content, typically preceded by header, possibly with a footer after. s can be nested inside of each other, if needed, and can hold any amount of typical markup. The of a , typically a headline or grouping of headlines, but may also contain supplemental information about the section.

section header nav footer article

&i think this is awesome. It is time for structural tags ot mean something, not just using DIVs around.

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical entries from our code. So let’s dig&in. A is a thematic grouping of content, typically preceded by header, possibly with a footer after. s can be nested inside of each other, if needed, and can hold any amount of typical markup. The of a , typically a headline or grouping of headlines, but may also contain supplemental information about the section.

section header nav footer article

&i think this is awesome. It is time for structural tags ot mean something, not just using DIVs around.

We live in a world of short attention spans. Attention span is the amount of time that a person can concentrate on a task without becoming distracted.

In order to keep your website visitor’s attention sustained, you need to present novelty every second.

How you structure the content on your pages matters. Start with a clear introduction to explain what it’s all about (value proposition promise), followed with the body of your presentation (sales copy) and finish with a conclusion, direct your audience to what’s next (call to action).

We know that&people don’t read everything&on our website. There’s no way of making them either.&What you can do is enable them to scan better, so they’d be able to grab the most important parts quickly.

We live in a world of short attention spans. Attention span is the amount of time that a person can concentrate on a task without becoming distracted.

In order to keep your website visitor’s attention sustained, you need to present novelty every second.

How you structure the content on your pages matters. Start with a clear introduction to explain what it’s all about (value proposition promise), followed with the body of your presentation (sales copy) and finish with a conclusion, direct your audience to what’s next (call to action).

We know that&people don’t read everything&on our website. There’s no way of making them either.&What you can do is enable them to scan better, so they’d be able to grab the most important parts quickly.

It’s always been important to make your website fast. Not only is it obvious visitors are going to prefer it but it’s now well-known that Google uses loading speed as a ranking metric. The initial page load of your website is perhaps the most important. The longer it takes to load the more visitors are going to press back and find an alternative. A slow website is something that could potentially frustrate visitors so it’s important to try and remove it from the equation.

How to make your website faster?

Page size -&If you hand control of your content over to a CMS you also lose a lot of control over the code which can severely negatively impact your page size.

Serve your pages compressed -&GZip

Put your Javascript at the bottom

Use sprite sheets -&All the images in one file mean there’s only one HTTP request, so the cost of the overhead is only paid once. You can use this image as a background image for a div

Cookieless Domains and Multiple Domains -&If you’re hosting your images on the same domain as your webpage and you have cookies of some description (don’t forget sessions still use a cookie!) then with every request to image files, CSS files, JS etc the cookie data is also sent with the request. This adds to the amount of data that needs to be uploaded from the client.

It’s always been important to make your website fast. Not only is it obvious visitors are going to prefer it but it’s now well-known that Google uses loading speed as a ranking metric. The initial page load of your website is perhaps the most important. The longer it takes to load the more visitors are going to press back and find an alternative. A slow website is something that could potentially frustrate visitors so it’s important to try and remove it from the equation.

How to make your website faster?

Page size -&If you hand control of your content over to a CMS you also lose a lot of control over the code which can severely negatively impact your page size.

Serve your pages compressed -&GZip

Put your Javascript at the bottom

Use sprite sheets -&All the images in one file mean there’s only one HTTP request, so the cost of the overhead is only paid once. You can use this image as a background image for a div

Cookieless Domains and Multiple Domains -&If you’re hosting your images on the same domain as your webpage and you have cookies of some description (don’t forget sessions still use a cookie!) then with every request to image files, CSS files, JS etc the cookie data is also sent with the request. This adds to the amount of data that needs to be uploaded from the client.

Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system. Here’s what we have if we take away the generic base class and scope things per component with prefixes:

.btn-success { ... }
.alert-success { ... }

This way, the base class is at the component level and not the entire system level. In other words, our base classes have become .btn and .alert, not .success. There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system.

Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system. Here’s what we have if we take away the generic base class and scope things per component with prefixes:

.btn-success { ... }
.alert-success { ... }

This way, the base class is at the component level and not the entire system level. In other words, our base classes have become .btn and .alert, not .success. There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. All plugins Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Typeahead A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults. Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills. Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. All plugins Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Typeahead A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults. Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills. Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.

You might not have heard about Mobify, but it’s helped 20,000 customers optimize their websites for mobile, and clients include Starbucks, Bonobos, Threadless and many others. The company said it had 167 million unique visitors visit Mobify-powered mobile websites last year, about 20 percent of all smartphone users. That’s interesting by itself and falls in line with other reports about how much traffic is going mobile. But in talking with Mobify’s CEO Igor Faletski, one thing that stood out to me was that almost all of Mobify’s work has been to optimize sites for smartphones last year. Very few customers have thought to optimize their websites for tablets like the iPad. Instead they have relied on native apps or just a desktop version of their website. Compuware came to a similar conclusion when surveying 30 of the top retailers’ sites and finding that none were optimizing their sites for tablets.

You might not have heard about Mobify, but it’s helped 20,000 customers optimize their websites for mobile, and clients include Starbucks, Bonobos, Threadless and many others. The company said it had 167 million unique visitors visit Mobify-powered mobile websites last year, about 20 percent of all smartphone users. That’s interesting by itself and falls in line with other reports about how much traffic is going mobile. But in talking with Mobify’s CEO Igor Faletski, one thing that stood out to me was that almost all of Mobify’s work has been to optimize sites for smartphones last year. Very few customers have thought to optimize their websites for tablets like the iPad. Instead they have relied on native apps or just a desktop version of their website. Compuware came to a similar conclusion when surveying 30 of the top retailers’ sites and finding that none were optimizing their sites for tablets.

My wife (and it seems every woman in America) is now addicted to Pinterest. It’s the new magazine. I think it’s replacing time spent on TMZ. It’s graphical, beautiful, simple to consume, and has a wonderful layout. But that product is the perfect example of perfectly suited for the web given the real estate available.

Ah Pinterest, they do it all right...

Try to think about how leveraging the web will do the following:

Create a differentiated product versus your mobile-only competitors. Use that as a source of competition.

Have the ability to enable “content creation” and “content curation” in a way that makes all of the mobile consumption by other users a better experience. If you have a fashion-sharing product, wouldn’t viewing collections of outfits on mobile devices be a richer experience if there were more content and deeper content because your web product enabled your power users to more easily create it?

Build features that make using native-phone apps pointless. Case in point: Text messaging. If you use the native device your messages get purged eventually on most devices. You also lose them if you lose your actual phone. Having a web product abstracts the text message from the device and makes it a truly cloud service. When consumers realize this – who in their right mind would keep their text messages locked on their mobile device?

My wife (and it seems every woman in America) is now addicted to Pinterest. It’s the new magazine. I think it’s replacing time spent on TMZ. It’s graphical, beautiful, simple to consume, and has a wonderful layout. But that product is the perfect example of perfectly suited for the web given the real estate available.

Ah Pinterest, they do it all right...

Try to think about how leveraging the web will do the following:

Create a differentiated product versus your mobile-only competitors. Use that as a source of competition.

Have the ability to enable “content creation” and “content curation” in a way that makes all of the mobile consumption by other users a better experience. If you have a fashion-sharing product, wouldn’t viewing collections of outfits on mobile devices be a richer experience if there were more content and deeper content because your web product enabled your power users to more easily create it?

Build features that make using native-phone apps pointless. Case in point: Text messaging. If you use the native device your messages get purged eventually on most devices. You also lose them if you lose your actual phone. Having a web product abstracts the text message from the device and makes it a truly cloud service. When consumers realize this – who in their right mind would keep their text messages locked on their mobile device?

Travel comparison site Kayak.com has redesigned its Web site so it looks like its mobile app — not the other way around. “We run the iPhone and iPad teams separately from the Web team, and the Web team had fallen behind,” said Paul English, co-founder and CTO. The goal with the site’s design has always been to provide a simple layout, so that users can easily sift through thousands of flights, hotels and car rentals to find what they are looking for quickly.

This is an interesting approach, make your website look as close as it can from your mobile app. Simple layout, easy usability, if it works for mobile, makes sense it will work for the web.

Travel comparison site Kayak.com has redesigned its Web site so it looks like its mobile app — not the other way around. “We run the iPhone and iPad teams separately from the Web team, and the Web team had fallen behind,” said Paul English, co-founder and CTO. The goal with the site’s design has always been to provide a simple layout, so that users can easily sift through thousands of flights, hotels and car rentals to find what they are looking for quickly.

This is an interesting approach, make your website look as close as it can from your mobile app. Simple layout, easy usability, if it works for mobile, makes sense it will work for the web.

At 15 billion page views per month across more than&41 million blogs, “with that many page views we could throw AdSense up there tomorrow and be profitable,” Karp said. But that’s not what he wants to do.

Yeah Adsense is defintiely not the way, not something Tumblers will like to see on their blogs.

The most interesting thing here is his feedback about the network effect:

When the site really took off was when the curators — people who primarily respond to other Tumblr users’ content by “reblogging” it on their own pages — came on board.

At 15 billion page views per month across more than&41 million blogs, “with that many page views we could throw AdSense up there tomorrow and be profitable,” Karp said. But that’s not what he wants to do.

Yeah Adsense is defintiely not the way, not something Tumblers will like to see on their blogs.

The most interesting thing here is his feedback about the network effect:

When the site really took off was when the curators — people who primarily respond to other Tumblr users’ content by “reblogging” it on their own pages — came on board.

When choosing a navigation bar type, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator you need better content planning and organization

When choosing a navigation bar type, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator you need better content planning and organization

I remember exactly when I decided to stop reading Mashable. I saw the headline Facebook Users Beware: Facebook’s New Feature Could Embarrass You on Twitter, clicked through, hunted for the words of the article among the sea of ads and social sharing

I’m sure the article was great for traffic, though. It is the perfect linkbait title backed up by a perfect SEO-ified URL (/new-facebook-feature).

I think I’ve finally hit the limit of my tolerance for web content that’s designed to make advertisers happy.

I used to believe that if you write with passion and clarity about a topic you know well (or want to know more about), you will find and build an audience. I believed that maybe, if you’re smart about it, you could find a way for some part of that audience to pay you money to sustain whatever obsession drove you to self-publishing (and to do it without selling your soul in the process).

I remember exactly when I decided to stop reading Mashable. I saw the headline Facebook Users Beware: Facebook’s New Feature Could Embarrass You on Twitter, clicked through, hunted for the words of the article among the sea of ads and social sharing

I’m sure the article was great for traffic, though. It is the perfect linkbait title backed up by a perfect SEO-ified URL (/new-facebook-feature).

I think I’ve finally hit the limit of my tolerance for web content that’s designed to make advertisers happy.

I used to believe that if you write with passion and clarity about a topic you know well (or want to know more about), you will find and build an audience. I believed that maybe, if you’re smart about it, you could find a way for some part of that audience to pay you money to sustain whatever obsession drove you to self-publishing (and to do it without selling your soul in the process).

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser responsive design with HTML5 CSS3 media queries.

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser responsive design with HTML5 CSS3 media queries.

The calc() function can be used to specify lengths. For example, you can use it for values of borders, margins, paddings, fonts, etc. Calculating widths can be extremely complicated, especially in fluid layouts; calc() is unique because it lets you make these calculations within the CSS itself.

The calc() function can be used to specify lengths. For example, you can use it for values of borders, margins, paddings, fonts, etc. Calculating widths can be extremely complicated, especially in fluid layouts; calc() is unique because it lets you make these calculations within the CSS itself.

You don’t need permission to link. There is no reason for you to contact the site owner asking if you can link to their site. The reason their page is online is because they want to share it. So, if you want to link to a site… just do it.

You don’t need permission to link. There is no reason for you to contact the site owner asking if you can link to their site. The reason their page is online is because they want to share it. So, if you want to link to a site… just do it.