Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.

What is responsive design?

Let’s just get right into it: Believe it or not, the Think Vitamin blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the design looks like at various screen resolutions:

It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. If you haven’t read his seminal article about responsive web design, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.

So, what is responsive design exactly? Actually, a better question to ask might be, what problem does responsive web design solve? Well, as you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web had changed.

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.

It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.

Fluid Grids

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:

If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

@media screen and (min-width: 480px) {
 
  .content {
    float: left;
  }
 
  .social_icons {
    display: none
  }
 
  // and so on...
 
}

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.

Resources

Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service Think Vitamin Membership we have many videos that go in depth on the topic. Here are some links:

• Responsive Web Design Video Course on Think Vitamin Membership
• Video: Introduction to Responsive Web Design
• Ethan Marcotte’s article on Responsive Web Design
• The W3C specification for CSS3 Media Queries
• A great roundup of responsive design techniques via Smashing Magazine

Hopefully this article helped, but if you’re still feeling confused about responsive design, don’t be afraid to leave a question or comment. If you’re already utilizing responsive web design in your site or web application, share the link here so we can see!

Go to Source

It’ll come as no surprise to those who have been following the releases of this practical series by A Book Apart, that this is a really great little book. And by ‘little’ I mean exactly that. (It only took about 3 hours from start to finish, and I’m definitely not the world’s fastest reader!). But that’s by no means a reflection on the quality of the content.

Responsive Web Design is a very concise and to-the-point book on how to apply front end development techniques in order to make a single website adapt to be more easily viewed at multiple screen resolutions, and on multiple mobile and desktop platforms.

The book covers every step of the process, from the considerations that need to be made at the design stage, to progressively enhancing the functionality and content of the pages depending on the device that it’s viewed on. The chapters cover Flexible Grids, Flexible Images, and Media Queries; all the components needed to make your designs responsive.

It goes into (almost) the perfect amount of detail at every stage. It doesn’t get too bogged down in code, but shows just enough to explain the point, and Ethan writes with a tone of voice that’s engaging and light hearted – a definite contrast to some of the books I’ve read. And it makes a difference. I don’t have much time for reading, and to be honest I quickly get bored with books, no matter how useful they may be. Most of the time I’ll start a book and by about half way though I’ve already started skipping paragraphs and sections to get to the bits that I actually need to know, but this time I read every word. It was easy to stop and pick up where you left off, but due to it’s pocket-sized nature, you could easily finish it in one sitting if you really wanted to.

My only complaint, and in my opinion the only two places that the book lacked a little extra detail were in the Media Queries chapter, and in the Javascript section at the end.

In all fairness, the Media Queries were explained very well, and for something that can be a little confusing to get your head around they were made quite clear. I just feel that Ethan could have covered the benefits and uses of stringing queries together in a little more depth. It is mentioned, but almost brushed passed. All he says is this:

“What’s really exciting is that we can chain multiple queries together with the ‘and’ keyword:

@media screen and (min-device-width: 480px) and (orientation: landscape) {...}

This allows us to test multiple features in a single query, creating more complex tests for the devices viewing our designs.”

It would only have taken a paragraph or two more to go into a little extra depth and describe a couple of scenarios where this would be very useful, and for a book which makes a point of explaining every decision and giving an example of how it could be applied in ‘real life’, I was surprised how quickly the chapter moved on – especially considering he referred to it as really exciting.

My point on Javascript is also a little picky. There is a section right at the end which covers the image slider, or ‘carousel’, that Ethan implements on his example website, which works using jQuery. Now, this isn’t a book on jQuery, so it’s fine to go into minimal detail on this, but where I think the section lacks is on disabling certain functions based on the device you’re using.

Anyone who cares about user experience will know that jQuery animations can sometimes take a lot of processing power and are likely to run a bit slow on most tablet and mobile platforms. You also can’t take advantage of :hover animations as there really isn’t such a thing when using a touch screen (see our post on Designing for Touch Screens). The chapter talks about adding the following code to only load functions if the screen is above a certain size:

if (screen.width > 480 {
$(document.ready(function() {...};
}

…Which is great. However it would have been really nice if there was just a little more detail on targeting specific devices, rather than simply enabling it over a certain screen size. The reason I say this is because I’m not sure that targeting the screen resolution (alone) is the best solution to progressive enhancement. If you want to disable things on tablet devices then that means targeting a much bigger resolution than 480px, and then you start entering the realms of desktop computers and browsers that you most definitely do want to run the jQuery. I think this solution combined with specifically targeting the most popular tablets / mobiles could be the best option, and it would have been a useful final note in the chapter if it had been included.

All in all though I couldn’t recommend this book enough. It’s very intelligently written and is perfectly concise and very interesting. For anyone who is new to Responsive Web Design it will open your mind to exciting new possibilities, and for anyone who is already familiar with this method of web development it will almost certainly build on the knowledge you have, and introduce you to a better, more informed way of approaching your responsive projects.

As a finalt note, I’m glad that Ethan makes a point of explaining that this technique should not be used on every project. There have been a few arguments spark over the responsive ‘fad’ as some like to think of it, condoning those who support it on the basis that, like many of the latest advancements in web technology, it can be and will be abused. Despite Ethan’s book shouting about how great responsive websites are, he stands up to the fact that you should always consider other options and do what’s best for the client and their users.

For anyone who has already read this book – What do you think?

Go to Source

New Theme: Preview

I want to open with GMail’s newest addition: the Preview theme. This is a theme that mimic’s Google+ and Google Calendar’s redesign, and I’ve got to say it’s super clean.

Preview (From the GMail Blog)

You can see that the spacing is much better, the buttons are a little bigger and better defined, and each subject line is given more screen real estate. Overall, I think it’s a big improvement over old design. To get the new design, in GMail go to Settings->Themes and enable “Preview”.

There is also “Preview Dense,” which removes some extra padding as it was designed for lower screen resolutions.

The People Widget

GMail’s People widget (enabled by default I believe) is a slick little way to get a quick overview of the contact info for whomever’s email you’re viewing.

People widget (From the GMail Blog)

As you can see from the screenshot, you’ve got the person’s name & email address, avatar, and 4 buttons: Google Chat, Email, Phone, and options, where you can edit the contact, view recent mail, and more. Underneath that there is a “Show details” link that will reveal your most recent conversations with that person.

If you have the extension that puts Google Chat on the right side, you will not see this widget.

Rapportive

Do you like the People widget, but want a little more bang for your buck? If you’re a Chrome, Firefox, Safari, or Mailplane, you’re in luck! The Rapportive add-on for these apps adds a right sidebar much like the People widget to each conversation in GMail, but there is a lot more information.

Rapportive

Rapportive will also display contact information (phone, email, Google Chat) and recent conversations. However, it adds in a few features, namely: Facebook, LinkedIn, Twitter, and some other social networks. Then there is my favorite feature, which is the inline notes feature; it allows you to add and display notes from within the Rapportive sidebar.

Boomerang

Boomerang is a plugin I feel I could probably do an entire review on. This awesome little app allows you to manage your inbox by scheduling emails you send or want returned to your inbox at a later date.

Boomerang

As someone who’s very meticulous about his inbox, I can truly attest to just how useful this plugin is. It’s first major feature is the ability to archive emails and have them returned to your inbox at a later date. I generally like to keep emails in my inbox until I attend to them, but sometimes I know I won’t be able to for a few days. This is perfect for me.

The second feature is for scheduling emails to send at a specific time. You write up the email or response, save it, and schedule it by pressing the “Send Later” button. This is good if, for example, you like to send your follow up emails at the same time every week. Write the email while you’re thinking about it, and schedule it to be sent.

I’m sure you could think up some other reasons to respond to an email but not send it until later as well

One Inbox for All of Your Email Addresses

(Sidebar: I was going to name this section, “One Inbox to Rule Them All.”)

I have a ton of email addresses. One for each of my important domains, a personal one, one for the university I teach at, and a few more I don’t use. Thanks to GMail, I don’t have to run all over the Internet to check my many mailboxes.

There are two things you can do to make GMail your one-stop shop for all of your email:

First, forward all of your email to one address (you do this from each individual address inbox). Similarly, you can use GMail to check the other inboxes that support POP3. You do that by going to Settings->Accounts and Import and pressing the “Add POP3 email Account” button.

Add POP3 Email

Next, make it so you can send email as your other addresses in GMail. To do that, follow these steps:

1. Under Accounts and Import, find and press the “Send mail from another address” button
2. Put in the email address you want to send from
3. Select if you want to use the SMTP settings for that domain (I usually don’t, though it’s recommended for professional domains).
4. Get and input the verification code

If you’ve already set up forwarding, you won’t have to leave your GMail inbox to get the verification code!

Once you set up a new email address to send from, you can make it the default one for your GMail account. You can also choose to automatically reply using whatever email address that email was sent to.

The "Send mail as" Area

Use the “+” Sign to Create Multiple Addresses

Ever want to sign up for a new service but were hesitant to use your primary address? GMail offers an interesting feature so that you don’t have to worry about that. Just add a + sign and any word after your username, but before the @ and it’s like you have a whole other email address (ex: joec+newsite@gmail.com). Then, set up a filter with that address in the “To” field and filter it however you’d like.

An example is how I use this for newsletter subscriptions. So they aren’t cluttering up my inbox, I sign up for newsletters with jcasabona+subscriptions@gmail.com. I have a filter set up so that anything that goes to that address skips my inbox and goes to a label called “Subscriptions.” Then I can read all the newsletters when I have some time!

Forgot Attachment and Undo Send

We’ve all done it, and we’ve all felt stupid after: prematurely sending an email and forgetting an attachment are two things that happen all the time. Luckily, the fine people at Google know this and have created two lab features to help us prevent these little email faux pas.

The first is Forgot Attachment. I actually just read that this lab feature graduated into a regular GMail features, so you shouldn’t have to do anything to enable it. GMail will scan your email for forms of the word ‘attachment’ and then check to see that you have actually attached something. If you didn’t, a little alert box will pop-up asking you if you forgot to attach something. This has saved me countless follow-up emails.

Forgot Attachement

The second is a lab feature called Undo Send. You can enable it by going to Settings->Labs. This feature will give you a window of 5, 10, 20, or 30 seconds to undo sending an email (configurable in Settings->General once the feature is enabled). I cannot tell you how many times I’ve used this feature, either because I caught some spelling/grammar error at the last second, or I decide sending the email might be a bad idea.

Undo Send

Default Reply to All and Send & Archive

These two lab features are designed to remove a couple of clicks from your overall inbox experience. The are Default Reply to All and Send & Archive.

As you probably know, if you want to Reply to everyone in an email, you need to specifically click “Reply to All.” Default Reply to All makes it so when you press the “Reply” button, you are automatically replaying to everyone in the ‘To’ and ‘CC’ fields. If you don’t want to Reply to All, simply press the “Reply” button again.

The “Send & Archive” button is one I absolutely love. It used to be the case that I’d reply to an email, let it send, then press the archive button to get it out of my inbox. With the Send & Archive feature, the email is sent and then the conversation is automatically archived. Words cannot describe how much I love this.

Both of these features can be enabled through Settings->Lab.

Bonus: Add any Gadget by URL

This lab feature will allow you to add any Google Gadget right into GMail. All you need to do is grab the URL from the developer. I’ve added Google Calendar and Remember the Milk, but the possibilities are endless.

Conclusion

Obviously there are scores of other additions to GMail you can make between GMail Labs, Google Gadgets, and browser extensions. There are also a ton of little hacks like the + sign one you can do if you can find the right blog post! My suggestion would be to mess around with GMail and check out the Help Section for more tips and tricks. If you have one I didn’t mention here, let us know about it in the comments!

Go to Source

New Theme: Preview

I want to open with GMail’s newest addition: the Preview theme. This is a theme that mimic’s Google+ and Google Calendar’s redesign, and I’ve got to say it’s super clean.

Preview (From the GMail Blog)

You can see that the spacing is much better, the buttons are a little bigger and better defined, and each subject line is given more screen real estate. Overall, I think it’s a big improvement over old design. To get the new design, in GMail go to Settings->Themes and enable “Preview”.

There is also “Preview Dense,” which removes some extra padding as it was designed for lower screen resolutions.

The People Widget

GMail’s People widget (enabled by default I believe) is a slick little way to get a quick overview of the contact info for whomever’s email you’re viewing.

People widget (From the GMail Blog)

As you can see from the screenshot, you’ve got the person’s name & email address, avatar, and 4 buttons: Google Chat, Email, Phone, and options, where you can edit the contact, view recent mail, and more. Underneath that there is a “Show details” link that will reveal your most recent conversations with that person.

If you have the extension that puts Google Chat on the right side, you will not see this widget.

Rapportive

Do you like the People widget, but want a little more bang for your buck? If you’re a Chrome, Firefox, Safari, or Mailplane, you’re in luck! The Rapportive add-on for these apps adds a right sidebar much like the People widget to each conversation in GMail, but there is a lot more information.

Rapportive

Rapportive will also display contact information (phone, email, Google Chat) and recent conversations. However, it adds in a few features, namely: Facebook, LinkedIn, Twitter, and some other social networks. Then there is my favorite feature, which is the inline notes feature; it allows you to add and display notes from within the Rapportive sidebar.

Boomerang

Boomerang is a plugin I feel I could probably do an entire review on. This awesome little app allows you to manage your inbox by scheduling emails you send or want returned to your inbox at a later date.

Boomerang

As someone who’s very meticulous about his inbox, I can truly attest to just how useful this plugin is. It’s first major feature is the ability to archive emails and have them returned to your inbox at a later date. I generally like to keep emails in my inbox until I attend to them, but sometimes I know I won’t be able to for a few days. This is perfect for me.

The second feature is for scheduling emails to send at a specific time. You write up the email or response, save it, and schedule it by pressing the “Send Later” button. This is good if, for example, you like to send your follow up emails at the same time every week. Write the email while you’re thinking about it, and schedule it to be sent.

I’m sure you could think up some other reasons to respond to an email but not send it until later as well

One Inbox for All of Your Email Addresses

(Sidebar: I was going to name this section, “One Inbox to Rule Them All.”)

I have a ton of email addresses. One for each of my important domains, a personal one, one for the university I teach at, and a few more I don’t use. Thanks to GMail, I don’t have to run all over the Internet to check my many mailboxes.

There are two things you can do to make GMail your one-stop shop for all of your email:

First, forward all of your email to one address (you do this from each individual address inbox). Similarly, you can use GMail to check the other inboxes that support POP3. You do that by going to Settings->Accounts and Import and pressing the “Add POP3 email Account” button.

Add POP3 Email

Next, make it so you can send email as your other addresses in GMail. To do that, follow these steps:

1. Under Accounts and Import, find and press the “Send mail from another address” button
2. Put in the email address you want to send from
3. Select if you want to use the SMTP settings for that domain (I usually don’t, though it’s recommended for professional domains).
4. Get and input the verification code

If you’ve already set up forwarding, you won’t have to leave your GMail inbox to get the verification code!

Once you set up a new email address to send from, you can make it the default one for your GMail account. You can also choose to automatically reply using whatever email address that email was sent to.

The "Send mail as" Area

Use the “+” Sign to Create Multiple Addresses

Ever want to sign up for a new service but were hesitant to use your primary address? GMail offers an interesting feature so that you don’t have to worry about that. Just add a + sign and any word after your username, but before the @ and it’s like you have a whole other email address (ex: joec+newsite@gmail.com). Then, set up a filter with that address in the “To” field and filter it however you’d like.

An example is how I use this for newsletter subscriptions. So they aren’t cluttering up my inbox, I sign up for newsletters with jcasabona+subscriptions@gmail.com. I have a filter set up so that anything that goes to that address skips my inbox and goes to a label called “Subscriptions.” Then I can read all the newsletters when I have some time!

Forgot Attachment and Undo Send

We’ve all done it, and we’ve all felt stupid after: prematurely sending an email and forgetting an attachment are two things that happen all the time. Luckily, the fine people at Google know this and have created two lab features to help us prevent these little email faux pas.

The first is Forgot Attachment. I actually just read that this lab feature graduated into a regular GMail features, so you shouldn’t have to do anything to enable it. GMail will scan your email for forms of the word ‘attachment’ and then check to see that you have actually attached something. If you didn’t, a little alert box will pop-up asking you if you forgot to attach something. This has saved me countless follow-up emails.

Forgot Attachement

The second is a lab feature called Undo Send. You can enable it by going to Settings->Labs. This feature will give you a window of 5, 10, 20, or 30 seconds to undo sending an email (configurable in Settings->General once the feature is enabled). I cannot tell you how many times I’ve used this feature, either because I caught some spelling/grammar error at the last second, or I decide sending the email might be a bad idea.

Undo Send

Default Reply to All and Send & Archive

These two lab features are designed to remove a couple of clicks from your overall inbox experience. The are Default Reply to All and Send & Archive.

As you probably know, if you want to Reply to everyone in an email, you need to specifically click “Reply to All.” Default Reply to All makes it so when you press the “Reply” button, you are automatically replaying to everyone in the ‘To’ and ‘CC’ fields. If you don’t want to Reply to All, simply press the “Reply” button again.

The “Send & Archive” button is one I absolutely love. It used to be the case that I’d reply to an email, let it send, then press the archive button to get it out of my inbox. With the Send & Archive feature, the email is sent and then the conversation is automatically archived. Words cannot describe how much I love this.

Both of these features can be enabled through Settings->Lab.

Bonus: Add any Gadget by URL

This lab feature will allow you to add any Google Gadget right into GMail. All you need to do is grab the URL from the developer. I’ve added Google Calendar and Remember the Milk, but the possibilities are endless.

Conclusion

Obviously there are scores of other additions to GMail you can make between GMail Labs, Google Gadgets, and browser extensions. There are also a ton of little hacks like the + sign one you can do if you can find the right blog post! My suggestion would be to mess around with GMail and check out the Help Section for more tips and tricks. If you have one I didn’t mention here, let us know about it in the comments!

Go to Source

Josh Clark, author of Tapworthy: Designing Great iPhone Apps, summarizes and opines on many of the debates circulating the community right now regarding responsive design and mobile-optimized content. It’s a good read.

It’s been 4 years since I wrote my own thoughts on the topic, and occasionally I’m asked if I plan to write a second edition. Short answer: If I were miraculously to find the time for such a project, I would force myself to write a new title rather than update the existing one. With the plethora of touchscreen devices unveiled in the last 4 years — and the incredible range of screen resolutions — I don’t believe “mobile web” is the right label for the discussion anymore. I’m still searching for the right label.

Go to Source

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook, on Stumbleupon or by subscribing to our RSS feed.

Bones – A WordPress Development Theme Themble

Bones – A WordPress Development Theme Themble →

Pixel Proliferation: A Toolset For Managing Screen Resolutions

Pixel Proliferation →

holmes.css – CSS Markup Detective

holmes.css – CSS Markup Detective →

CSS3 Facebook Buttons

CSS3 Facebook Buttons →

CSS3 Tooltips

CSS3 Tooltips →

FFFFALLBACK – A simple tool for bulletproof web typography

FFFFALLBACK →

Europe, CSS & jQuery Clickable Map

Europe, CSS & jQuery Clickable Map →

Apprise – The attractive Alert Alternative for jQuery

Apprise – The attractive Alert Alternative for jQuery →

Peity – Progressive <canvas> Pie Charts

Peity – Progressive <canvas> Pie Charts →

Widescreen Display PSD

Widescreen Display PSD →

yolink – Enhanced Search Functionality to your Sites or Blogs

yolink →

7 Things Not to do When Launching a New Blog

7 Things Not to do When Launching a New Blog →

Subtle Patterns – High quality patterns for your next web project

Subtle Patterns →

Fontself – Colorful Handmade Messages with a Wide Range of Bitmap Fonts

Fontself →

Fox Font (Free)

Fox Font →

Learn To Create A Camera Lens In Photoshop

Learn To Create A Camera Lens In Photoshop →

Clean Social Icons

Clean Social Icons →

Free Retro Vintage WordPress theme

Free Retro Vintage WordPress theme →

Manies Skily – Free Template for Gallery and Portfolio Website

Manies Skily →

Basal Icons – 50 Web Developer Themed Icons

Basal Icons →

FREE “Follow me on Twitter” Shirt with QR Code Photoshop Template

FREE “Follow me on Twitter” Shirt with QR Code Photoshop Template →

Previous Weekly Design News…

Design News Roundup Archives →

Go to Source

Advertise here with BSA

This is our weekly column were we share our favorites design related articles, resources and resources all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook, on Stumbleupon or by subscribing to our RSS feed.

Bones – A WordPress Development Theme Themble

Bones – A WordPress Development Theme Themble →

Pixel Proliferation: A Toolset For Managing Screen Resolutions

Pixel Proliferation →

holmes.css – CSS Markup Detective

holmes.css – CSS Markup Detective →

CSS3 Facebook Buttons

CSS3 Facebook Buttons →

CSS3 Tooltips

CSS3 Tooltips →

FFFFALLBACK – A simple tool for bulletproof web typography

FFFFALLBACK →

Europe, CSS & jQuery Clickable Map

Europe, CSS & jQuery Clickable Map →

Apprise – The attractive Alert Alternative for jQuery

Apprise – The attractive Alert Alternative for jQuery →

Peity – Progressive <canvas> Pie Charts

Peity – Progressive <canvas> Pie Charts →

Widescreen Display PSD

Widescreen Display PSD →

yolink – Enhanced Search Functionality to your Sites or Blogs

yolink →

7 Things Not to do When Launching a New Blog

7 Things Not to do When Launching a New Blog →

Subtle Patterns – High quality patterns for your next web project

Subtle Patterns →

Fontself – Colorful Handmade Messages with a Wide Range of Bitmap Fonts

Fontself →

Fox Font (Free)

Fox Font →

Learn To Create A Camera Lens In Photoshop

Learn To Create A Camera Lens In Photoshop →

Clean Social Icons

Clean Social Icons →

Free Retro Vintage WordPress theme

Free Retro Vintage WordPress theme →

Manies Skily – Free Template for Gallery and Portfolio Website

Manies Skily →

Basal Icons – 50 Web Developer Themed Icons

Basal Icons →

FREE “Follow me on Twitter” Shirt with QR Code Photoshop Template

FREE “Follow me on Twitter” Shirt with QR Code Photoshop Template →

Previous Weekly Design News…

Design News Roundup Archives →

Advertise here with BSA

Go to Source

It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.

Requirements: -
Demo: http://punchcut.com/perspectives/expanding-universe-toolset…
License: License Free

Sponsors

Using What Font is you can identify the font you are looking for!

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

It includes:

• a collection of Photoshop® CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios.
• a set of layered Photoshop CS5 PSDs each providing common devices (iPhone4, Google Nexus, Motorola XOOM and more.) for comping and design presentations. These devices cover the standard ratios and device types (televisions, tablets, smartphones). The screen sizes are to scale to help put designs in accurate and realistic context.
• a reference chart for resolutions and device landscape.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Go to Source

With the help of some small HTML, nifty CSS and loads of jQuery, we’re able to create an animated fullscreen background image slideshow. Read the rest of this article to learn how it’s built.

You can easily change the script by changing some variables. It also features image preloading and keyboard navigation (try pressing the numeric keys). The background images have a width of 2000px, just to cover most of the currently used screen resolutions. Check out the demo what we’re going to create!

  

The script uses the Templates and Easing jQuery plugins. Tested and working on Firefox, Safari and Chrome. I’ve added a reference video below to show how the page should look like. As always, comments are left on the source code to explain what it does.

Read more…

Go to Source

  

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

The Concept Of Responsive Web Design

Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:

“Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”

Transplant this discipline onto Web design, and we have a similar yet whole new idea. Why should we create a custom Web design for each group of users; after all, architects don’t design a building for each group size and type that passes through it? Like responsive architecture, Web design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.

Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically).

But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let’s talk about all of these features, plus additional ideas in the making.

Adjusting Screen Resolution

With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.

Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:

Since then even more devices have come out. It’s obvious that we can’t keep creating custom solutions for each one. So, how do we deal with the situation?

Part of the Solution: Flexible Everything

A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.

Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:

The entire design is a lovely mix of fluid grids, fluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:

• Hiding and Revealing Portions of Images
• Creating Sliding Composite Images
• Foreground Images That Scale With the Layout

For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”

While from a technical perspective this is all easily possible, it’s not just about plugging these features in and being done. Look at the logo in this design, for example:

If resized too small, the image would appear to be of low quality, but keeping the name of the website visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>

Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).

This is just one example of the kind of thinking that makes responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and “floats” up.

Flexible Images

One major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img { max-width: 100%; }

As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.

Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.

While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.

Filament Group’s Responsive Images

This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the demo page here.

This technique requires a few files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). Then, we can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to the bigger image using data-fullsrc.

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

The data-fullsrc is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.

The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.

Stop iPhone Simulator Image Resizing

One nice thing about the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.

There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.

(Image: Think Vitamin | Website referenced: 8 Faces)

Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s <head> section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Setting the initial-scale to 1 overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

Custom Layout Structure

For extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on.

For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout’s structure.

Here is the style.css (default) content:

/* Default styles that will carry to the child style sheet */

html,body{
   background...
   font...
   color...
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/* Structural elements */
#wrapper{
	width: 80%;
	margin: 0 auto;

	background: #fff;
	padding: 20px;
}

#content{
	width: 54%;
	float: left;
	margin-right: 3%;
}

#sidebar-left{
	width: 20%;
	float: left;
	margin-right: 3%;
}

#sidebar-right{
	width: 20%;
	float: left;
}

Here is the mobile.css (child) content:

#wrapper{
	width: 90%;
}

#content{
	width: 100%;
}

#sidebar-left{
	width: 100%;
	clear: both;

	/* Additional styling for our new layout */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

#sidebar-right{
	width: 100%;
	clear: both;

	/* Additional styling for our new layout */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

Media Queries

CSS3 supports all of the same media types as CSS 2.1, such as screen, print and handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3.

In Ethan Marcotte’s article, we see an example of a media query in action:

<link rel="stylesheet" type="text/css"
	media="screen and (max-device-width: 480px)"
	href="shetland.css" />

This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The Orientation Media Query” for more information on setting and restricting widths based on these media query features.

One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Be sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a more thorough explanation.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

The code above is from a free template for multiple media queries between popular devices by Andy Clark. See the differences between this approach and including different style sheet files in the mark-up as shown in the post “Hardboiled CSS3 Media Queries.”

CSS3 Media Queries

Above are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future.

The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.

Note in the examples below that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to be made for multiple style sheets.

@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).

@media screen and (max-width: 600px) {
     .aClassforSmallScreens {
          clear: both;
		  font-size: 1.3em;
     }
}

Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower.

While the above min-width and max-width can apply to either screen size or browser width, sometimes we’d like a media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device. The min-device-width and max-device-width media query properties are great for targeting certain devices with set dimensions, without applying the same styles to other screen sizes in a browser that mimics the device’s size.

@media screen and (max-device-width: 480px) {
     .classForiPhoneDisplay {
          font-size: 1.2em;
     }
}

@media screen and (min-device-width: 768px) {
     .minimumiPadWidth {
          clear: both;
		  margin-bottom: 2px solid #ccc;
     }
}

There are also other tricks with media queries to target specific devices. Thomas Maier has written two short snippets and explanations for targeting the iPhone and iPad only:

• CSS for iPhone 4 (Retina display)
• How To: CSS for the iPad

For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).

@media screen and (orientation: landscape) {
     .iPadLandscape {
          width: 30%;
		  float: right;
     }
}

@media screen and (orientation: portrait) {
     .iPadPortrait {
          clear: both;
     }
}

Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.

There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range.

@media screen and (min-width: 800px) and (max-width: 1200px) {
     .classForaMediumScreen {
          background: #cc0000;
          width: 30%;
          float: right;
     }
}

The above code in this media query applies only to screen and browser widths between 800 and 1200 pixels. A good use of this technique is to show certain content or entire sidebars in a layout depending on how much horizontal space is available.

Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine.

You might want, for example, to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientations. Placing a media query for both the horizontal and vertical orientations of the iPad in the same style sheet file would be far more efficient.

Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best.

Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

JavaScript

Another method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.

In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$(window).bind("resize", resizeWindow);
		function resizeWindow(e){
			var newWindowWidth = $(window).width();

			// If width width is below 600px, switch to the mobile stylesheet
			if(newWindowWidth < 600){ 				$("link[rel=stylesheet]").attr({href : "mobile.css"});	 			} 			// Else if width is above 600px, switch to the large stylesheet 			else if(newWindowWidth > 600){
				$("link[rel=stylesheet]").attr({href : "style.css"});
			}
		}
	});
</script>

There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries, look at “Combining Media Queries and JavaScript.”

Showing or Hiding Content

It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of content from a large screen available on a smaller screen or mobile device isn’t always the best answer. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

Responsive Web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!

display: none;

Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure altogether.

Note that we haven’t used visibility: hidden here; this just hides the content (although it is still there), whereas the display property gets rid of it altogether. For smaller devices, there is no need to keep the mark-up on the page — it just takes up resources and might even cause unnecessary scrolling or break the layout.

Here is our mark-up:

<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>

<div id="content">
	<h2>Main Content</h2>
</div>

<div id="sidebar-left">
	<h2>A Left Sidebar</h2>

</div>

<div id="sidebar-right">
	<h2>A Right Sidebar</h2>
</div>

In our default style sheet below, we have hidden the links to the sidebar content. Because our screen is large enough, we can display this content on page load.

Here is the style.css (default) content:

#content{
	width: 54%;
	float: left;
	margin-right: 3%;
}

#sidebar-left{
	width: 20%;
	float: left;
	margin-right: 3%;
}

#sidebar-right{
	width: 20%;
	float: left;
}
.sidebar-nav{display: none;}

Now, we hide the two sidebars (below) and show the links to these pieces of content. As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked, and the sidebars could be realigned in the CSS to float below the content (or in another reasonable way).

Here is the mobile.css (simpler) content:

#content{
	width: 100%;
}

#sidebar-left{
	display: none;
}

#sidebar-right{
	display: none;
}
.sidebar-nav{display: inline;}

With the ability to easily show and hide content, rearrange layout elements and automatically resize images, form elements and more, a design can be transformed to fit a huge variety of screen sizes and device types. As the screen gets smaller, rearrange elements to fit mobile guidelines; for example, use a script or alternate style sheet to increase white space or to replace image navigation sources on mobile devices for better usability (icons would be more beneficial on smaller screens).

Below are a couple of relevant resources:

• Mobile Web Design Trends For 2009
• 7 Usability Guidelines for Websites on Mobile Devices

Touchscreens vs. Cursors

Touchscreens are becoming increasingly popular. Assuming that smaller devices are more likely to be given touchscreen functionality is easy, but don’t be so quick. Right now touchscreens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touchsmart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.

Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort. Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. So, don’t rely on CSS hovers for link definition; they should be considered an additional feature only for cursor-based devices.

Look at the article “Designing for Touchscreen” for more ideas. Many of the design suggestions in it are best for touchscreens, but they would not necessarily impair cursor-based usability either. For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users, because most people are right-handed; they would therefore not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might as well follow the touchscreen design guideline in this instance. Many more guidelines of this kind can be drawn from touchscreen-based usability.

A Showcase Of Responsive Web Design

Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.

Art Equals Work
Art Equals Work is a simple yet great example of responsive Web design. The first screenshot below is the view from a standard computer screen dimension. The website is flexible with browser widths by traditional standars, but once the browser gets too narrow or is otherwise switched to a device with a smaller screen, then the layout switches to a more readable and user-friendly format. The sidebar disappears, navigation goes to the top, and text is enlarged for easy and simple vertical reading.

Think Vitamin
With Think Vitamin, we see a similar approach. When on a smaller screen or browser, the sidebar and top bar are removed, the navigation simplifies and moves directly above the content, as does the logo. The logo keeps its general look yet is modified for a more vertical orientation, with the tagline below the main icon. The white space around the content on larger screens is also more spacious and interesting, whereas it is simplified for practical purposes on smaller screens.

8 Faces
8 Faces’ website design is flexible, right down to a standard netbook or tablet device, and expands in content quantity and layout width when viewed on wider screens or expanded browsers. When viewed on narrower screens, the featured issue on the right is cut out, and the content below is shortened and rearranged in layout, leaving only the essential information.

Hicksdesign
The Hicksdesign website has three columns when viewed on a conventional computer screen with a maximized browser. When minimized in width, the design takes on a new layout: the third column to the right is rearranged above the second, and the logo moves next to the introductory text. Thus, no content needs to be removed for the smaller size. For even narrower screens and browser widths, the side content is removed completely and a simplified version is moved up top. Finally, the font size changes with the screen and browser width; as the browser gets narrower, the font size throughout gets smaller and remains proportional.

Information Architects
Here is a great example of a flexible image. The image in this design automatically resizes after certain “break” points, but in between those width changes, only the side margins and excess white space are altered. On smaller screens and minimized browsers, the navigation simplifies and the columns of navigation at the top fall off. At the design’s smallest version, the navigation simplifies to just a drop-down menu, perfect for saving space without sacrificing critical navigation links.

Garret Keizer
The website for Garret Keizer is fully flexible in wider browsers and on larger screens: the photo, logo and other images resize proportionally, as do the headings and block areas for text. At a few points, some pieces of text change in font size and get smaller as the screen or browser gets narrower. After a certain break point, the layout transforms into what we see in the second screenshot below, with a simple logo, introductory text and a simple vertical structure for the remaining content.

Simon Collison
With four relatively content-heavy columns, it’s easy to see how the content here could easily be squished when viewed on smaller devices. Because of the easy organized columns, though, we can also collapse them quite simply when needed, and we can stack them vertically when the space doesn’t allow for a reasonable horizontal span. When the browser is minimized or the user is on a smaller device, the columns first collapse into two and then into one. Likewise, the horizontal lines for break points also change in width, without changing the size or style of each line’s title text.

CSS Tricks
On the CSS Tricks website, like many other collapsible Web designs, the sidebars with excess content are the first to fall off when the screen or browser gets too narrow. On this particular website, the middle column or first sidebar to the left was the first to disappear; and the sidebar with the ads and website extras did the same when the browser got even narrower. Eventually, the design leaves the posts, uses less white space around the navigation and logo and moves the search bar to below the navigation. The remaining layout and design is as flexible as can be because of its simplicity.

Tee Gallery
As one can see, the main navigation here is the simple layout of t-shirt designs, spanning both vertically and horizontally across the screen. As the browser or screen gets smaller, the columns collapse and move below. This happens at each break point when the layout is stressed, but in between the break points, the images just change proportionally in size. This maintains balance in the design, while ensuring that any images (which are essential to the website) don’t get so small that they become unusable.

City Crawlers: Berlin
When varied between larger screen sizes and browser widths, this design remains flexible. It also remains flexible after a few layout pieces collapse into a more vertical orientation for small screens and narrow browsers. At first, the introductory image, logo and navigation image links resize proportionally to accommodate variations in screen and browser widths, as do the blocks of content below. The bottom columns of content eventually collapse and rearrange above or below other pieces, until (at the narrowest point) they are all stacked vertically. In the layout for the smallest screen and narrowest browser, the slideshow is left out altogether, the navigation is moved below the logo and other images are also removed.

Ten by Twenty
Ten by Twenty is another design that does not resort to changing layout structure at all after certain break points, but rather simplifies responsive Web design by making everything fully flexible and automatically resizing, no matter what the screen or browser width. After a while, the design does stress a bit and could benefit from some rearrangement of content. But overall, the image resizing and flexible content spaces allow for a fairly simple solution that accommodates a wide range of screen sizes.

Hardboiled Web Design
On wide screens and browsers, all of the content on this simply designed website is well organized into columns, sidebar and simple navigation up top. It’s a fairly standard and efficient layout. On smaller screens, the sidebar is the first to drop off, and its content is moved below the book previews and essential information. Being limited in space, this design preserves its important hierarchy. Whereas on a wider screen we’d look left to right, on a narrower screen we’d tend to look from top to bottom. Content on the right is moved below content that would appear on the left on a wider screen. Eventually, when the horizontal space is fully limited, the navigation is simplified and stacked vertically, and some repeated or inessential elements are removed.

Teixido
This design features a complex layout that looks inspired by a print style. When viewed on a standard wide computer screen, more portfolio pieces are featured and spanned horizontally across the page. As one moves down the page, more graphics and imagery span the space. On a smaller screen, the portfolio piece is cut down to one, and then eventually left out altogether for very small screens and narrow browsers. The visualizations below collapse into fewer columns and more rows, and again, some drop off entirely for very small screens. This design shows a creative and intelligent way to make a not-so-common layout work responsively.

Stephen Caver
This design has three main stages at which the design and layout collapse into a more user-friendly form, depending on how wide the screen or browser is. The main image (featuring type) is scaled proportionally via a flexible image method. Each “layout structure” is fully flexible until it reaches a breaking point, at which point the layout switches to something more usable with less horizontal space. The bottom four columns eventually collapse into two, the logo moves above the navigation, and the columns of navigation below are moved on top or below each other. At the design’s narrowest stage, the navigation is super-simplified, and some inessential content is cut out altogether.

Unstoppable Robot Ninja
This layout does not change at all; no content is dropped or rearranged; and the text size does not change either. Instead, this design keeps its original form, no matter what the change in horizontal and vertical space. Instead, it automatically resizes the header image and the images for the navigation. The white space, margins and padding are also flexible, giving more room as the design expands and shrinks.

Bureau
This is perhaps the simplest example of a responsive Web design in this showcase, but also one of the most versatile. The only piece in the layout that changes with the browser width is the blog post’s date, which moves above the post’s title or to the side, depending on how much horizontal space is available. Beyond this, the only thing that changes is the width of the content area and the margin space on the left and right. Everything is centered, so a sense of balance is maintained whatever the screen or browser width. Because of this design’s simplicity, switching between browser and screen widths is quick and easy.

CSS Wizardry
Harry Roberts shows that responsive design can also have quite humble uses. If the user has a large viewport, the website displays three columns with a navigation menu floating on the left. For users with a viewport between 481px and 800px, a narrow version is displayed: the navigation jumps to the top of the site leaving the area for the content column and the sidebar. Finally, the iPhone view displays the sidebar under the content area. Harry also wrote a detailed article about the CSS styles he added to the stylesheet in his article “Media queries, handier than you think“. A nice example of how a couple of simple CSS adjustments can improve the website’s appearance across various devices.

Bryan James
This last design by Bryan James shows that responsive Web design need not apply only to static HTML and CSS websites. Done in Flash, this one features a full-sized background image and is flexible up to a certain width and height. As a result of the design style, on screens that are too small, the background image gets mostly hidden and the content can become illegible and squished. Instead of just letting it be, though, a message pops up informing the user that the screen is too small to adequately view the website. It then prompts the user to switch to a bigger screen. One can discuss if the design solution is good or bad in terms of usability, but the example shows that Flash websites can respond to user’s viewport, too.

Conclusion

We are indeed entering a new age of Web design and development. Far too many options are available now, and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and advancement in technology. We should rather start a new era today: creating websites that are future-ready right now. Understanding how to make a design responsive to the user doesn’t require too much learning, and it can definitely be a lot less stressful and more productive than learning how to design and code properly for every single device available.

Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world. Responsive Web design is a mere concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device and platform. We will need to constantly work with new devices, resolutions and technologies to continually improve the user experience as technology evolves in the coming years.

Besides saving us from frustration, responsive Web design is also best for the user. Every custom solution makes for a better user experience. With responsive Web design, we can create custom solutions for a wider range of users, on a wider range of devices. A website can be tailored as well for someone on an old laptop or device as it can for the vast majority of people on the trendiest gadgets around, and likewise as much for the few users who own the most advanced gadgets now and in the years to come. Responsive Web design creates a great custom experience for everyone. As Web designers, we all strive for that every day on every project anyway, right?

Further Resources

• Responsive Web Design, A List Apart
• CSS Media Query for Mobile is Fool’s Gold, Cloud Four
• Designing for a Responsive Web with Heuristic Methods, Design Reviver
• The Big Web Show #9: Responsive Web Design, 5by5 Studios
• How to Use CSS3 Media Queries to Create a Mobile Version of Your Website, Smashing Magazine
• Application: Rapid Prototyping of Adaptive CSS and Responsive Design, ProtoFluid
• Handcrafted CSS: More Bulletproof Web Design, Dan Cederholm (printed book)
• Flexible Web Book, Zoe Mickley Gillenwater (printed book)

(al) (vf)

© Kayla Knight for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, elastic layout, flexible layout, fluid layout, mobile design, responsive web design

Go to Source

In many cases (not all) this is a great way to mobilize content, because it’s far more effective than compartmentalizing the problem and making device-specific experiences. With an ever broadening spectrum of screen resolutions, treating the web medium like a static magazine spread is no longer sustainable. It never was.

I’ve been using responsive web design for several months now, and I’m beginning to realize that to dismiss it as a novel tool for creating mobile websites would be severely shortsighted. That’s pretty vague by itself, so I’ll give you two specific examples to illustrate what I’m getting at.

Television Interfaces

Unless you’re a top television executive, you’ve probably noticed the video revolution happening all around us. Between YouTube, Netflix, Hulu, and so many others, a huge wealth of video content is available for online consumption.

I don’t have cable television, and while I have tried a few specialized set top boxes, I think it’s hard to beat the versatility and simplicity of hooking up a regular computer to an HDTV.

Once you’ve done that, you can watch whatever online video you want from the comfort of your couch. Perhaps I’m in a minority, but I would really appreciate more television-optimized interfaces from major video providers. There are a few novelties like http://youtube.com/leanback (as pictured below), but often times they’re not integrated into the core functionality of the site. The goal should be to create a seamless experience across web enabled devices.

Put another way, RWD isn’t just a useful tool for mobilizing content. It goes the other way too, and can be useful for creating experiences that are optimized for large displays.

Above the Fold

Whether or not you believe web pages have a “page fold” is a debate that I’m not going to delve into here. For the sake of example, let’s just say that there is indeed a page fold.

The idea is that you want to put the most important stuff above the fold, and the less important stuff below the fold. However, if you’re using a small netbook, the fold is going to be much further up the page than if you’re using a big monitor.

In fact, it’s probably better to think of it as a “Page Fold Zone” rather than a straight line across the page.

RWD has traditionally been a technique for responding to the variable width of a page, but what about the height? If the page fold is higher up than you’re expecting it to be, important text and images might get cut off, and that means there are design decisions to make. If you can’t fit as much stuff on the screen, what page elements are still essential?

These are just ideas, but ultimately my point is this: There’s a lot of untapped potential here, and I think we’ve only seen the tip of the iceberg.

Go to Source

Acer is placing its bets behind Android with the announcement of a 7-inch tablet, a 10.1-inch tablet and a 4.8-inch smartphone based off of Google’s mobile OS.

The unnamed tablets sport 3G and Wi-Fi connectivity, an eye-popping 1280×800 screen resolution and 1080p HDMI capacity. The 10.1-inch tablet is 13.3mm thick, making it just slightly wider than Apple’s 12.7mm iPad tablet. The larger tablet also boast a 5MP rear camera and a front-facing one. Both devices will go on sale in April 2011.

Acer also took the opportunity today to announce a 4.8-inch hybrid smartphone/tablet device. Also yet to be named, the smartphone is similar to the Dell Streak, but is definitely more powerful. It sports a 1024×480 screen resolution (a ridiculous resolution for a phone), a 21:9 aspect ratio, an 8MP camera with an LED flash, a 1 GHz Snapdragon processor and a Gyroscope/accelerometer combo that makes it ideal as a portable gaming device. It also launches in April 2011.

Beyond ridiculously awesome screen resolutions, all three devices run on Android. Acer did not reveal in its press releases which version each will run, but we’re hoping at least one of these devices will run the Gingerbread OS (Android 2.3) or even Honeycomb (Android 3.0?).

During its media blitz today, Acer also revealed the ICONIA, a hybrid laptop/tablet with a dual-screen running Microsoft’s Windows 7 OS. Instead of using a keyboard, the ICONIA uses a touch-based keyboard and gesture controls. It has 4 GB of RAM, two 14-inch multitouch displays, and an Intel Core i5 CPU.

Here are some photos to whet your appetite:

Acer’s Tablet

Say hello to Acer’s new Android tablet. There are two models of the device: a 10.1″ flagship model and a smaller 7″ version.

Acer’s Tablet

This is the back of Acer’s new Android tablet. It has a 5MP rear camera.

Acer’s Tablet

A shot of the side of the Acer tablet.

Acer’s Smartphone

This is Acer’s new 4.8″ smartphone/tablet hybrid. It sports a jaw-dropping 1280×480 screen resolution.

Acer’s Smartphone

This is the back of Acer’s new 4.8″ smartphone. It has an 8MP camera with LED Flash.

Acer ICONIA

This is the Acer ICONIA, the company’s windows 7 dual-screen laptop/tablet device. Instead of a physical keyboard, it sports a second screen and a virtual keyboard.

Images courtesy of Engadget

More About: Acer, android, android tablets, Google, Tablet

For more Tech coverage:

• Follow Mashable Tech on Twitter
• Become a Fan on Facebook
• Subscribe to the Tech channel
• Download our free apps for iPhone and iPad

Go to Source

The homepage still doesn’t fill the whole screen, leaving a blank grey space around the edges, River Island might have considered designing for higher screen resolutions. 

It still looks good though, and follows a similar pattern to websites like Oasis and TopShop. I like the fact that you can click on the clothes worn by the models on the homepage to head straight to the product pages to see details of the clothes they are wearing. 

Overall, it’s a clear and simple homepage which is easy to scan and understand for visitors. 

Navigation

The navigational options are clear, with just four main menu options at the top of the page, which brings up this bare drop-down menu:

The sub-category pages are well laid out, with product images and price, making it easy to scan the list. 

By mousing over the products, shoppers have a ‘quick look’ option which allows shoppers to click on products within search results and see product details and even add items to the basket without needing to go to the full product page. 

River Island has got the product filtering spot on here, and provides plenty of options that allow shoppers to narrow their product selection; by colour, size, pattern, occasion and more. Very useful. 

Product pages

The product pages are good too; I like to see clear information on delivery, while the wording next to the returns link, ‘returns are easy..in our shops, by post or courier’, provides an excellent reassurance for shoppers. 

The product pages are simple, yet still provide the information on size etc that customers will be looking for, though while the product zoom tool is OK, it would be good to see some clothes from other angles.

Video is used in some areas of the site, and perhaps River Island will be making more use of this in future. Certainly, it would do more to showcase and sell products on the site. 

In contrast to the clumsy and usually irrelevant cross-selling options provided on the new H&M website, River Island has created looks around most products, and will suggest other clothes to make up the outfit. 

Checkout process

Good shopping basket page, including a clear summary of delivery charges and payment options. Reassurance about returns policies, security, and links to FAQs are also provided on the page:

River Island doesn’t make registration a barrier, giving first time shoppers a route through to the checkout and allowing them to add a password and register at the end of the process, which is how it should be done. 

The checkout is also fully enclosed, leaving very few distractions for shoppers when they are entering address and payment details:

The checkout is a one-page process, forms are easy to complete, error messages are clear, and the process works smoothly. 

Conclusion

Considering the accessibility issues with the old site, any new non-Flash version was always going to be an improvement. It has taken some time for River Island to ditch the old site, and I wonder how much that has cost the company in terms of lost sales. 

Webcredible recently estimated that the disabled population in the UK has a combined spending power of £80bn, a market which until now has been excluded from shopping online with River Island. 

However, River Island has created a very good site which follows most e-commerce best practice guidelines, and delivers a very good user experience. 

It is the time for a new surreal experience by Osvaldo Gonzalez through our monthly wallpaper and calendar. Download August wallpaper and calendar with different screen resolutions.

Before continuing reading this post did you already join our Twitter and subscribe to our RSS feed? If not, rush and join us now to receive updates of new posts and free resources.

First, we would like to apology for the delay in publishing this month calendar as we was facing some troubles in connection. This month calendar includes a new artwork for Osvaldo that rakes our minds from the ordinary thoughts and daily routine. Osvaldo Gonzalez’s new calendar and wallpaper is created exclusively for Graphic Mania and it  is based on one of his most creative surreal digital art, and here are few lines to know more about the talent and the skills behind Gonzalez:

Osvaldo González is a self-taught artist, born in Argentina. Working in a melancholic vein, Osvaldo creates complex and emotional scenarios of the human condition and strange dreamlike figurations.Osvaldo González is a self-taught artist, born in Argentina. Working in a melancholic vein, Osvaldo creates complex and emotional scenarios of the human condition and strange dreamlike figurations.He has a knack for creating dark mysterious stories. His use of layering to create depth, tonal qualities, and aged effects are decisive and work together to produce otherworldly narrative moments with a delicate and detailed sense of atmosphere and transparency.His passion for the ancient is present in his traditional art. He uses acrylics, clay, found objects, to obtain dark compositions. He currently resides in Miami, Florida, with his wife Mariana and your maltese Atila. You can also visit Osvaldo website for more information about him.

August 2010 Calendar Download: 1920×1200, 1680×1050, 1600×1200, 1280×960, 1024×768

August 2010 Wallpaper Download: 1920×1200, 1680×1050, 1600×1200, 1280×960, 1024×768

Go to Source

To recap briefly, this is a media query:

.sidebar {
	float: right;
	width: 250px;
}

@media all and (max-device-width: 600px) {
	.complicatedFunctionality {
		display: none;
	}
	.sidebar {
		float: none;
		width: auto;
	}
}

The media query asks whether the width of the device is 600px at maximum. If it is, the special styles are executed. This usually comes down to hiding advanced functionalities that do not make sense on mobile or take too much bandwidth, while it can also be used to change the site’s grid from horizontally oriented to vertically oriented; for instance by placing a sidebar not right of the main content, but below it.

Technically, the .complicatedFunctionality and .sidebar declarations are added to the style sheet only when the query returns true, i.e. the device is less than 600px wide.

Now this works. Better still, media queries are the ideal way of adapting your design to different screen resolutions. Still, they are not the be-all-end-all of making your website mobile-friendly.

Jason identifies two main problem areas:

• It’s all very well to hide, say, an advanced mapping application on mobile, but if you use only media queries the browser will still download the scripts associated with the application.
• Even though images might be hidden from mobile browsers, or low-source ones should be used, the browser still downloads the full-source variants.

In other words, media queries do not stop the browser from downloading assets that will not be used on a mobile phone. And with bandwidth at a premium, this is a serious problem.

He concludes:

CSS media queries are a tool, but they are not a silver bullet.

I mostly, but not entire agree. Media queries are silver bullets when it comes to pure CSS. Restricting the width of your site, moving sidebars and main navigations elsewhere, media queries can do all that and more.

The trick, however, is that a pure CSS approach is not enough. In addition we need a JavaScript that also reads out the media queries and uses the data to decide whether to download the complicated mapping script, whether to download the low-source or the full-source images, or possibly none.

As far as I know there is no direct access to media queries from JavaScript. You can’t read out whether the example media query above has fired or not.

JavaScript pairing

Fortunately, there is a pretty safe way of using JavaScript in conjunction with media queries. It turns out that all browsers I tested so far have paired the width and device-width media queries with the values of document.documentElement. clientWidth and screen.width, respectively.

This is a general rule. All mobile browsers that support media queries exhibit these pairings. It’s hard to believe, but I haven’t found any exceptions yet — and rest assured that I searched for them, because I could not believe that it would be this simple. And I will continue to keep an eye on this and report problems as soon as I find them.

One caveat, though: although the pairing exists in all browsers, some browsers report incorrect values for document.documentElement. clientWidth and screen.width. However, these browsers will also fire media queries based on these incorrect values, so the net result remains that both media query and script are executed, although at the wrong time. See the viewport compatiblity table for the gory details.

Therefore, if we want a JavaScript component that fires when the example media query above is triggered, we simply do:

if (screen.width < 600) {
	// don’t download complicated script
	// use low-source images instead of full-source ones
}

I think it’s best to reverse the script logic:

if (screen.width >= 600) {
	// download complicated script
	// swap in full-source images for low-source ones
}

If you want to use width instead, do this:

@media all and (max-width: 900px) {
	// styles
}

if (document.documentElement.clientWidth < 900) {
	// scripts
}

Thus it is quite possible to pair a JavaScript routine with your media queries, and use it to decide which assets you should and should not download.

When these scripts are added to media queries, we’re a whole lot closer to making one website that reacts to a mobile (or rather, a narrow-screen) environment both in its CSS and in its asset management.

Go to Source

Give the list a thorough reading, try out any extension you are interested in, and let me know in the comments how they worked out for you. You are welcome to share if you know more useful chrome extension which our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter.

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Chrome Editor

With this extension, you can edit HTML easily, right inside your browser. You also have the ability to save a code reference for later use. It saves it to your computer locally.

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions as well as a custom option for you to input your own.

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. It is designed for Google Chrome and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

BuiltWith

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves. The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon.

MultiSwitch

Whenever you have the need to simply switch between development, test and productive hosts you should use MultiSwitch. You are now able to customize the title of your environment.

Inline Code Finder

Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them: Inline JavaScript events, Inline style, javascript: links.

IE Tab

Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files

PlainClothes

This extension styles — or rather “unstyles” — the web. Just imagine: text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined. Or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically. You can control the extent of the “unstyling” via the Options window (”Extensions” > “PlainClothes” > “Options”), and you can toggle the “unstyling” on a per-site basis by clicking the icon in the location bar.

CSSViewer

CSSViewer shows the css parameters of any element in a web page, to enable/disable
it simply click the toolbar icon.

Aviary Screen Capture

This quick screen capture addon is a must-have for designers. It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image. A perfect companion tool for designers.

Lorem Ipsum Generator

Chrome Extension that generates random “Lorem Ipsum” text. It uses a minimalist and well looking design. Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

JavaScript tester

This extension adds a small & usefull shortcut to your browser “Alt+J”. To run and test pefromance of JavaScript code. When you press “Alt+J”, new textarea is added to the bottom of the current page. In this textarea you can write your JS code and press “Ctrl+Enter”, to run the code.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

It is the time for a new surreal experience by Osvaldo Gonzalez through our monthly wallpaper and calendar. Download July wallpaper and calendar with different screen resolutions.

Before continuing reading this post did you already join our Twitter and subscribe to our RSS feed? If not, rush and join us now to receive updates of new posts and free resources.

First, we would like to apology for the delay in publishing this month calendar as we was facing some troubles in connection. This month calendar includes a new artwork for Osvaldo that rakes our minds from the ordinary thoughts and daily routine. Osvaldo Gonzalez’s new calendar and wallpaper is created exclusively for Graphic Mania and it  is based on one of his most creative surreal digital art, and here are few lines to know more about the talent and the skills behind Gonzalez:

Osvaldo González is a self-taught artist, born in Argentina. Working in a melancholic vein, Osvaldo creates complex and emotional scenarios of the human condition and strange dreamlike figurations.Osvaldo González is a self-taught artist, born in Argentina. Working in a melancholic vein, Osvaldo creates complex and emotional scenarios of the human condition and strange dreamlike figurations.He has a knack for creating dark mysterious stories. His use of layering to create depth, tonal qualities, and aged effects are decisive and work together to produce otherworldly narrative moments with a delicate and detailed sense of atmosphere and transparency.His passion for the ancient is present in his traditional art. He uses acrylics, clay, found objects, to obtain dark compositions. He currently resides in Miami, Florida, with his wife Mariana and your maltese Atila. You can also visit Osvaldo website for more information about him.

July 2010 Calendar Download: 1920×1200, 1680×1050, 1600×1200, 1280×960, 1024×768

July 2010 Wallpaper Download: 1920×1200, 1680×1050, 1600×1200, 1280×960, 1024×768

Go to Source

Below we’ve put together a list of great Google Chrome extensions that will help you save time and evovle the way you use your browser.

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This was created and developed by the same person who made the popular Web Developer extension for Firefox.

FireBug Lite

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

Pendule

Pendule is an array of useful extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here – http://browsersize.googlelabs.com/

Speed Tracer

peed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

PlainClothes

This extension styles — or rather “unstyles” — the web. Just imagine: text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined. Or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

You can control the extent of the “unstyling” via the Options window (“Extensions” > “PlainClothes” > “Options”), and you can toggle the “unstyling” on a per-site basis by clicking the icon in the location bar.

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.2 commands in the context of the current web page. It is simple tool to use when experimenting with / learning JavaScript and jQuery commands.

Aviary Screen Capture

Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

This quick screen capture addon is a must-have for bloggers and designers alike! It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image. A perfect companion tool for designers and bloggers!

Image Cropper

This extension help you to crop any images on the fly. It’s especially useful when you need to crop your online album photo for IM thumbnail.

Validity

Validity can be used to quickly validate your HTML documents from the address bar. Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip and the detail can be seen in the Javascript console.

WebEdit

WebEdit allows you to make any webpage editable, however, the changes will no be permanent. It’ll help you visualize and structure an already-made website into what you’d like it to display. It’s a pretty useful and handy tool.

Chrome Sniffer

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Currently, this extension can detect up to 50 popular CMS and javascript libraries, and more will be added in future releases.

MeaureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

iMacros

iMacros was designed to automate the most repetitious tasks on the web. If there’s an activity you have to do repeatedly, just record it in iMacros. The next time you need to do it, the entire macro will run at the click of a button! With iMacros, you can quickly and easily fill out web forms, remember passwords, create a webmail notifier, and more. Web developers use iMacros for web regression testing, performance testing and web transaction monitoring. It can also be combined with Google Speed Tracer, Firebug and other web development and test tools. XPath support is included.

Go to Source

It is the time for a new surreal experience by Osvaldo Gonzalez through our monthly wallpaper and calendar. Download June wallpaper and calendar with different screen resolutions.

Before continuing reading this post did you already join our Twitter and subscribe to our RSS feed? If not, rush and join us now to receive updates of new posts and free resources.

This month calendar includes a new artwork for Osvaldo that rakes our minds from the ordinary thoughts and daily routine. Osvaldo Gonzalez’s new calendar and wallpaper is created exclusively for Graphic Mania and it  is based on one of his most creative surreal digital art, and here are few lines to know more about the talent and the skills behind Gonzalez:

Osvaldo González is a self-taught artist, born in Argentina. Working in a melancholic vein, Osvaldo creates complex and emotional scenarios of the human condition and strange dreamlike figurations.Osvaldo González is a self-taught artist, born in Argentina. Working in a melancholic vein, Osvaldo creates complex and emotional scenarios of the human condition and strange dreamlike figurations.He has a knack for creating dark mysterious stories. His use of layering to create depth, tonal qualities, and aged effects are decisive and work together to produce otherworldly narrative moments with a delicate and detailed sense of atmosphere and transparency.His passion for the ancient is present in his traditional art. He uses acrylics, clay, found objects, to obtain dark compositions. He currently resides in Miami, Florida, with his wife Mariana and your maltese Atila. You can also visit Osvaldo website for more information about him.

June 2010 Calendar Download: 1920×1200, 1680×1050, 1600×1200, 1280×960, 1024×768

June 2010 Wallpaper Download: 1920×1200, 1680×1050, 1600×1200, 1280×960, 1024×768

Go to Source

In recent years, screen resolutions are getting both bigger (large monitors) and smaller (in the mobile sense), as such, a static or fixed web layout may no longer be deemed completely viable. Maybe its time to change.

Liquid, fluid and elastic layouts, have as many supporters as fixed layouts, despite what ever your feelings are on these styles of layouts, having some knowledge on adapting a site to liquid or elastic would most definitely be a plus in your arsenal.

In this article you will find a collection of starter and basic fluid/liquid and elastic layouts, CSS frameworks and some useful tools to help you with your next project.

Tiny Fluid Grid

Inspired by the 1kb Grid, the Tiny Fluid Grid is a super simple fluid layout generator. Its download comes with a index.html with demo code, and the grid.css containing the CSS for the grid that you have created.
Tiny Fluid Grid »

Gridinator – Fixed, Elastic and Fluid Layouts

The concept for GRIDINATOR is to allow for easy creation of custom, grid-based layouts. As well as being able to create solid fixed grid layouts, you can also choose to create a fluid or elastic layout, click the links below to view the demos:
Gridinator – Fixed, Elastic and Fluid Layouts »
Gridinator Fluid Example »
Gridinator Elastic Example »

CSS Layout Generator – Fixed and Fluid Layouts

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
CSS Layout Generator – Fixed and Fluid Layouts »

Variable Grid System

The Variable Grid System is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System and the system was updated last year to allow for fluid grid layouts.
Variable Grid System »
Variable Grid System Fluid Grid Example »

PageColumn.com Layout Generators – Fixed and Liquid

PageColumn.com offers a selection of different multi-column grid layout generators, you can choose which generator you need from the list below.
2 Column Fixed Liquid Layout Generator »
2 Column Liquid Fixed Layout Generator »
3 Column Fixed Liquid Fixed Layout Generator »
3 Column Liquid Fixed Fixed Layout Generator »

Fluid Grid System

The Fluid Grid System is great for rapid prototyping as well as final production layouts allowing designers to quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm.
Fluid Grid System »

Fluid 960 Grid System

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. The idea for building these templates was inspired by Andy Clarke, who advocates a content-out approach to rapid interactive prototyping.
Fluid 960 Grid System »

Fluidgrid – A CSS Based Fluid Grid System

Fluid Grid is a new grid system that works the same way as Blueprint or 960, but with any page width, even fluid layouts. It is based only on CSS.
The sad thing is that Fluidgrid is still in development, but you can preview of what you will be able to do with it soon.
Fluidgrid – A CSS Based Fluid Grid System »

FluidGrids – A CSS Framework for Rapid Interactive Prototyping

FluidGrids – A CSS Framework for Rapid Interactive Prototyping »

Emastic – CSS Framework

Emastic is a very lightweight (4kb) em based CSS grid framework. Its columns (fixed or fluid) are in em from 1 to 75, they can be floated either left or right and its main width can be in either em, px or %.
Emastic – CSS Framework »
Emastic Frameworks Blank CSS Templates »

Elastic CSS Framework

Elastic is a simple CSS framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. You can view its demos below.
Elastic CSS Framework »
Elastic Columns Demo »
Elastic Web Layouts Demo »
Elastic Layouts Demo »
Elastic Adaptive Columns Demo »

Less Framework

Less Framework is a CSS framework for building flexible multi-column website layouts. It contains a ten column grid optimized for a line-height of 24px, as well as a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm.
Less Framework »

The Perfect Fluid Width Layout from CSS Tricks

This layout accommodates 90%+ of all internet users. It Shrinks to a minimum of 780px (accomodating users with 800×600 resolution, with no horizontal scroll) and Grows to 1260px (accomodating users with 1280×768 resolution and everything in between).
The Perfect Fluid Width Layout from CSS Tricks »
View the Demo »

SuperStretch! – A Vertically Fluid Layout Using CSS

This layout stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8
SuperStretch! – A Vertically Fluid Layout Using CSS »
View the Demo »

Liquid Layout Templates by Andrew Sellick

Here you will find a collection of six liquid layout templates by Andrew Sellick, you can view and download them below:

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

CSS Website Layouts and Templates (justdreamweaver.com)

All of the liquid layouts are coded to have a minimum page width of 760 pixels and a browser window width of 80 percent. The elastic layout widths are defined in ems, so as the text size increases, so does the width of the content containers. You can view and download the templates below:

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Dynamic Drive Liquid CSS Layouts

Dynamic Drive offers a collection of liquid CSS layouts, where the layout spans the entire page width wise, expanding and contracting as the page is resized.
You can view the templates below:

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Perfect Multi-Column CSS Liquid Layouts (matthewjamestaylor.com)

This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless!
You can view the liquid templates below:

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Liquid CSS Layout Templates by Design Shack

Design Shack have a collection of 12 great CSS templates to base your design on, both fixed and fluid layouts. These free CSS templates are designed by Mitch Bryson, and provided for you with his permission. You can view the liquid templates below:

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

Demo & Download »

100 Percent CSS Liquids Layout (ironmeyers.com)

These CSS Layouts offer full Grade-A browser support. Each CSS Layout will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. You can choose from either the 100% width templates or 974, 950 or 750px fluid layouts.
100 Percent CSS Liquids Layout (ironmeyers.com) »

Layout Gala – Liquid Layouts

The CSS of the examples, which is embedded in both online and the download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout. In fact, the CSS has been divided, with an empty line, between two logical parts: the first is for typography and colors, while the second and most important is for the layout itself.
Layout Gala – Liquid Layouts »

Liquid, Fluid & Elastic Basic Layout Tutorials

Create a Simple Liquid Layout (.net magazine) »
This is a fairly old (2006) tutorial, but uses modern trend relevant techniques. Its purpose is to produce a robust cross-browser liquid layout, using absolute positioning rather than the more commonly known technique of using floats.

Liquid Layouts the Easy Way »
This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.

CSS Liquid Layout Designs Tips »
Here are few tricks that you can use when it comes to working with semi-liquid layouts.

Create a 3 Column Fluid Layout using HTML/CSS »
This tutorial will teach you how to create a fluid 3 column layout using HTML & CSS.

How to Create a Fluid Grid with jQuery »
This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout. The algorithm/procedure used in this tutorial is very simple and easy to follow.
Demo

Liquid, Elastic & Fluid Further Reading

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? »
This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.

Adaptive CSS-Layouts: New Era In Fluid Layouts? »
In this article, it discusses effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.

A List Apart articles on Fluid, Liquid and Elastic Layouts
Fluid Grids, Elastic Design & In Search of the Holy Grail.

You might also like…

10 Mind-Blowing Experimental CSS3 Techniques and Demos »
30 Pure CSS Alternatives to Javascript »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »

Go to Source

Now, we have got a list of Featured Google Chrome Extensions for Web Developers. Complement Google Chrome’s developer tools with extensions, to make web development faster and more efficient. Edit HTML, test your pages on various screen resolutions, improve the performance of your apps and more — all directly from the browser.

Source: https://chrome.google.com/extensions/featured/web_dev

Go to Source

Basically, Paperlit entails a three-step publishing process that is easily described: you upload the media (or send it as an email attachment), the company converts it for different screen resolutions, and then the electronic publication is sent out.

You are provided with detailed analytics and an actionable advertising platform – IE, your readers will be able to click on URLs to know more about any product that is advertised on your magazine, and those who are using an iPhone can tap on numbers to send a message on its way.

Read more

Learn more about Paperlit.com in Dataopedia.com

Find out how much Paperlit.com is worth with Stimator.com

Have a business question? Ask Startups.com

Go to Source

At least for me – none of extensions have made browser load speed slower – I cannot say this about Firefox though, which I don’t use anymore. Scroll through this list – I am sure you will find at least few new extensions to use daily!

1. FireBug Lite

I hope we all know FireBug addon for FireFox, so here is the same extension but only for Chrome. Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

2. Resolution Test

Resolution Test changes the size of the browser window for web developers to preview websites in different screen resolutions. It includes a list of commonly used resolutions as well as a custom option for you to input your own.

3. Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:

• Javascript parsing and execution
• Layout
• CSS style recalculation and selector matching
• DOM Event handling
• Network resource loading
• Timer fires
• XMLHttpRequest callbacks
• Painting
• and more …

4. Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.

5. Pendule

Use this extension in addition to the built-in Developer Tools. This tool is so similar to FireBug. You can just press mouse button and inspect the element.

6. Aviary Screen Capture

Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

Features:

• Save to desktop, host online, or edit in other Aviary apps.
• Captures instantly.
• Screen capture of the visible portion of all web pages and images.
• Add visual notes like arrows, text and highlights to your capture.
• Crop your capture.
• Resize, rotate and flip your capture.
• Smart select and move of captured elements.
• Grab color information from the page.
• Quick launch 6 Aviary design tools: Image editor, markup editor, vector editor, color palette editor, effects editor & audio editor.

7. Chrome Web Developer Tools

This extensions developers are trying to get this as close as possible to “FireFox Web Developer” addon. This extension made easy the web development.

8. Chrome Sniffer

Chrome Sniffer will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Great way to know what source site is using (if source is opensource and it is popular).

9. Lorem Ipsum Generator

It generates random “Lorem Ipsum” text, it allows to choose words per paragraph and number of paragraphs.

10. PlainClothes

Unstyle the web with this tool. PlainClothes makes everything as possible closer to default or your wanted style. Just imagine – text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

This is how 1stwebdesigner.com looks using this tool:

11. Internet Explorer Tab

Internet Explorer Tab shows IE in Google Chrome. Very simple extension. I think it’s very useful to not to use IE.

12. Chrome SEO

The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.

13. SEO Site Tools

It validates CSS and HTML, displays server software, checks for gzip compression, page headers and shares even more on-page suggestions based on accepted SEO knowledge. It can disable right-click scripts, and does window resizing to see where fold would be on different size monitors. Fast clean simple UI with a wealth of SEO information makes doing a quick consult fast and easy.

14. META SEO Inspector

Meta data is not just the usual HTML meta tags, but the XFN tags, various microformats, the recently introduced canonical attribute, the no-follow links and so on.

15. Validity

Validity can be used to quickly validate your HTML documents from the address bar.

Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip.

Validity also gives you the option to use your own installation of the W3C Validation Service. (For more information on installing the W3C Validation Service see the documentation at http://validator.w3.org/docs/install.html).

16. Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

17. Color Picker

Quickly get the Hex and RGB values of any color! Also adjust Hue, Saturation, and Balance.

18. Image Cropper

This extension help you to crop any images on the fly.
It’s especially useful when you need to crop your online album photo for IM thumbnail.

• Crop images in img html element
• Crop css background images for any html element
• Cropped Image is in PNG format
• Right click on top of the selection to “save as” the cropped image.

19. Webpage Screenshot

Makes screenshot of whole page even if page is very long.

20. Picnik

The Picnik Extension for Chrome lets you easily edit the images you come across while browsing the web. With a click you can create a snapshot of your current web page and open it in Picnik for easy editing, annotation and sharing. Do the same for all the image on the current page — just pick the image from the dynamic hot list and then edit, annotate and share with Picnik. It is a great replacement to PhotoShop!

21. MeasureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

22. Pixlr Grabber

Grab visible screen, select part or entire page. Share screen to Pixlr imm.io, edit screen in Pixlr editor or save to desktop. This is one of the few who can capture the entire screen, however since Chrome just supports canvas in png the images created gets quite large and takes a while to process.

23. Domain Availability Checker

Quickly check if domain name is already taken or not.

24. Snippy

Snippy allows you to grab snippets of web pages, save them for future use and upload them to Google Docs.

25. FlashBlock

Flashblock is an extension for the Google Chrome that blocks all Flash content from loading. It then leaves placeholders on the webpage that allow you to click to download and then view the Flash content.

26. BuiltWith Technology Profiler

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

27. LastPass

LastPass is a free online password manager and Form Filler that makes your browsing more secure.

28. iMacros

Automate your web browser. Record and replay repetitious work. Web developers use iMacros for web regression testing, performance testing and web transaction monitoring. It can also be combined with Google Speed Tracer, Firebug and other web development and test tools. XPath support is included.

29. Chrome Flags

It shows the country where the server is hosting.

30. Frame Two Pages

Put two tabs into one tab’s two frames. Useful to compare two pages.

31. Split Screen

Works very similar to “Frame Two Pages” extension, but the main difference is that you can browse pages not switching tabs.

32. Session Buddy

Session Buddy is a flexible session manager that allows you to quickly save and restore session tabs.

• View all of the tabs in each window of a current or saved session
• Assess easily whether a displayed session has changed
• Save the current session with 2 clicks
• Restore sessions into a set of windows, a single window, or the current window
• Access automatically saved crash recovery sessions after a Chrome or OS crash
• Optionally automatically save the previous session
• Edit sessions by deleting individual windows/tabs or rolling tabs into a single window
• Import a list of URLs
• Export a session to text or CSV format (more formats in development)
• Control what types of tabs Session Buddy recognizes
• Show/hide current session tab count in extension icon badge

Go to Source

Choosing the wrong font could be a disaster, and selecting the right font for mobile web pages may not work well with your current project. It’s sometimes shoot or miss, however, by reading up on resources on mobile type you can decrease the chances of selecting the wrong font. As you can see below, we’ve compiled a list of high-quality fonts and great resources that are sure to give your users a more complete mobile experience.

Delicious

Fontin Sans

Dekers

Sansation

Latine

Advent

Dejavu Sans

Fireye

Accents

Zekton Free

Mobile Typography Resources

Mobile Typography

This article covers the challenges and technical aspects of mobile typography. It shows you exactly what makes a font “worthy” of being displayed on a smaller screen, and its characteristics. You’ll learn about font measurements, letterforms, vital families, styles, kerning and more. It’ll also show you a guideline for selecting a the right typefaces for small-screen devices.  Read More

Typography for Mobile Phone Devices

The following case-study conveys valuable information on QUALCOMM’s decision to develop and strategically design the typographic aspect of their mobile user interfaces. They previously had a custom family of sans-serif fonts that were going to be used with previous devices, however, the project led to the assessing the impact of digital type on mobile devices. Follow the link to download the full case-study. Read More

The Typography Manual 1 (Mobile)

This manual is straight to the point, easy to follow, and lets you in on some intriguing insight having to do with mobile typography. It’s a detailed guide (60+ pages) for designers that displays a history of type, the basics, characteristics and more. It also comes with a Visual Type Anatomy Glossary that shows you the types terminology in the form of letters and their definition as well. Read More

Fonts for prototyping mobile UIs

Here you’ll find great pointers on using the right fonts for prototyping mobile UI’s. Because there are is a plethora of designers that create prototypes before developing a mobile website, you should know which fonts work best and how. When you design mobile web pages your designs suffer from bad pixelation, now imagine your fonts being displayed in the same manner. This article covers the right type to use, which manufacturers (Nokia, Samsung, Etc..) use which fonts, and what fonts should/can be replaced. Read More

Typography for Mobile Devices

Just as the title states, this article goes over Typography for Mobile Devices. Just about 3 billion people use mobile devices, can you afford not to select the right fonts? You’ll also see that the author discusses quick points on relative fonts and which ones are not worth using. For example, the use of Times as a mobile type is frowned upon, but why? Because it lacks personality.

This is a good argument, in fact, Time is one of those fonts that look much better after 12px. The author also relates using fonts for smaller screens to the reasons why you would choose a specific font for print. The selection of fonts for use of print requires such topics as hinting, kerning, and x-height to be covered. Interestingly enough, the author says that these are also grounds for selecting a mobile type. Read More

Go to Source

I change my screen resolution using Windows settings. A considerable amount of time is spent on each resolution change. Tired of all the back and forth resolution settings, I decided to search the web and find something that would provide a better way to shift between screen resolutions. Hotkey Resolution Changer is where I ended my search – it was exactly what I was looking for.

HRC (Hotkey Resolution Changer) is nearly a 400KB downloadable application that works on Windows operating systems. No installation is required. All a user has to do is run the EXE file after extracting it from the downloaded archive. The application sits silently in the System Tray.

Here is what the window of HRC looks like when restored:

The interface is simple enough. By default, we have two sets of screen resolutions we can define. Along with the resolution dimensions of our screen, we can also specify the color bits and our monitor’s refresh rate. Then we can assign each resolution scheme a hotkey which will assign our screen that particular resolution. More than two resolutions can also be set by changing the options where it says “Select number of HotKeys.”

HRC is a wonderful application that will serve Laptop owners and computer gamers perfectly.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

I’ve listed ten areas where Eurostar could improve online, and which would have a positive effect on its conversion rates…

Design a site for higher screen resolutions

My first impression of the website wasn’t good, since it only fills half the screen. Most web users have higher screen resolutions than this site has been designed for, which means it looks pretty bad for most visitors. 

Give clear information about ticket collection

Customers can choose to either print tickets at home or else print them out at a fast-ticket machine (though people are advised to do this 45 minutes before departure). Curiously there is no third option of mailing tickets for people who don’t have a printer, or just don’t want to use the machines. 

However, as this customer’s poor experience with Eurostar shows, the website clearly doesn’t know which stations have these ticket machines and which don’t.

Having booked a ticket from Cologne to London when flights were grounded recently, and being told to collect it from the ticket machine, he arrived at the station to find that Cologne had no Eurostar e-ticket machine. 

This error was made worse as they were forced to pay again on board the train and attempt to claim back the costs later. A case of a website badly letting customers down. 

Anticipate one-way journeys

I tried to search for one-way journeys from London to Paris, but the website simply won’t let me do this. Having selected my journey date and time and clicked the search link, I get an error message: 

On the form that accompanies this error message, there is a tick box for a one-way journey, but this option is not available on the homepage, which is nuts. Also, the error message completely fails to deal with this issue. 

Make searches more flexible

I arrived on the site looking for ideas for my holiday, and trying to find out what journeys were on offer, and how much they would cost, but it turns out this is not so easy to do on the site. 

For example, if I select a journey and see results and prices, while I can click the ‘later trains’ link to see other trains that same day, it won’t let you move to the next or previous day, meaning that you have to go back and search for each individual day. 

There is also no modify search option, so to adjust dates and times, users have to start again from scratch. 

So, Eurostar completely fails to help users that are flexible on dates and times. 

Anticipate user errors

The best way to handle user errors is to anticipate common input errors and correct them as seamlessly as possible to avoid any unnecessary frustration for users. 

For example, some retailers anticipate that some customers will type the letter ‘O’ when entering a postcode when a zero is needed, and accept either entry to make the process smoother. 

Eurostar doesn’t do this, so users can select journeys which are unavailable, or search for journeys when the return date is before the outward date. This will produce error messages and add to customer frustration.

Don’t time users out too quickly

I encountered this message for too often when searching for trains. I appreciate that it can’t display my results forever, but it often timed me out within a minute or two, which is far too quick. 

Help users find the cheapest deal

Most train websites will provide the option of searching for the cheapest tickets for a particular journey, either by listing the cheapest first, allowing users to search for two singles instead of a return ticket, or to include it in the advanced search options. 

This is helpful for people that can be flexible with journey times, or are working on a budget, but there no such options on the Eurostar site. 

Don’t make users work to hard to book tickets

This is absolutely crazy. It is possible to travel between London and Aix En Provence, and these tickets are available on Eurostar, but you have to book the two legs of the journey separately.  

This means booking the London to Paris return ticket, going through the checkout and paying for it, before having to repeat the process for the Paris to Provence leg. 

As well as being annoying and time-consuming, this means customers have to book the first part without knowing connection times, and could easily end up with a long wait between trains. 

Why, when every other train website can deal with this kind of booking, does Eurostar make it such hard work? 

Make contact details easier to find

With so many usability issues, I imagine that users will have plenty of reason to call Eurostar to book or to find some help. 

When users encounter error messages during the booking process, it would be a good idea to provide a visible contact number so users know how to find assistance quickly. 

However, the contact link is buried at the foot of the page, and though there is a contact number, it is labelled ‘telephone bookings’, which may be misleading for customers wanting to ask a question. 

Clearer calls to action

Calls to action should be made easy for users to find; there should be no doubt about what they need to do to proceed to the next step in the booking or payment process. 

However, the calls to action on Eurostar are too easily missed, as in the example below, where the continue booking link not only appears well below the fold, but blends too easily into the rest of the text on the page:

An effective call to action should stand out clearly from the page by using clear language, large text sizes, colour and contrast to make them easily visible to users. 

Conclusion

Apart from the ten points I have highlighted here, the whole look and feel of the site feels very dated, and it looks like it hasn’t been revamped for several years, not a great first impression for customers. 

While there are issues here and there with rail websites in the UK, most have improved considerably over the last few years, and avoid most of the usability issues outlines here. Eurostar should take note. 

Google Chrome is a wonderful web browser of choice for web designers and web developers. With Google Chrome extensions, you can add more features to the browser to help you with designing, debugging, and working on websites. We share with you the top ten Chrome extensions for designers and developers.

1. Firebug Lite (for Google Chrome)

Firebug Lite (for Google Chrome) is an extension that sets up Firebug Lite in the browser. Although the built-in Developer Tools in Chrome gives you relatively the same features of Firebug (and more), long-time Firebug fans will appreciate this extension for debugging and testing their work in Chrome.

2. Web Developer

Chris Pederick’s Web Developer toolbar is a long-time favorite among web designers and front-end developers. Originally created for Firefox, it has been ported to Chrome with a slicker interface.

It has loads of options for examining and understanding web page layouts, including showing block element stacking orders, displaying CSS style information about certain elements, browser cache controlling, and much more. To learn some Web Developer toolbar tips and tricks, see the following posts:

• Awesome Things That Web Developer Extension Can Do
• Ways to Enhance your Web Development Using the Web Developer Extension

3. Resolution Test

Resolution Test is an extension for testing web pages in different screen resolutions, with an option to define your own custom resolutions. This is very handy in making sure that your web design looks great under different monitor sizes.

4. Pendule

Pendule extends the built-in Developer tools in Google Chrome. The extension gives its users plenty of features such as one-touch markup validation using W3C’s automated web services, hiding images on a web page, viewing scripts included in a web page, and more.

5. PlainClothes

One of the best ways to evaluate the accessibility of a web page is to remove its CSS styles and see if content being presented is still readable without them. This simulates the experience of a user who cannot see their monitor screen and have to rely on the web page’s markup to access the content. PlainClothes does one thing well; it removes all CSS styles on a web page.

Though created primarily for web development testing, you can use this extension to view your favorite styles unstyled (so that the boss doesn’t catch you browsing Digg when you should really be finishing up that JavaScript function).

6. Image Cropper

If you want to take certain portions of a web page, Image Cropper is the simple, no-frills Chrome extension for you. Just drag around the area you want cropped, and it’ll take just that part of the web page. Need pixel-perfect accuracy? It displays the dimension and location of your crops to help you get just the size you need.

7. Lorem Ipsum Generator

This extension prides itself in being minimalist and simple—and that’s good because there’s no reason generating Lorem Ipsum text should be a convoluted affair. Lorem Ipsum generator helps you fill up your design mockups with dummy text for presentation purposes.

8. IE Tab (for Windows)

Troubleshooting in Internet Explorer’s proprietary Trident layout engine is not a fun ordeal. With IE Tab, you can at least save some time from having to use Internet Explorer (and its limited list of extensions) for debugging rendering issues in your work.

9. jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery commands in the context of the current web page. It’s a great extension for learning and experimenting with jQuery.

10. Color Picker

This one-trick Chrome extension does one thing really well: quickly getting the Hex and RGB values of any color on any web page. It can be very helpful in determining what colors your favorite website uses without having to take a screen grab of it into Photoshop and using the Eyedropper tool.

11. WebEdit

With the WebEdit Chrome extension, you can make any web page editable (the changes you make, of course, will not be saved). Why would this extension be helpful? If you are creating a website and want to play around with elements without making any significant changes to the code, this extension can come in very handy.

12. Chrome Sniffer

Have you ever wondered what technologies, frameworks, and open source apps a website is using? Experienced web developers can find this out by studying the site’s source code, but if you want a more convenient and quick way of doing this, then check out Chrome Sniffer. Chrome Sniffer lists all known JavaScript framework/libraries (jQuery, MooTools, etc.) and CMS (Drupal, WordPress, etc.) that a website uses.

13. Webpage Screenshot

A common task for web designers is taking screen grabs of web pages. With Webpage Screenshot, you can capture an entire web page, even if it spills outside of the browser’s viewport. It gives users the opportunity to resize the window before capturing and saves the screen grab as a PNG file.

14. Eye Dropper

Eye Dropper is a Google Chrome extension that gives you the ability to determine a color on any web page. What’s more is that it presents a color wheel and color swatches (found in most graphics software) so that you can experiment, tweak and pick colors.

15. SEO Site Tools

A well-formed web page with great markup ultimately leads to awesome search engine results. However, if you would like to evaluate your website in terms of known search engine optimization factures, try out the SEO Site Tools, a Chrome extension that gives you a plethora of useful tools and features for evaluating SEO. It can pull tons of on-page and off-page metrics, social media information, and more.

Do you use Chrome for building websites? Why or why not?

Related Content

• 10 Web Browsers You Probably Haven’t Heard Of
• Performance Comparison of Major Web Browsers
• Top 6 Internet Explorer Extensions for Web Developers
• Related categories: Tools and Web Design

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

Go to Source

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that’s on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).

With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

It features changing text and playback controls. When the animation doesn’t seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. Tested and works on Firefox, Safari, Chrome and Opera. I’ve used images with a width of 1500px, just to cover most of the currently used screen resolutions.

  

Start up your HTML/CSS/jQuery editor and let’s see how you can create this effect yourself! Of course, you can also download the source and dig through the code and learn from there. As always, comments are left on the source code to explain what it does.

Read more…

Go to Source

Users always see the whole image, even on small screen resolutions or resized windows. Images smaller than the browser’s window are displayed at their original size, larger images are resized to fit. Images are loaded in the background, to improve the viewer’s performance and shorten wait times for users. Forward caching continues while viewing images.

Requirements: jQuery Framework
Demo: http://www.yoxigen.com/yoxview/
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Go to Source

The old homepage, shown below, was designed for lower screen resolutions and didn’t fit the whole screen, leaving blank areas on either side:

The new version improves on this, and looks much better as a result, as well as allowing more space for merchandising, though it still doesn’t fit the whole screen.

The page is relatively uncluttered as well, with the knitwear promotion taking up the majority of space, though site search and navigational links are clear.

Navigation

This is clear any easy to use. Users can navigate straight to a category from the top navigation menu, or else choose a sub-category from the drop-down menus.

The site search works reasonably well too, and its good that you can search within categories to narrow the scope, though a few searches, such as this one for a red shirt, return a lot of seemingly irrelevant results.

Importantly, there are plenty of filtering options for both browsing by category or searching by keyword, which allows users to narrow their product searches. Now that M&S has started adding user reviews, this would be a useful filtering option to add to the site.

Product pages

The product pages are a big improvement, and really benefit from from the widening of the site, as more information can now be included in a prominent position.

Product information is good, while the photos, especially for fashion items now have a variety of views, and can be zoomed in more easily. There are some useful little touches too, such as providing product availability when customers select their sizes for clothing. 

M&S announces on every page that standard delivery is free on all orders, so this question is dealt with neatly, though it doesn’t detail the nominated day delivery option clearly enough. This could be a persuasive sales tool, but it is easily missed.

Videos are also available now for a greater range of clothing items, which is more effective for showcasing fashion items than photos alone.

The addition of customer reviews is a smart move, and M&S also provides the ‘was this review helpful?’ option to make it easier to organise product reviews, though the addition of features like pros and cons and picking out keywords, as Kiddicare does, would be one way to improve, especially as these product pages may well attract large numbers of reviews.

M&S is beginning to focus more on its multichannel strategy, with the option, on many product pages, of collecting items in store. I’ve written about this lately, with reference to both Halfords and Argos, and it is a tactic that can work well in terms of driving offline sales.

It has been said that, for every sale the web generates online, it pushes three in store, so it makes perfect sense to make it easy for customers to search online and buy offline.

At the moment, the M&S Shop Your Way service is relatively limited, as it only applies to 46 of its stores, as well as a limited range of products, though the retailer plans to extend the service to 163 locations this later this month.

Also, whereas Halfords allows customers to enter a postcode or town name to check stock in their local area direct from the product pages, M&S shoppers have to consult a pop-up list to see if they have a local store in the scheme, then wait until they are at the delivery details stage of the checkout process before they can select a local store and find out about stock levels.

Collect in store services are a great idea, but it is about making it easier for customers to research and buy offline, and M&S could make its process a little smoother.

Another thing I noticed on the product pages is more prominently positioned product codes, though I’m not sure whether this is to make it easier for customers to find products from catalogues and leaflets or for telephone orders.

Basket / checkout process

The shopping basket page is clear and easy to edit, while it ticks most best practice boxes in terms of delivery and payment options, as well as a nice clear call to action. 

The process is clear any easy to use, with the stages set out clearly along the top of the page, and with most links and navigational options removed to minimise distractions for shoppers.

There are links at the bottom of the page for contact details, returns policies etc, but these open in a new window and therefore customers remain within the payment process.

One area which could be improved is registration, as new shoppers are forced to create an account, entering name and email address details. Though there are worse registration forms, it still represents an unnecessary obstacle for shoppers.

A better idea would be to make registration voluntary, and have users create an account as part of the payment process, rather than making it compulsory.

Conclusion

The relaunched M&S website is definitely an improvement on the previous incarnation, and it gets most of the basics right, in terms of e-commerce best practice.

Thanks to widening the site, the overall look and feel is improved, and the customer journey is indeed improved. A few tweaks here and there could still make a difference though, such as making the collect in store option easier, and looking at the issue of registration.

We already know that Google is obsessed with their own speed and efficiency, but the search giant is also trying to make everybody else faster on the web as well. Google Site Performance, for example, provides tips from Google on how to speed up your website, while Speed Tracer increases the efficiency of web apps by tracking performance.

The company is once again tackling the realm of website efficiency with a new tool that doesn’t track site speed or app performance, but the size of the browser window. The app, Google Browser Size, aims to help website owners solve one of the most fundamental problems in web design: How should I lay out and design my website for higher engagement and conversions?

Browser Size is very simple: it overlays a transparent image on top of any website, displaying what percentage of users (on average) will see your content without scrolling. Because people use various browser settings, monitor sizes, and screen resolutions, it can be tough to know when a key button, like a “Donate” or “Subscribe” button, is visible and easily reachable by your users.

Take a look at the Browser Size overlay on Mashable:

On the top and left are numbers depicting the length and width of the screen, in pixels. In the middle you’ll notice an array of colors and percentages. Based on research the company did during the 20% time of several engineers (this is time where Google engineers can pursue almost any project they please), they were able to extrapolate at what pixel height and width Internet surfers could see the page without scrolling, from 99% to essentially 0%.

What the company did to gather this data is rather fascinating (you can read more about it on the Google Code Blog), but the end result is a deceptively useful tool that will really tell you if you’ve designed your website efficiently or if you need to move key buttons around.

Try Browser Size out on your website, and tell us about the results. Will you be changing anything because of this tool? Let us know in the comments.

Tags: Google, Google Browser Size

Go to Source

Let me know what Desktop Wallpaper you like the best. I will have to say my favorite is probably number 5 of number 13. Also, if you have found any other amazing Christmas Desktop Wallpapers, then please feel free to share them with us and the readers of WebDesignDev by leaving a comment. Thanks and enjoy the collection!

#1 Christmas Snowman

#2 Festive Christmas

#3 Merry Christmas

#4 Merry Christmas

#5 Colourful Christmas Lights

#6 Christmas Village

#7 Wonderful Christmas

#8 Grey Christmas

#9 Gold Christmas Tree

#10 Vector Christmas Tree

#11 Snowman Vector

#12 Merry Christmas

#13 Festive Christmas

#14 Merry Christmas

#15 Blue Christmas Tree

Go to Source

Let me know what wallpaper you like the best, and what other ones in your opinion should have made the list. I know I’m using one of these wallpapers on my desktop.

#10 November 09

This is a nice clean desktop wallpaper for your computer.
Available In: Widescreen & Standard. Plus iPod Touch And iPhone.

#9 Kreative Garden Calendar

In at number 9 we have the Kreative Garden November calendar.
Available In: All major screen sizes.

#8 Chocolate And Zucchini

At number 8 we have the November edition of the Chocolate And Zucchini calendar.
Available In: One Size (re-sizes accordingly).

#7 Bonding

A quality designed desktop calendar. Designed by Terence Gomez from Philippines.
Available In: All Major Sizes.

#6 Metallic Desktop Wallpaper Calendar

Check out this awesome metal styled desktop calendar.
Available In: All Major Screen Resolutions.

#5 Children’s Day

This desktop calendar had to come in at number 5. A quality design by Supriya Kunal Dcunha from India.
Available In: 800×600, 1024×768, 1280×960, 1400×1050, 1680×1200, 1920×1440

#4 November 09

A desktop calendar with a Bench and pond at Cosmo Park
Available In: All Major Resolutions

#3 Halucinogen Sunset

A beautiful vector desktop calendar. Designed by Vinicius Ervilha from Brazil.
Available In: 800×600, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080

#2 November 09 Wallpaper

This is a beautiful grunge styled desktop wallpaper. A non-calendar version is also available for download.
Available In: All Major Resolutions & iPhone + iPod Touch

#1 Bonfire Delight

This had to be number one. A bonfire styled vector desktop calendar. Enjoy It!
Available In: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440

Go to Source

Mozilla announced Tuesday that version 3.6 of Firefox, due by the end of the year, will support the new Web Open Font Format, or WOFF. Web authors will be able to include WOFF fonts in their page designs by linking to the font files in their code the same way they link to images and other downloadable files.

WOFF becomes the third downloadable font format supported by Firefox — version 3.5 included support for TrueType and OpenType font downloads.

But WOFF has two key advantages over TrueType and OpenType: WOFF fonts are compressed, so they download faster, and they include support for tags and other unencrypted metadata.

This is a significant step forward not only for the emerging open format, but also for type on the web in general, which is still stuck in a state of mild turmoil.

For years, designers have been limited to using only a set of five or six common fonts on the web. But thanks to new font rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions.

Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts. Some possible solutions have shown up, including the OpenType standard and a “middleman” licensing model proposed by the start-up Typekit, but haven’t yet gained traction. Earlier this month, popular website Boing Boing launched a redesign using CSS3’s @font-face rule, but ran into problems when things didn’t render correctly on older machines.

WOFF doesn’t promise to totally solve the problem of browser compatibility — it still uses the same paradigm within CSS3’s @font-face rule where users are served a preferred font choice first, but are then offered backup choices if their browser doesn’t support the first one. And there are still special considerations for IE 8 users, as Microsoft’s browser supports @font-face, but only if you use the .eot font format.

What it does do is improve workflows for those using downloadable fonts in their designs.

Mozilla contributor John Dagget outlines the compression and tagging advantages on the Mozilla Hacks blog:

First, compression is part of the WOFF format so web authors can optimize the size of fonts used on their pages. The compression format is lossless, the uncompressed font data will match that of the original OpenType or TrueType font, so the way the font renders will be the same as the original. Similar compression can be achieved using general HTTP compression but because compression is part of the WOFF format, it’s simpler for authors to use, especially in situations where access to server configuration is not possible.

Second, the format includes optional metadata so that a font vendor can tag their fonts with information related to font usage. This metadata doesn’t affect how fonts are loaded but tools can use this information to identify the source of a given font, so that those interested in the design of a given page can track down the fonts used on that page.

Dagget also notes that WOFF fonts aren’t “secure,” so the format shouldn’t be used by foundries wanting to regulate the use of their work. However, over 30 major type foundries — including House Industries, Hoefler & Frere-Jones and ITC — are already endorsing the format, and Mozilla’s support should help foster its popularity.

You can read more about how WOFF is used, plus see examples on the Mozilla Hacks blog. You can also check out WOFF support yourself by downloading the latest nightly builds of Firefox and giving it a whirl.

See Also:

• Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts
• Typekit Hopes to Become the YouTube of Fonts
• Use @font-face Today With Free, Legal Fonts

Go to Source

The Tutorial

Lets get started, download the Twitter PSD Background Template courtesy of Chris Spooner. This PSD has all the different screen resolutions and where the twitter section will be in relation.

Grab your websites header and place it in the top right corner. Then shut the visibility of the template group off.

Using this Hi-Res Spray Brush Set start to erase the right end of the header, the reason behind this is that we want to make the head fade of to the background colour seamlessly with a nice effect spray grunge effect, rather than a straight edge.

Using some of your own brushes really start to personalize the end result whilst blending from the header to the background. You can also use a white brush to spray some texture at the center of the header.

Next, get your logo and place it on the canvas, scale it to size, rotate it to make the design more free and fit with the fading edges.

Download a blank polaroid photo frame, scale it to size and rotate it the opposite way to the logo.

With the polaroid layer select go to Edit>Transform>Warp.

Warp the polaroids image at the bottom left up, this will create the effect that the edge is slightly curled.

Next to add more depth and realism add yourself a drop shadow with an angle of 35, opacity of 50% and a distance of 3px.

Now just turn the visibility of the PSD Template back on just to check that everything is aligned okay at the standard screen res.

Make your twitter page personal to you and grab a photo of yourself and rescale and rotate it in position, then give it the same Warp we did with the polaroid frame.

Add your name to the bottom space of the polaroid frame, the font I have used here is called Dear Joe.

Get yourself a Mug Stain Brush and place it over the polaroid photo, set the blending mode to Multiply.

Download Free Hand Drawn Doodle Icon Set bring the icons that you want or you are part of and desaturate them (SHIFT+CMD+U), rotate and scale them to your preference.

Next, take the desaturated social icons and nudge them into position behind the polaroid photo.

Using the same spray brush set as earlier bump the resolution up and set the colour to black, then spray some where over the header

Next, change the opacity of this layer down to 25%, this will add more of a textured feeling to the header.

Now find yourself some nice doodle brushes and place some around the design, then drop the opacity down to 35% so they aren’t too intrusive to the design – yet making it more ‘personal’.

That’s pretty much the design side of it done, you want to keep your websites theme, make it more personal however you don’t want to clutter it as it’s only the top left corner you have to work with. Now crop the design to the smallest area possible and save for web and devices (OPT+CMD+SHIFT+S) – save it as a JPEG and tweak the file size so you get high quality with the smallest file size.

Login to your Twitter account and navigate to your settings page, click the tab that says design. Change the background image by uploading your new design remember not tile the background.

Next, change the colour scheme of the design so that it matches the overall colours used in the design. Use the eye dropper tool in Photoshop to get the hex colour and simply apply it to the desired section.

Final Image

With the design complete head over to your profile and check out your new design! If you enjoyed this don’t forget to follow me on Twitter.

Go to Source