Creating Modern, Responsive Websites With Web Standards

Website Standards and Clean Code

It isn’t that difficult to create a modern website based on current web standards. If your website was built using the latest technology, your site will be super-fast, modern, clean and responsive.

Everyone wants their website to cost less, work better, and reach more people in today’s browsers, screen readers, and wireless devices. The inescapable technological advancements that are happening as we speak are breaking websites all over the internet. A modern website built using the latest coding practices ensures that your website will function properly across all devices and help individuals with disabilities who are using special devices to access and interact with the internet – and stand the test of time.

You don’t have to spend money on trendy, short-sighted, proprietary solutions that will end in disaster. No one can afford to piecemeal a website that will ultimately break sooner than later.

Coding several different stylesheets might have seemed like a great idea at the time, but it is not a rational solution to problems that are continuing to plague site owners and builders.

FORWARD COMPATIBILITY

WaSP (www.webstandards.org) advocates standards that reduce the cost and complexity of site creation and ensure simple, affordable access for all. Today, every browser supports web standards as a matter of course. They work with the designers of development tools such as Dreamweaver. You can find a myriad of web standards educational tools and this information can be found in most languages today.

Apple’s latest WebKit based Safari browser, which powers the iPhone’s web browser, Mozilla powered Firefox, Opera, the WebKit based Google Chrome, and Microsoft Internet Explorer 7+ understand and correctly support XHTML, CSS3, JavaScript, and the DOM.
*Internet Explorer 6 does not support many of the latest web standards, and we can only hope that everyone has moved passed this version of IE. Developers know that we can fix IE6 to some degree, but there comes a time when you have to move forward and not look back. We’ve stopped overkill fixes because newer phones are equipped with the latest browsers and it just doesn’t warrant the extra time and expense anymore to work out ALL the fixes needed for IE6 to view properly.

WHAT IS WEB STANDARDS COMPLIANT?

javascript

JavaScript creates action.  JavaScript is the bomb. This language has given us the ability to create action!
In a perfect world, browsers perfect their support for every single standard. Considering that most software doesn’t come out bug-free, and standards are sophisticated and complex, cross-browser support is actually pretty solid enough that we do develop using the latest standards. HTML5, more accessibility, CSS3, structured markup and deeper DOM and JavaScript function calls are becoming the progressive-enhancement that is pushing the internet into the future. All the big companies such as Apple, MSN, Wikipedia, and WordPress have embraced web standards. Of course, they don’t always achieve perfect validation or pure semantic markup, but a trained developer can make these markup fixes very quickly, and let’s face it, modern browsers are lenient.

STANDARDS ARE THE TOOLS WITH WHICH ALL OF US CAN DESIGN AND BUILD SOPHISTICATED, BEAUTIFUL SITES THAT WILL WORK TODAY AND TOMORROW.

OLD BROWSERS ARE INCOMPETENT, INCOMPLETE, AND HAZARDOUS TO THE HEALTH OF THE WEB.

GARBAGE IN, GARBAGE OUT.

More than 90% of all websites are obsolete. They might look good on desktop browsers, but outside of that, the symptoms of decay are starting to appear. Carefully constructed layouts have begun to fall apart, and expensively engineered behaviors have stopped working. As browsers evolve, site performance continues to deteriorate.

Modern browsers are not merely newer versions of the same old thing. They differ fundamentally from their predecessors, and in many cases, they’ve been rebuilt from the ground up. They have a new job: to comply as well as possible with the web standards. As the newer browsers comply with web standards, they are becoming increasingly intolerant of broken code and markup.

THE KNOWLEDGE OF WEB STANDARDS IS A NECESSITY FOR ANYONE WHO DESIGNS OR PRODUCES WEBSITES

BEST WEBSITE NOW ENSURES THAT SITES DESIGNED TODAY WILL CONTINUE TO WORK IN TOMORROW’S BROWSERS AND DEVICES – INCLUDING DEVICES NOT EVEN BUILT OR IMAGINED YET

We believe in “write once, publish everywhere”. It isn’t wishful thinking. We are proud of the fact that our mission statement is “Because it matters”. Our mission follows some basic rules:

Control layout, placement, and typography in desktop browsers while allowing users to modify the presentation to suit their needs.
Develop and support sophisticated behaviors that work across multiple browsers and platforms.
Comply with accessibility laws and guidelines without sacrificing beauty, performance, or sophistication.
Redesign quickly – reducing costs and eliminating unnecessary work.
Support emerging devices from wireless gadgets and smart phones to Braille output devices and screen readers used by those with disabilities with one website.
Offer sophisticated printed versions of any web page.
Stay educated and ahead of the curve to always use real semantic markup.

PAGE RANKING AND SEO

iStock_000022200278Large

SEO and Analytics go hand-in-hand.  Believe it or not, companies do not have to spend a lot of money for SEO or Analytics. Well thought out SEO makes your website findable. Content is king. Focus on lean, keyword-rich, buzzword-free content that’s relevant to your customers, and use semantic markup. Copy, CSS layout and HTML5’s latest coding practices are the golden keys to findability.

COMPANIES THAT KNOW THE SIMPLICITY OF GREAT SEO ARE PROSPERING. THOSE THAT DON’T ARE FALLING BEHIND.

ACCESSIBILITY – THE HEART OF WEB STANDARDS…

Accessibility makes sure your content can be read and your site can be used by everyone, no matter what device they browse with, and regardless of physical ability. Innovation is the soul of accessibility. Accessibility is legal standard for judging and enforcing the accessibility of sites. This is great news because the world is being pushed into one single standard.

If you use standards-based designing principles, you not only make your content easy for search engines to find, it will also enable visually disabled people who use screen readers to navigate your websites content.

Screen reader users navigate web pages by tabbing from h2 to h2 and from section to section, just like sighted users navigate by visually scanning. When structuring your site semantically, pay particular attention to forms and tables. Provide keyboard access for those who are unable to use a mouse. Keyboards and assistive devices are the gateway to online user experience.

WELCOME MILLIONS OF VISITORS TO YOUR SITE WHO ARE LOCKED OUT – YES – THERE ARE MILLIONS OF DISABLED PEOPLE IN THE WORLD WHO HAVE ACCESS TO THE INTERNET

iStock_000020458543XSmall
Google web crawlers look for relevancy of content when a user types in an inquiry.
Think of web crawlers as blind users – Google is the biggest blind user on the web. Dish out appropriate content, well written and well structured, and you not only serve the blind folks in your audience, you also attract millions of sighted ones.

It wouldn’t be smart to exclude disabled Americans. This demographic would take up a city the size of Los Angeles or New York City. Millions!

If you think blind people don’t buy products online is missing the point and the boat. Don’t be blind yourself to the true nature of the audience you reject – you are still reaching the non-disabled populace this way by conforming to access guidelines and many others who would have ordered your products over the phone if only your site let them.

Section 508

Section 508 requires all websites under its jurisdiction to provide “equal or equivalent access to everyone” to accommodate the visually impaired, the hearing impaired, the physically disabled, and people who have photosensitive epilepsy and it spells out what accessibility really means. This law covers computers, fax machines, copiers, telephones, transaction machines, and kiosks, as well as other equipment used for transmitting, receiving, or storing information. It also covers many websites. Section 508 became U.S. law in 2001 and applies to the following:

  • Federal departments and agencies (including the U.S. Postal Service)
  • Deliverables from contractors who serve them
  • Activities sponsored or funded by the Federal government
  • Activities sponsored by states that have adopted the regulations
  • This is just skimming the surface and you can find plenty of resources to explain what the exact standards are and how to apply them along with specific things to do to make your site 508 compliant.

The bottom line is that if you design with web standards and follow the guidelines, your site should be accessible to screen readers, Lynx, mobile devices, and old browsers as it is to modern, compliant browsers. Standards and accessibility converge in agreeing that one web document should serve all readers and users. Even Flash and PDF’s can now be made accessible.

MYTH: ACCESSIBILITY IS EXPENSIVE

Most tasks to bring a website to its best take minutes to accomplish. Simple tasks like adding a label to your web form or writing a table summary. Type a brief alt text for each image – which is a no-brainer. High level conformance is going to obviously fall under another category and will cost more. If you want to author closed captions for web videos or to caption live streaming media news feeds in real time see Joe Clark’s “Best Practices in Online Captioning” . (www.joeclark.org/access/captioning/bpoc)

I highly recommend the following cited book for anyone who builds things for the internet. Web Standards is such an exciting concept that ties us all together. Where we go from here who knows, but right now we are accomplishing a great thing using Web Standards, and this book is a must have.

You can find the latest Standards and beta versions of some brilliant new concepts existing on the W3C website. Their HTML5 Validator is a great place to find semantic errors within your page. Go to http://validator.W3.org/ for the latest information.

Jeffrey Zeldman with Ethan Marcotte (2010). Designing with Web Standards, Third Edition. Berkeley, CA. New Riders.

Adobe Photoshop CS6 – Background Eraser Tool

Remove a background with Photoshop Background Eraser Tool

ans-4-2

Sometimes you take a photo that is great – minus the background.  The background just ruins your picture.  Photoshop’s Background Eraser Tool is awesome. Here is an image that I would like to do something with, but the background has to go.  Here are the steps I used to fix my awesome cowgirl’s photograph, while keeping her hair realistic:

  1. Cmd or Ctrl J to create a new layer.
  2. Go into the drop down for the Eraser Tool (E), and choose Background Eraser Tool.
  3. Up in the Options Bar, go into the brush presets and bring to brush hardness level to about 95% to soften it just a little.
  4. Choose the second option (out of three) to Once for the Sampling method.  The first one is for Continuous, the third is Background Swatch. The Sampling controls how often Photoshop looks at the color and decides what to erase.  Once makes the erasing color one time and will erase pixels that match it.
  5. The Limits menu default is always set to Contiguous, but we want to choose Discontiguous, which works the best to erase similar color through hair.
  6. Turn on Protect Foreground Color and then Option-click or Alt-click a strand of hair.
  7. Now start to erase the background by moving the mouse’s crosshairs to touch only the pixels you want to erase.  Use a really big brush for soft areas, where the background peeks through strands of hair, and a small brush for hard edges around clothes and shoes.  Of course, use the bracket keys to increase or decrease your brushes size.  Keep Sampling the foreground colors to ensure Photoshop knows what areas of the background you want to erase.
  8. Adjust the Tolerance levels in the Options Bar if you aren’t getting the proper results.  Lower it if it erasing too much.
  9. Release the mouse often.  Cmd or Ctrl Z will undo a spot.
  10. Once you get a clean outline around the subject, just use the Normal Eraser Tool to get rid of the rest of the image, or use a Selection Tool around the subject, Inverse it, and delete what is left of the image.
  11. Have fun adding your subject to another image.

I have always wanted to say, “this isn’t my first rodeo”, however, I have never been to a rodeo, and neither has my little cowgirl, but we can always pretend.

Credit for the background image goes to http://www.flickr.com/photos/mjhusereauxpix/ which I found on Flickr.

ans-4-4

CSS3 – Design with Color Control and Opacity

CSS3 has the ability to control color opacity.

There are many degrees of translucence between total transparency and total opacity.  Web Designers often use opacity for visual appeal in conjunction with mouseover events for pop-up photo galleries as well as drop-down and flyout menus.

hex_colorsColor is a big part of a website, and you can color anything and everything using CSS.

There are 16 valid color names:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua.

Hex Codes

Virtually all modern screens can show at least 16.7 million colors, and CSS provides several ways to define all those colors.  The most common method of defining colors is to use a hex code.  This allows you to define a color using three pairs of hexadecimal numbers representing red, green and blue.  A zero indicates none of that color.  An ff indicates that color at full strength.  Example: #000000 is black – none of any color; #ffffff is full white – full strength of every color; #ff0000 is red – full strength, no other color; #00ff00 is green – no red, full strength green, no blue.

You can also use a three-digit shorthand syntax to express colors where each pair of digits has matching characters.  The browser actually doubles each of the digits to translate to six digits.  Example:  #000 is short for #000000; #0f0 is short for #00ff00.  The letters aren’t case-sensitive, so you can use uppercase or lowercase.

RGB Codes

rgbRGB is another way to express any of the 16.7 million colors.  Like hex, you define a color using a combination of red, green, and blue, but you use the 255 decimal range of 0 to 255, and you don’t need the # character.  The syntax used is rgb(red,green,blue).  You replace the red, green, and blue each with a whole number in the range of 0-255 to indicate the amount of that color.  Or, optionally, each number can be a percent in the range of 0% to 100%.  You can’t mix percent and numbers though.  Example:  rgb(0,0,0) is black, and it is the same as saying rgb(0%,0%,0%) or hex code #000!  There is no technical advantage or disadvantage to any particular method, it’s your call.

HSL Color

hslAnother way to express any of the 16.7 million colors available to you is Hue, Saturation, and Lightness (HSL) which is based on the concept of a hypothetical color cylinder.  The syntax for expressing color using HSL is hsl(hue, saturation, brightness).

Hue is the basic colors of the rainbow, and all the colors circle the hypothetical cylinder.  The cylinder is round, so 360 degrees around.  Red is at 0 degrees, green is at 120 degrees, blue is at 240 degrees.  At exactly 360 degrees, it goes back full circle to red.

Saturation increases as you move out from the center of the cylinder.  It is how much of the color there is.  Picture a bottle of perfectly red ink.  That would be 100% saturation, near the outside of the cylinder.  Take a drop of that ink and drop it into a glass of clear water.  It’s red, but it is at a low saturation, maybe 1%, near the inside of the cylinder.

Lightness is how much light is hitting the color.  No light is 0 (zero) and would render it black near the bottom of the cylinder.  Too much light (100) would render white at the top of that imaginary cylinder.

So looking at hsl(hue, saturation, brightness), you replace hue with hue expressed as a number indicating degrees around the cylinder with red at 0 (zero), green at 120, and blue at 240.  You can use any number in the range of 0 to 360.  You can express saturation as a number the range of 0% (no saturation) to 100% (full saturation).  Lightness, too, ranges from 0% (totally dark) to 100% (totally light) with 50% being the standard lighting.

It is important to keep in mind that hex, RGB, and HSL are just different ways of expressing the same 16.7 million colors.  There is no right way or better way.  It is up to you, the developer.

Translucent color expression is made using rgb() or hsl() coloring methods and using a fourth value for opacity.

Opacity, or transparency, and translucency all describe how much you can see through something.   The syntax for transparency is rgba(red, green, blue, opacity) or hsla(hue, saturation, lightness, opacity).  The “a” stands for alpha transparency.  The opacity value is new to CSS3 so some older browsers won’t handle them correctly.  You will want to set a background color as the default for the older browsers followed by the hsla() or rgba() values, including the opacity value.  The newer browsers will read the second value in this statement:

#wrapper {
background: white;
background: rgba(255,255,255,.8);
}

The opacity value is a number between .01 to .99 – the larger the number, the more opaque the color.  Zero is no opacity (transparent) and 1 is opaque.

Opacity property

The opacity property also has the syntax opacity: value;.  The value can be any number in the range of 0 to 1 where 0 is totally transparent and 1 is opaque.  This property is great because is applies to images and entire containing elements!

<td style=”opacity: .1″>
<image src=”images/felix.jpg” alt=”felix the cat” />
</td>

You can give each cell its own opacity value using an inline style.  You can have elements on a page that are completely invisible by using the syntax visibility: value; with either hidden or visible for the value.  It still takes up the space although it is not visible.

Use the syntax display: none; if you want to remove an element from the flow entirely. Use display: block; to make it visible.

By default, block elements are however tall they need to be to contain their content.

So, this has been a great lesson for me and I hope it helps someone else down the road.

Christina Descalzo
Kennesaw State University – HTML5 & CSS3 Certified

PNG, JPEG, GIF & TIFF FILES AND WHAT IS GIMP?

11111-1-2When you convert your PNG files, your meta data and keywords are stored inside. The Portable Network Graphic format was created in 1995 when Unisys and CompuServe officially announced that programs using GIFs would require royalties because of the patent on the LZW compression method using GIF.

The best thing about PNG files for digital photographers is that they can be smaller in file size and preserve transparency.  PNG’s have proven to be the best for gradients. You can categorize and add keywords.  The danger is that there is a problem with the loss of your meta data when the image is opened with indifferent software. Your information can easily get lost.

Comparison to JPEG

JPEG (Joint Photographic Experts Group) format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gain in quality. By contrast, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than JPEG can, and without the noticeable visual artifacts which JPEG produces around high-contrast areas. Where an image contains both sharp transitions and photographic parts, a choice must be made between the two effects. JPEG does not support transparency.

Because JPEG uses lossy compression, it suffers from generation loss, where repeatedly encoding and decoding an image progressively loses information and degrades the image. Because PNG is lossless, it is a suitable format for storing images to be edited. While PNG is reasonably efficient when compressing photographic images, there are lossless compression formats designed specifically for photographic images, lossless JPEG 2000 and Adobe DNG (Digital negative) for example. However these formats are either not widely supported or proprietary. An image can be saved into JPEG format for distribution so that the single pass of JPEG encoding will not noticeably degrade the image.
The PNG specification does not include a standard for embedded Exif image data from sources such as digital cameras. TIFF, JPEG 2000, and DNG support EXIF data.
Early web browsers did not support PNG images; JPEG and GIF were the main image formats. JPEG was commonly used when exporting images containing gradients for web pages, because of GIF’s limited color depth. However, JPEG compression causes a gradient to blur slightly. A PNG file will reproduce a gradient as accurately as possible for a given bit depth, while keeping the file size small. PNG became the optimal choice for small gradient images as web browser support for the format improved.

COMPARISON TO JPEG-LS

JPEG-LS is a “near-lossless” image format far less widely known and supported than the other lossy JPEG format discussed above. It is directly comparable with PNG.  On the Waterloo Repertoire ColorSet, a standard set of test images (unrelated to the JPEG-LS conformance test set), JPEG-LS generally performs better than PNG, by 10–15%, but on some images, PNG performs substantially better, on the order of 50–75%.  Thus, if both of these formats are options and file size is an important criterion, they should both be considered, depending on the image.

COMPARISON TO TIFF

Tagged Image File Format (TIFF) is a format that incorporates an extremely wide range of options. While this makes TIFF useful as a generic format for interchange between professional image editing applications, it makes adding support for it to applications a much bigger task and so it has little support in applications not concerned with image manipulation (such as web browsers). It also means that many applications can read only a subset of TIFF types, creating more potential user confusion.

There is a TIFF variant that uses the same compression algorithm as PNG uses, but it is not supported by many proprietary programs. TIFF also offers special-purpose lossless compression algorithms  which can compress bilevel images (e.g., faxes or black-and-white text) better than PNG’s compression algorithm.  I need to find out more about why we would use TIFF files and plan to find out in an upcoming class.

BITMAP GRAPHICS EDITOR SUPPORT FOR PNG

The PNG format is widely supported by graphics programs, including Adobe Photoshop Corel ‘s Photo-Paint and Paint Shop Pro, the GIMPGraphicConverterHelicon FilterInkscape,IrfanViewPixel image editorPaint.NET and Xara Photo & Graphic Designer and many others. Some programs bundled with popular operating systems which support PNG include Microsoft’s Paint and Apple’s iPhoto and Preview, with the GIMP also often being bundled with popular distributions.

Adobe Fireworks (formerly Macromedia) uses PNG as its native file format, allowing other image editors and preview utilities to view the flattened image. However, Fireworks by default also stores meta data for layers, animation, vector data, text and effects. Such files should not be distributed directly. Fireworks can instead export the image as an optimized PNG without the extra meta data for use on web pages, etc.

File size and optimization software

PNG file size can vary significantly depending on how it is encoded and compressed; this is discussed and a number of tips are given in PNG: The Definitive Guide.

COMPARED TO GIF

Compared to GIF files, a PNG file with the same information (256 colors, no ancillary chunks/metadata), compressed by an effective compressor will normally be smaller than GIF. Depending on the file and the compressor, PNG may range from somewhat smaller (10%) to significantly smaller (50%) to somewhat larger (5%), but is rarely significantly larger for large images. This is attributed to the performance of PNG’s DEFLATE compared to GIF’s LZW, and because the added precompression layer of PNG’s predictive filters take account of the 2-dimensional image structure to further compress files; as filtered data encodes differences between pixels, they will tend to cluster closer to 0, rather than being spread across all possible values, and thus be more easily compressed by DEFLATE. However, some versions of Adobe Photoshop, CorelDRAW and MS Paint provide poor PNG compression, creating the impression that GIF is more efficient.

What is GIMP?

The (GNU Image Manipulation Program) is an image retouching and editing tool and is released under the GPLv3 license as free and open-source software. There are versions of GIMP tailored for most operating systems including Microsoft Windows, Mac OS X and Linux.
GIMP has tools used for image retouching and editing, free-form drawing, resizing, cropping, photo-montages, converting between different image formats, and more specialised tasks. Animated images such as GIF and MPEG files can be created using an animation plugin.
The developers and maintainers of GIMP have a product vision for GIMP to strive to be a high end free software graphics application for the editing and creation of original images, photos, icons, graphical elements of web pages and art for user interface elements.
GIMP’s fitness for use in professional environments is regularly reviewed; as such, GIMP is often cited as a possible replacement for Adobe Photoshop. The maintainers of GIMP state that GIMP seeks to fulfill GIMP’s product vision rather than seek to replicate the interface of Adobe Photoshop.
The user interface of GIMP is designed by a dedicated design and usability team. This team was formed after the developers of GIMP signed up to join the OpenUsability project. A user interface brainstorming group has since been created for GIMP, where users of GIMP can send in their suggestions as to how they think the GIMP user interface could be improved.

Sounds interesting, but I am a complete Photoshopper now, and can do just about anything from there.
I hope you learned something! I know I did….

Reference: Wikipedia – Image File Types

Photography 101 – Color Mapping for Images

Image

Color Mapping – what color space is appropriate for certain photographs?  This is a very important part of photography and graphic design and is only going to become more important as new technology arrives.  Once you view your images on the latest monitors, you will see that this is something any good photographer is going to have to take into consideration while processing their images.

I am writing this blog to simplify the process for myself and to remember these couple of facts:

Let’s say you  have a  great photograph of a landscape and you are curious about which color space is the best fit for this image based on either sRGB, Adobe RGB or ProPhoto RGB. It may take a little to get good at judging the color spaces and and pre-visualize how you’re going to process that image to get the result you’re looking for, but this is what will make you a great photographer.

There are a few things to consider based on how you are going to use your images.  Will they only be shown on the web, or are you planning to print it someday?

So we already know that all color modes are based on 3 channels, red, green and blue.  And we also know that basic color information tells us that an image in an 8-bit mode refers to the availability of 255 colors in each channel, which equals 16.7 million possible colors, and a 16-bit image has 65536 colors in each channel offering up the possibility of over 281 trillion colors!

sRGB has the lowest gamut of color range and works well in low end monitors.  It is about 20 percent less color space than Adobe RGB and half that of ProPhoto.  It used an 8-bit mode and will literally eliminate some color saturation.  Most monitors capacity can only render images in this mode and is okay if you are not going to do any editing or printing of your work.

Adobe RGB uses the same amount of colors as sRGB, only spread out a little bit rendering a more saturated color.  This is a more acceptable mode for editing or printing images.  If there is banding or other funky artifacts, you will need to open your images and work in ProPhoto. An image that was rendered in sRGB mode and viewed in an Adobe RGB monitor will look washed out.    Again, this takes a little while to discover, but the best amateur photographers and pros consider these things.

If you are going to display your images only on the web, images shot in JPEG mode and rendered in 8-bit mode might be sufficient.  If you shoot in RAW, then your images can be rendered in any of the available color spaces.

SHOOT IN RAW!

If you want to print your images, or edit them, you should be shooting in RAW and edited in 16-bit mode. 16 bit mode does not allow more saturated colors than 8 bit mode, but rather more colors in between the existing 8 bit colors. It is actually better to do all you image editing in 16 bit mode especially when working with a large gamut color space.

RAW files can be converted to whatever color space you decide when you import it into an image editing program. Also note that most digital SLR sensors can capture colors that are outside the Adobe RGB color space, which leads us to ProPhoto RGB.

ProPhoto RGB has about 50 percent bigger range in color than Adobe RGB. Some Epson printers are capable of printing colors outside the Adobe RGB color space, namely in the orange and yellows. ProPhoto RGB covers all of these colors, but also some that are not even visible, let alone printable. In fact, the color space is so big that even in 16 bit mode, you risk banding and artifacts due to the “gaps” between the colors. Generally, you only want to use ProPhoto if you see clipping in the Adobe RGB color space.

Once you have your file open in ProPhoto RGB you have to be careful. The huge size of the color space and the size of the gaps between the colors means that you risk banding and other rounding errors if you are not careful. Do not even think of using ProPhoto RGB in 8 bit mode. The results are disastrous.

The histogram is a bar graph that shows the amount of each brightness or color intensity level in an image and illustrates the image’s overall tonal range.  This graph can be seen in numerous places in a variety of photo editing software.  Viewing histogram in addition to viewing the image itself, can be helpful in determining how to adjust an image for its intended purpose.

A histogram often looks like a solid shape of a mountain range with a jagged top, but it is actually made up of a series of adjacent vertical bars that measure the amounts of each brightness level in an image.  The taller the bar in the graph, the more of its tone is present in the image.

An image with mostly white clouds generates many tall bars on the right side of the graph, representing the lighter colors.  Add some black, and the histogram will pick that up on the left side.  In between these two are mid-tones and shades.  A histogram with bars all the way across means that the image contains all the available brightness levels possible, which often makes an image appear full of detail and depth.  Making changes that cause the bars to appear across the entire width of the histogram is a good objective if detail and depth are intended for the image, which is usually the case for photos of people and scenery.

When depth and detail are the goals, avoid huge gaps in the histogram.  If there is a limited amount of color in your image, then there will be an acceptable amount of gaps.  There is no one right histogram for each image.  Again, this comes with experience and practice.

Histograms measure the pixels in an image in numerous ways.  Practice working with a histogram by converting your image beween the different color modes if you want to get a real good grip on this concept.

I am finding that the best process for me is to shoot in RAW, open the image using the ProPhoto RGB color space, covert it to Adobe RGB while keeping it in 16 bit mode. This way I am able to do a lot more editing without the risk of errors and the image won’t be degraded. Also keep in mind that you want to convert to Adobe RGB using the Perceptual rendering intent. Doing this will compress the color gamut (range) rather than clipping it.

So, if you want to get the absolute best out of your images, shoot RAW and process as you need to. Stick with Adobe RGB and 16 bit mode for your editing to maximize your image potential and avoid problems.  Become an expert using the histogram.  With new technology, it is imperative that any graphic design or photography students understand the difference in the color modes.

I am pretty sure we will be seeing additional color modes in the future……