BlogmyQuery – BMQ

Slideshows and image galleries are all the rage at the moment, there are loads of new techniques, plugins and tutorials cropping up everywhere. In this design news round-up we have chosen our favorites from recent weeks.

SIDEWAYS – jQuery fullscreen image gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery and some simple CSS.
SIDEWAYS – jQuery fullscreen image gallery

Full Page Image Gallery with jQuery

In this tutorial you can learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background.
Full Page Image Gallery with jQuery

Orbit: A Slick jQuery Image Slider Plugin

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.
Orbit: A Slick jQuery Image Slider Plugin

By Paul Andrew (Speckyboyand speckyboy@twitter).

As web designers, we always have something new to learn. Over the last decade our workflow has changed dramatically — it’s become more sophisticated and highly diversified. Not only do we have a much larger variety of improved tools to use; there’s also an endless stream of new techniques emerging and spreading within the web design community via social networks.

And this is where the opportunity to learn new useful, practical approaches and techniques comes in. We can learn by exploring the different design approaches other designers have taken, when solving their problems and apply these approaches to our work to become more productive and skilled. Therefore, our editorial team is permanently looking for interesting techniques, tools and tutorials, which we carefully select and present in round-ups on Smashing Magazine. You needn’t love our lists, but they often will give you some useful ideas and advice.

Below you’ll find an overview of new useful Adobe Photoshop techniques and tutorials that we’ve found and collected over the last months. We sincerely hope that at least some of the techniques presented there will help you improve your graphic design skills in Adobe Photoshop. And sincere thanks to all designers and developers whose articles are featured in this review. We respect and appreciate your contributions to the design community, folks!

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Photoshop Techniques and Tutorials

Illustration

Create an Awesome Number-Based Illustration
In this tutorial, you will how to combine the power of the pen tool with some patterns and shapes to create an original and vivid illustration. You’ll also learn some tips for workflow, along with a variety of design skills that you can apply in your own design works.

iPhone Photoshoot Video
Michael Flarup recorded 6 hours of work with 1000+ layers in Photoshop and made a video speeding up the process. The illustration was designed for a Smashing Magazine’s article How to Market Your App.

Blood and Milk Typography Poster in Photoshop
This tutorial shows you how easy with few basics steps you can create original typography poster in Photoshop. With this technique you can create interesting flyers for clubs or you can use it in advertisements.

Adobe CS5 Design Premium Box Artwork in Photoshop
In this tutorial you will learn how to create a design like the one you’ll find see on the Adobe CS 5 Design Premium Box. Actually, it’s fairly simple and you will be playing with pattern a lot. If you want to create the design of the Photoshop CS 5 box, for example, it will be pretty much the same process.

Simple Roy Lichtenstein Style in Illustrator and Photoshop
Learn how you can apply the Halftone filter in Photoshop and the Width Tool in Illustrator CS 5 to create an image inspired by Roy Lichtenstein’s style.

How To Design a 3D Wooden Box in Photoshop
In this tutorial, you’ll learn to make a Wooden Box with a realistic touch. Along the way, you will be learning various tips such as using layer-sets for putting a group of layers together that you’d want to move/resize alt at a time. With layer-sets, the tedious work of selection of multiple layers for moving/resizing can be avoided.

Ursus – Brief Process Examination by Justin Maller
This post is a case study or a brief process examination sent by Justin Maller, in which he explains how he created the original and abstract Ursus artwork.

Design a Vintage Radio Icon in Photoshop
In this Photoshop Tutorial, you’ll learn how to design an old vintage radio using simple shapes, gradients, patterns and textures.

Brushing Up On Photoshop’s Brush Tool
Developing Photoshop brush skills takes time, but it is well worth the effort. This article outlines the plethora of options that Photoshop affords, so that you can efficiently create and use brushes like the Old Masters.

Create a Colorful Space Scene in Photoshop
In this tutorial you’ll learn how to create a colorful illustration that includes the Earth, the Moon, a starry sky and some beautiful light effects.

Realistic, High Quality Printer Icon in Photoshop
In this long tutorial you will learn how to use vector masks and layer styles in Photoshop to create a slick looking ink printer reminiscent of some Canon and HP ink printers.

500+ Photoshop Brushes for Creating Brush Strokes
This review presents Photoshop brushes that will allow you to easily create realistic paint brush stroke effects. There are 18 free brush sets included, overall more than 500 brushes.

Master Repeating Patterns in Photoshop
Ths tutorial explains how a repeating pattern can be created given that there are spaces around the original shape. In the process, you will get a grasp on creating repeating patterns in Photoshop.

Creating a Furry Possum in Photoshop
In this detailed tutorial, you will learn some techniques used to create the possum (one of the possum brothers) from the animated cartoon-Ice Age.

Simple Underwater Scene in Photoshop
This tutorial shows you how to create a underwater scene with bubbles and light effects.

How to Create a Photo Realistic Camera
This article demonstrates a powerful combination of vector shapes, layer styles, and manual drawing to create a photorealistic camera. In fact, the result is so realistic that you’d think it’s just an ordinary photo.

Making a Book of Magical Playground Scene
This tutorial will show how to create a fantasy book scene. The designers will be using various advanced Photoshop techniques to make the composition as realistic as possible.

Photoshop Poster Design Tutorial
This tutorial shows you how to design a great looking poster to celebrate Adobe Photoshop’s 20th Anniversary.

Opacity + Photoshop Blend Modes = Pattern Magic
When it comes to creating patterns, the ability to duplicate a layer is one of Photoshop’s greatest features.The trick is to pay attention more to how shapes interact than to how a shape looks on its own. This article explains this and other techniques for creating patterns in Photoshop.

Create a Photo Realistic USB Cable in Photoshop
In the right hands, Photoshop’s pen tool can be a very powerful tool for creating incredible; even photo realistic images. This tutorial demonstrates exactly that, and shows how to draw a photo realistic USB cable in Photoshop.

Fresh and Excellent Photoshop Tutorials For Designing Posters
With Photoshop manipulation tools, you can create and edit images for Web and print. Below you will find some tutorials on poster design from 2010.

How to Create a Retro Sci-Fi Computer Game Poster
Combine stock photos and design resources to create an attractive retro sci-fi themed game poster that is inspired by Atari games of the 80s.

Create a Calendar Using Scripting in Photoshop
This tutorial explains how to generate a full year, custom background calendar in Photoshop using JavaScript.

5 Advanced Photoshop Techniques for Web Designers
Sometimes you need that extra Photoshop knowledge in order to achieve the look you need. In this step-by-step tutorial, Marko Prljić shows you how to create five killer effects for your site. You many want to check the second part of the article , too.

Typography

Creating Retro Folded Typography Using Photoshop
In this Photoshop tutorial, you will learn to create retro-looking text that seems like it’s constructed using folded strips of paper.

40+ Gorgeous and Artistic Typography Tutorials Using Photoshop
An overview of professional creative step-by-step typography tutorials using Adobe Photoshop which can enrich your design skills and improve the quality of your work.

How to Create Inset Typography in Photoshop
In this beginning-level design tutorial, you’ll learn how to apply a beautiful and easy text treatment in Photoshop: the inset text effect.

Cool Text Effect with the Puppet Warp Tool in Photoshop CS5
This tutorial will show you how to create a text effect using a photo of a rope and the Puppet Warp tool.

3D Water Text Effect with Repoussé in Photoshop CS5
In this tutorial you’ll see how to create a water text effect with Photoshop. Even though it might look complex, it’s a very simple effect. You will be using the new Repoussé tool and then some stock photos to create the effect.

Create a Distressed Vector Typographic Poster Design
Follow this step by step walkthrough of Chris Spooner’s recent design process for the ‘Spectrum’ poster. Starting with custom made type in Illustrator, you’ll move vector graphics into Photoshop for some serious distressing with Photoshop brushes and blending modes.

Photography

How To Make Digital Photos Look Like Lomo Photography
A step by step tutorial on how I take a digital photo and make it Lomoified. Don’t forget to create an action script once you get this down, it will save you a lot of time.

Uncovering Toy Cameras and Polaroid Vintage Effects (With Photoshop Tutorials)
Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects.

50 Time Saving Photoshop Actions for Enhancing Photos
Here are 50 excellent Photoshop actions that can add professional looking enhancements to your photos with the click of a button.

100+ Outstanding Photoshop Actions to Enhance your Photography
Have you ever seen photos in magazines or on the web and wondered how they achieved that look? This post presents over 100 Photoshop actions that will help you achieve some of these looks and save you some time in the process.

A Perfect Lie in Photoshop #2
In this Photoshop Tutorial Cameron Rad will present us what he has found out over this last year of Photoshop experiments with skin retouching.

20 Beautiful Photoshop Montage Tutorials
In this round-up, you’ll look at 20 beautiful Photoshop montage tutorials that teach you step by step how to create these amazing photo composites.

How to Make a Photoshop Montage
Anyone can cobble together a few photos and textures and create a humdrum montage. To elevate yours beyond this it takes a few simple tricks using Photoshop’s array of tools. This tutorial explains how to create a Photoshop montage in 19 steps.

80+ Photoshop Actions for Giving Your Pictures a Vintage Look
This post round-ups over eighty Photoshop actions that will add vintage or retro effects to your photos.

Improving General Photoshop Skills

Create Animations in Photoshop
After Effects is the go-to Adobe application for creating both simple and complex animations. However, for those users that either don’t have the time to learn an entire new application or simply don’t own a copy of After Effects, Photoshop has incorporated very similar, albeit scaled back, functionality.

Learn How to Draw Hand-crafted Pixel Art in Photoshop
In this tutorial, an illustrator Russel Tate teaches you how to draw with pixels. You’ll learn how to create artwork in the style of eBoy and Army of Trolls.

Create a Camera Lens Icon in Photoshop (Screencast)
In this tutorial, you’ll learn how to create a camera lens icon using Photoshop. Duration of the screencast: 30 minutes.

Learn Photoshop: All of the Basics for Beginners
This post is intended for designers or aspiring designers who either want to get started with Photoshop or have limited experience and are looking to improve. With this post you’ll find links to plenty of resources to teach you all the basics and fundmentals of Photoshop.

Photoshop 101 – Working with Slices
In this tutorial you’ll learn how to use the slice tool and show you some easy methods of slicing up your designs.

Unveiling Photoshop Masks
In this article, you’ll explore the technical aspects and creative advantages of incorporating masks into your workflow.

12 Common Photoshop Mistakes, Misuses and Abuses
This article presents a list of 12 common mistakes, misuses and various ways new users abuse Photoshop.

Mastering Photoshop: Unknown Tricks and Time-Savers
Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the “Keyboard Shortcuts”Â� menu, and some of them don’t even have equivalent menu options.

Taking Photoshop’s Curves Beyond Highlights and Shadows
Read on for more details about what Photoshop curves are, as well as how to use them properly for your designs.

Getting to Know Clipping Masks and Layer Masks in Photoshop
This article outlines the differences between the layer mask and the clipping mask in Photoshop.

Templates

Photoshop Android GUI Set, Great freebie.
This design pieces are brought to you thanks to our design family at Iconshock, which is a quote of faith regarding the quality of the set. The package includes fully editable Photoshop files, original fonts and previews, everything that you may need in order to customize your set according to your preferences. Please let us know your opinions and feel free to share this amazing gift with your friends, remember that you will always find the best articles and resources only here, at Webdesignshock.

60 High Quality Photoshop PSD Files For Designers
Photoshop .PSD file reveals the techniques used on a specific design, and it also tells us the style of the creator and most of the time there is something new we can learn from it. You’ll get quite an overview of interesting techniques in this collection of PSD files.

Free PSD: Facebook Fanpage Template
A Facebook Fanpage mock-up with editable text, posting times etc. You may want to check the Free PSD Twitter Background Template, too.

Modern UI and Layout Tutorials for Photoshop
In this round-up you’ll find many current web design Photoshop tutorials that cover not only web page layouts, but also web app layouts, mobile UI and design elements such as buttons, search boxes, headers and footers.

How to Effectively Organize your Photoshop Layers
This tutorial outlines how to create organized, designer and developer friendly PSD files. This is in no way the only solution, but hopefully it will encourage better practice in the web design world.

Coding, Processes and Organization

Preparing Photoshop Files for Web Developers
Designers can help their counterparts or clients before a design hand-off by taking 10 to 15 minutes to prepare files in a consistent and organized manner that can potentially save developers hours of production time. As an added bonus, an organized Photoshop file will save designers time by minimizing development questions after the file has been handed off for coding.

Photoshop Variables: How to Import External PSD Smartly?
From the article: “A while back, I discovered a system that enables designers to say goodbye to opening 23 PSD files just to change the header color. When a change is required, we can just change it in one place.”

How to Code up a Web Design from PSD to HTML
Learn how to code up a complete mockup in HTML and CSS, ensuring the code is semantic and standards compliant. You’ll then add some finishing touches with a spot of jQuery.

Setting Up Photoshop For Web, App and iPhone Development
This article addresses the issues in trying to match colors in images to colors generated by HTML, CSS or code.

Clean Up Your Photoshop Swatches and Styles
From the post: “If you’re always grabbing the eye-dropper to get colors and copying/pasting layer styles, chances are you’re wasting time and getting innaccurate results to boot. So what’s a good Photoshopper to do? I’ve created two empty palettes for you. Just download them and follow the directions below.”

Divine
Divine creates websites from Photoshop to WordPress promptly. Basically, Divine is a plug-in that sits on top of Photoshop. Once you’ve finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server. The tool is free.

Open With Photoshop
Open With Photoshop is a Firefox extension that allows you to send any image via right click context menu from the browser directly to the Photoshop.

Last Click

Why We Don’t Deliver Photoshop Files
Occasionally a potential client will ask you to give them Photoshop comps as the final deliverable, to be coded either by an internal implementation team or a technical partner. Some designers don’t do that. Here’s why.

If Photoshop Was Batman, Then Illustrator Would Be…
From the article: “Perhaps as a direct result of too much Batman: Arkham Asylum, I found myself asking the question: If Photoshop was Batman, what would Illustrator be? In this silly little article, I explore some of the intriguing possibilities.”

Top 10 Photoshop Feature Requests
This post presentes some of the top 10 most requested features that he believes would make Photoshop a more powerful and time saving tool.

Photoshop CS6 wish list
You may want to check out this Photoshop CS6 wish list, too. Do you agree with the features mentioned there?

The Darwinian Evolution of Photoshop
What does a top notch graphic designer have in common with an amateur photographer who uploads his weekend pictures on Facebook? They both love Photoshop! This infographics presents the evolution of Photoshop in a quite unusual, original way.

(ks)
Tweet

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: photoshop, techniques, Tutorials

It doesn’t matter whether you are a seasoned Photoshop pro or a novice, there are two things both levels have in common – a passion for learning new techniques and a huge desire to improve their skills. And as far as Photoshop tutorials go, text effects are one of the most popular techniques designers choose to follow, and in this round-up we have chosen five in which we are sure you will love.

Create a Retro Sci-Fi Movie Poster in Photoshop

If you are a fan of of sci-fi movie art, then you will love this intermediate Photoshop tutorial.
Create a Retro Sci-Fi Movie Poster in Photoshop

Urban Type Art – Photoshop & Illustrator Tutorial

London is hip again, and in this tutorial Holland-based designer Bram Vanhaeren shows you how he created a new piece that draws on all that’s great about the city – taking inspiration from the Olympics, underground club scenes and the city vista from up high.
Urban Type Art – Photoshop & Illustrator Tutorial

Create a Cosmic Scene with Photoshop and Cinema 4D

In this Photoshop and Cineme 4D tutorial, you will be shown how to create a space composition, exploring techniques for creating 3D text in Cinema 4D, a glass effect in Photoshop and a slew of different light effects.
Create a Cosmic Scene with Photoshop and Cinema 4D

Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

In the tutorial, you will shown the processes used to Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop. This is an intermediate tutorial so some steps can be tricky.
Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

Make a 3D Colorful Abstract Text Effect

Make a 3D Colorful Abstract Text Effect

By Paul Andrew (Speckyboyand speckyboy@twitter).

Last month the first International Conference on Green Computing took place. The conference agenda included a broad range of topics but, in essence, was eagerly addressing issues surrounding the carbon footprint of computing and how computers can contribute to the well being of our world. So what better time to raise a few questions about green web design. What is our role in contributing to a greener computing world?

We are, after all, steering the Internet towards being a safe storage of every kind of data. Every now and again it is good to step back and look at where we fit into this bigger picture of a green computing world. We as web designers and developers are the lead architects of the Web. We are the ones carrying the main blocks and putting them in place. Layering and cementing the blocks of information together. Brick by brick. The new Rome!

Image credit

But who is actually making sure the outer walls of our construction run true? Do we have our eyes on the bigger picture? Are our processes as eco-friendly as they could be / should be? And this is not just about optimization for speed of delivery. Are we true to ourselves in considering the energy efficiency of our web constructions, or are we more concerned for aesthetics? Are these relevant questions for a web designer?

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

So, How Much Does The Web Cost?

What a complex little question. Discovery Magazine has already asked the question: How Much Does The Internet Weigh? (if you are one of those designers/developers who love a little reading about the science behind your work, you’ll find this interesting). In another reference to this question, apparently the Internet weighs 56grams (two ounces), but takes fifty million horsepower to run.

Someone has actually also published some back-of-the-napkin figures for How much energy per Tweet?. According to Google’s own published comparisons of how Google Searches tally up against everyday activities in terms of CO2 emissions, a five mile trip in the average U.S. automobile is equal to 10,000 Google searches.

One web page carbon footprint measured

One crucial irony in this relatively new global concern for energy efficiency is that as broadband internet technologies improve speed of delivery, web designers and developers seem to be designing and building more cumbersome websites.

According to statistics, since 2003, the average web page size has quintupled. That is to say it has increased five-fold. “From 2003 to 2009 the average web page grew from 93.7K to over 507K�. While performance has improved, it seems we have forsaken basic compression logic for increased quality, hence larger files behind our web pages.

Author note: Heaven knows I have been guilty of throwing in a 180kb full-screen image on a web page thinking simply, what the heck, my target audience is in Germany, broadband services here can handle it! Five years ago I can remember aiming for no more than 20kb per graphic.

So what needs to be highlighted here is the fact that the richer and more interactive website experiences we are creating are not going unnoticed. The files we create to build websites are “stored on servers, viewed by personal computers, and connected via networks”. This all requires energy to then house, cool, power and deliver the data that makes up a website.

Dr. Alex Wissner-Gross, a Harvard University physicist and Environmental Fellow, has researched the environmental impact of computing and calculated the CO2 emissions caused by individual use of the internet. His research, published in 2009, indicates that viewing a simple web page generates about 20 milligrams of CO2 per second. This rises to about 300mg of CO2 a second when viewing a website with complex images, animations or videos.

“So, when you are sitting in London viewing a website hosted in California, there are power plants on at least two continents actively pumping carbon dioxide into the atmosphere in order for you to watch that video or read that online newspaper…

Since millions of people are surfing the web every hour of every day, that carbon footprint adds up to an astounding 2% of international emissions each year. In fact, according to the American research firm Gartner, the carbon footprint of information and communications technology exceeded that of the global aviation industry for the first time in 2007.”

Now while scientific measurements of CO2 and kilowatt hours are, to the average person, still a foggy area to get our heads around, what is important to consider is simply that every website we produce has a consequence. According to figures from worldwidewebsize.com, as of the 31st August 2010, there are at least 15.26 billion indexed pages. A very simplistic analysis here would be that, contrary how fast my broadband service is, because we make our graphic files larger together with the fact that we are producing more web pages, any new efficiency is counteracted. As noted, this would be a very generalized conclusion to draw.

One measuring tool

Dr. Wissner-Gross has co-founded CO2Stats, an online “environmental trustmark” calculator, designed to allow web designers and bloggers make their sites greener in an accountable way. CO2Stats says that it automatically monitors and neutralizes the end-to-end carbon footprint of websites — “not just the servers, but the visitors’ computers (while they are on your site) and the networks that connect them”.

CO2Stats allows web designers and bloggers to analyze their websites and put in place greener measures. It monitors and neutralizes the end-to-end carbon footprint of websites.

The changing face of an average web page

Results of various web optimization studies published at websiteoptimization.com in July 2010 state that:

“In 1997, 90% of videos were under 45 seconds in length (Acharya & Smith 1998). In 2005, the median video was about 120 seconds long (Li et al. 2005). By 2007, the median video was 192.6 seconds in duration (Gill et al. 2007). The median bit rate of web videos grew from 200Kbps in 2005 to 328Kbps on YouTube in 2007. So by late 2007, the median video weighed in at over 63MB in file size. On YouTube, the average video size is 10MB, with over 65,000 new videos added every day”.

The conclusion of the report is:

“Within the last five years, the size of the average web page has more than tripled, and the number of external objects (EO) has nearly doubled. While broadband users have experienced faster load times, narrowband users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of EOs, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers”.

The Long-Term View

The World Wide Web Consortium (W3C) is, for all intents and purposes, the one central point where responsibility for the future development of best practice web design can be attributed. The W3C points out quite clearly and early in its Mission Statement that “long-term growth of the Web” is of utmost importance. The key individual areas of its Mission Statement then address:

W3C Principles

• Web for All
• Web on Everything

W3C Vision

• Web for Rich Interaction
• Web of Data and Services
• Web of Trust

The consortium also has a dedicated section for web design standards and applications:

• HTML and CSS
• Scripting and Ajax
• Graphics
• Audio and Video
• Accessibility
• Internationalization
• Mobile Web
• Privacy
• Math on the Web

It would appear that we are successfully delivering the W3C’s vision of a world wide web for rich interaction. And we have the creative licence to produce visually stimulating content. In its definition of “What are Graphics?” it states: “Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user.

Graphics may entertain, educate, or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces”. It goes on to say that “Graphics are used for everything from enhancing the appearance of Web pages to serving as the presentation and user interaction layer for full-fledged Web Applications”.

So Let’s Do Our Part

Consider offering your clients green web initiatives

It can be a valuable collateral marketing tool for your design business if you promote the fact that you encourage green website initiatives. There is, for example, a Danish project – CO2 Neutral Website – which is on a global march to rein in the energy consumption of the world wide web. Your financial registration with the CO2 Neutral initiative contributes to climate projects, provides you a certificate as a climate-friendly website plus gives you use of tools to help energy optimization.

You can make the Web a better place by keeping your website clean and well-organized. And if you do, you can put badges to make it clear to your potential clients, for instance CO2 Neutral Website (not free) or My Blog Is Carbon-Neutral Badge (free).

Black could be greener

While there is controversy over whether a black color palette is more energy efficient than light colors on a website, there are still proponents of the darker website design. The emergence of the search engine Blackle in 2008 (founded by Sydney-based online media company, Heap Media) was the result of a proposed theory in 2007 that a black version of the Google search engine would save a fair bit of energy (750 Megawatt-hours).

“The principle is based on the the fact that different colors consume different amounts of energy on computer monitors”. Blackle searches are powered by Google Custom Search and states that it saves energy because the screen is predominantly black. “Image displayed is primarily a function of the user’s color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen.” Roberson et al, 2002

Beyond the actual color information behind our web pages, some developers have considered the automation of standby mode intra-surfing. That means a website can be put in standby mode while a user is surfing other pages. Online Leaf has developed a WordPress Plugin that installs a green standby engine on blogs.

The low wattage color palette

Boston-based green computing consultant Mark Ontkush (incidentally, whose blog post in January 2007 started the black-white Google controversy mentioned above) has published the EMERGY-C low wattage color palette which is claimed to consume only 3 to 4 watts more than an all black page.

The hex codes are as follows:

• #822007 (rusty red)
• #000000 (black)
• #b2bbc0 (blue grey)
• #19472a (forest green)
• #3d414c (cobalt)
• #ffffff (white)

100% renewable web hosting

Using 100% renewable energy to store and dish up our websites is certainly a service worth considering when building a new website for clients. Or even when doing a re-brand, it could be mentioned to the client as a value-add marketing concept.

Treehugger lists wind and solar-powered web hosting companies that are increasing in popularity. And here is another Top-10 list of green web hosting companies as listed by Web Hosting Geeks where the web hosts proclaim to use only renewable energies to run their servers.

Think, be aware, optimize AND be methodical

As designers and developers we CAN do our bit to help keep the net energy efficient and free from digital litter. For example, do you ever think twice about the redundant (or orphaned) files you leave sitting on a server. After the design and build has been signed off, there is invariably redundant JavaScript and graphic files.

Small behavioral changes can make a big difference

Let’s imagine for just one minute the peripheral consequence of our web designs. If for every website project you build, you leave five unused JavaScript files, say average 10kb per file, and maybe 30 image files that are 30-50kb per file we are looking at approximately 1550kbs of unused data sitting on a server. Times that by all the websites that have been developed in the world … well, that means huge quantities of redundant data sitting on a servers in data centers, that need to be kept cool. While one could argue that this is inconsequential, one could equally argue that it is still litter that could just as well be gotten rid of.

Upon recently revisiting Tim Berners-Lee’s proposal for the web two words struck a chord: portability and usefulness. After facing a situation of ‘Information Loss’ at the European Organization for Nuclear Research (CERN), the conclusion of Berners-Lee’s proposal for better information management goes like this: “We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.

The aim would be to allow a place to be found for any information or reference which one felt was important, and a way of finding it afterwards. The result should be sufficiently attractive to use that it the information contained would grow past a critical threshold, so that the usefulness the scheme would in turn encourage its increased use.�

What I personally gained from this was: If it’s not portable, don’t use it. If its not useful, get rid of it.

Tools to find and remove unused files

There are various (but not many) software that crawl websites and identify pages and files that are unused. Here are two to consider for finding unused files: Windows Inspyder Orfind and Mac SiteCleaner. There are also some software, such as WebsiteCleaner, that profess to optimize complete websites by stripping unnecessary characters and metadata.

How does your website measure up?

You can get a breakdown of overall file size and number of external objects for a web page here at websiteoptimization.com or you can use the Firefox Firebug Extension in conjunction with the Page Speed Add-On to analyse your website pages. Advice is also given on where you can save on size and speed.

Set yourself ‘golden rules of thumb’

As mentioned above, I used to always aim for a graphic size no greater than 20kb. Why, then, should this be any different today? Admittedly, to a great extent the tools we use to build websites have control over the optimal efficiency of our work. But these are also improving. Image compression processes are mostly defined by the JPEG, the Gif and the Png. While more than 60% of the average web page is made up of graphics and multimedia, there are better optimizing practices that we can employ as designers. Popular scripting libraries such as Jquery and MooTools have also greatly advanced the lesser-impact level of dynamic web pages.

You may want to take a look at the following articles on image optimization:

• Website Performance: What To Know and What You Can Do
• Clever JPEG Optimization Techniques
• Clever PNG Optimization Techniques

Wrapping Up

This article actually started out as a good web design house-keeping article, and is not meant to be environmentally evangelistic. The Web is growing so quickly, it is actually difficult to fathom how we are all working away independently in our little corners of the world and yet at the same time working together to build what is destined to be the greatest infrastructure of all time. Each website construction phase is a virtual sojourn for us as web designers and developers, but nevertheless leaves an imprint that can be physically measured.

Some of us may think this is not a web designer’s problem. As far as I am aware, we have no established maximums that cap our build of web page sizes nor restrict how much ‘litter’ we leave on the world wide web. To a degree, we (or our clients) do pay premiums to web hosts based on website sizes. So therefore by passing the environmental buck onto the web hosts means it is their responsibility to put in place energy efficient processes. But as noted above, within the past six years our web pages have increased in size five-fold to an average of around 500kb. At this rate, one could forecast that by 2020 we are looking at pages that are at least 1MB. Therein lies some responsibility.

Or, an alternative conclusion would be that we have reached the page size threshold? That is to say, we are punching out full-size images and streaming video. What else could we possibly want/need?

Whatever your stance on these questions and whatever web technology evolves over the coming 5 to 10 years, some things will always remain true: good things come in small sizes!

Partial Bibliography

• Revealed: the environmental impact of Google searches
• How you can help reduce the footprint of the Web
• The Internet weighs two ounces
• World Wide Web Consortium
• Average Web Page Size Quintuples Since 2003
• Google: Efficient computing
• International Conference on Green Computing
• The full story  on Black Google, Blackle, etc.

(afb)
Tweet

© Alison Fay Binney for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

One of the most difficult tasks web designers have to tackle is ensuring that all web pages work consistently across all web browsers. As the most of you will already know, this is no easy task. And recently, on Design Reviver Answers, this topic was brought up in discussion, and we would like to share with you some of the tips that were offered from our readers, and we would love to hear about any more you may have.

You can leave your tips and thoughts in the comment section below, or you can leave your answer on the original question on Answers here: What’s the Most Effective Way to Make Sure That My HTML/CSS Works On All Browsers?

This question was originally asked by Themans.

Our favorite answer comes from Handrus Nogueira:

The answer came from Trevor:

This answers came from Scunliffe:

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.