RGB vs CMYK–Which should I use?

Having taught and worked with Adobe Photoshop for many years, I get asked many basic but good questions about it by new users. One has to do with color, and the color systems we use in a picture. There are several that Photoshop can use, but the two most common are RGB and CMYK. The question: Which is best?

The fundamental difference between the two is, RGB is meant for use on screen, and CMYK for print. The terms used to describe how they work are “additive primaries” and “subtractive primaries”, which refer to how these systems show white. For RGB, imagine standing in a dark room with a white wall. Take three flashlights, with color filters (red, green, and blue) and shine them on the wall. Where the three colors overlap, they seem to make white light (the opposite of what a prism does with white light—see Pink Floyd’s album THE DARK SIDE OF THE MOON, specifically the cover—and the back cover.) So the three additive primaries add up to white.

Additive Primaries

With CMYK, the example is even simpler—a piece of paper going through a color printer may have areas where no ink or toner has landed. And the color of the paper we usually use? White, of course. So when the colors are held back, or subtracted, from a spot on the paper, that spot stays (or is) white.

Subtractive Primaries

But we need black ink too, because the dyes or pigments only sorta make black, and a normal eye can see this. So the printing folks added it for completeness.

In doing this, though, we get a couple of problems, and it takes a little thought to get round them. First, because the RGB system normally involves a screen that illuminates itself, it can show more subtle shadings of color than a piece of printed paper (which, unless you’re using radioactive inks—shame on you!—does NOT glow in the dark). The term Photoshoppers and graphic artists use is the “gamut”, which is wider/larger for RGB than for CMYK (where the ink/toner can smear a tiny bit and mess up the shadings). And a printout can’t show all the shades that a screen can. By definition, therefore, printout will always look a little less intense (“saturated”) than onscreen images.

Color Gamuts

And second, any Photoshop image saved in the CMYK system will use 33% more space on disk, regardless, than if saved with RGB. Why? Because the number of color “channels”, how many kinds of color there are in the picture at minimum, is three for RGB, and four with CMYK.

So which should we use?

If you’re scanning in a photograph you want to clean up and reprint (say, from the early 1900s), CMYK will work better, because what you’ll see on screen is what will come out of the printer. But if you’re scanning for archival purposes, scan in CMYK if possible to get a realistic version of the image, THEN change to RGB. Since RGB’s gamut is wider than CMYK’s you won’t lose any subtleties or shadings, but you will get a smaller file on disk. And you can scan in CMYK, do all your work, then save in RGB for later. Best of both worlds. Just have to make sure we understand the tradeoff of size, gamut, and storability.

HTML: A Brief History

Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there.

1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire.
1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language).
1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett was working on what he referred to as HTML+ (Hypertext Markup Format) while working for HP (Hewlett-Packard) in Bristol, England.
1994 IETF creates the HTML Working Group.

World Wide Web Consortium (W3C) was also formed by Berners-Lee at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS).

1995, November 24 HTML 2.0 published as the first specification of the language.

1995, November 25 Form-based file upload
1996, May Tables
1996, August Client-side image maps
1997, January Internationalization
1996, December 16 CSS Level 1 published as W3C Recommendation
1997, January 14 HTML 3.2 published as W3C Recommendation.

The HTML Working Group had been closed in September of 1996 and all future development fell under the auspices of the W3C.

1997, December 18 HTML 4.0 published as W3C Recommendation.

There were three variations:

Strict

Transitional

Frameset

1998, May 12 CSS Level 2 published as W3C Recommendation
1999, December 24 HTML 4.01 published as a W3C Recommendation.
2011, June 7 CSS3 Color Module Recommendation
2011, September 29 CSS3 Selector Level 3 Module Recommendation
2011, September 29 CSS3 Namespaces Module Recommendation
2012, September 19 CSS3 Media Query Module Recommendation
2014, October 14 HTML5 published as a W3C Recommendation.

The large gap between HTML 4.01 and HTML5 saw the W3C strike off in a new direction incorporating elements of XML with HTML thus creating XHTML. They continued to work in this direction until a fissure arose in 2004 and members from Apple Computers, Mozilla Foundation, and Opera Software formed the Web Hypertext Application Technology Working Group (WHATWG). They pursued a specification they referred to as HTML5. On April 10, 2007 WHATWG proposed that the W3C adopt their HTML5 specification as the starting point for the newest recommendation. On May 9, 2007 the W3C’s new working group accepted the proposal.

2016, November 1 HTML 5.1 published as a W3C Recommendation.

The HTML q Tag

Somewhere in the neighborhood of 18 to 20 years ago I sat down one weekend with a book, a computer, and a few images and put together my first basic website. It was about artists from the Impressionist movement and was not anything to brag about with one exception, I built it myself, using Notepad.

That was the era of HTML 3.2 moving toward HTML 4.0. Netscape was my browser of choice and most pages used tables for layout.

A lot has changed in the following years but one thing remains…most people don’t know that HTML has a q tag to wrap things in quotes. If something is supposed to be in quotes most people will just type them in their code editor, or allow their visual design application to insert the entity characters to put quotes in place. Like this:

entity-quote

Which results in this page.

quote-entity-browser

One of the main reasons I didn’t use the q tag early on was lack of browser support. Netscape supported it but IE didn’t, and IE was on the rise. The next group of browsers (Firefox, Chrome) weren’t any better. When you don’t use something for an extended period of time you tend to forget about it. That’s what happened to the q tag in my brain.

Another reason may be the fact that it is a specialized tag. It serves one purpose, wrapping text in quotation marks as part of a citation. Why learn about a tag that does one job? Mostly for SEO (search engine optimization). Giving credit where credit is due.

Using the q tag is simple and straight forward. Whatever you want quoted…wrap that text within a pair of q tags.

quote-tag

quote-ie

As for browser support in 2016; all current browsers support the q tag. IE 9 forward offers full support. So maybe it’s time to look at the small but useful q tag and give credit where credit is due.

 

HTML5 Form Date Attribute

Getting corporate America to make the move to HTML5 seemed to take longer than any other transition we’ve seen in the past. In part I’m sure due to the long development process. From first working draft in January of 2008 to stable recommendation in October of 2014, that’s almost 7 years.

There are many compelling reasons to make the change but the one we will focus on today deals with forms and an easier way of inputting a date.

Early on the primary means of capturing a date was supplying a simple textbox and a visual example of the formatting.

text-element-browser

text-element

It was simple but had to have validation to guarantee its formatting.

Another approach would have been using select menus. A lot more code, both to build the lists and to concatenate the values on the server.

dob-select-list

dob-select-list-code

Another option would be to use a JavaScript library like jQuery and plug in their Datepicker UI component.

dob-jquery-datepicker

It would all be so much easier if date were just on option for a form element. Well it is in HTML5!

date-element-code

That simple input type results in a UI structure that looks like the Datepicker from jQuery.

date-element-chrome

This screen capture is using Chrome but it looks exactly the same in Opera. If you use Edge on Windows 10 it looks like this.

date-element-edge

On an iPhone using Chrome within iOS 10 it looks like this.

date-element-chrome-iphone

That’s all the good news, now for the downside. It doesn’t work in any version of IE, Firefox or Safari and doesn’t look promising for the last two in the foreseeable future.

But don’t let that stop you. Remember, if the browser doesn’t recognize the input type it defaults to a textbox, our old standard method. The benefits to the remaining users and all those on mobile devices are all in the plus column.

Styling the Humble Checkbox Using CSS

The checkbox has been a staple in the world of HTML forms since day one and for the most part has remained unchanged. HTML 4 introduced the label tag which can be associated with a checkbox using an id attribute in the checkbox and the for attribute within the label. That way you don’t have to click directly on the checkbox, simply clicking the label will select or deselect it.

If the checkbox looks any different today compared to 20+ years ago it’s only because the browser renders it that way.

A typical form with several checkboxes would look like this:

plain-checkbox

And the code to generate the page looks like this:

plain-checkbox-code

Four simple checkboxes with labels. Nothing fancy but they could be simply by applying a little style using CSS.

Take a look at the same four checkboxes after a CSS makeover:

styled-checkbox

The HTML to generate the page has changed a little, but not all that much:

styled-checkbox-code

You’ll notice the label is still there but it has been emptied and moved after the input tag. We’re using it to create the circles and it is an easy task because the id associates the label with the checkbox. In place of the standard label we’re using a span tag to tell us what the checkbox represents.

All the heavy lifting is being done by an external stylesheet using one class selector, one element selector, and a few attribute selectors.

styled-checkbox-css1

First up we shape the div tag that contains each checkbox. We size it, color it, round off the corners, and position it. The relative positioning is necessary because items within it will be absolutely positioned and need a point of reference.

Next up we create the narrow gray line the circles move along. It’s nothing more than empty content that has been sized, absolutely positioned, and colored.

Now we can start working on the circles, both outer and inner, and we will use our empty labels to accomplish this. They will be positioned, sized, stacked and shaped. Oh yeah, and one last item, a CSS3 transition that will allow the circles to shift when they are clicked.

styled-checkbox-css2

The :after pseudo class will be the vehicle used to create the inner circle.

styled-checkbox-css3

The last three selectors are all attribute selectors aimed at the [type=checkbox]. The first one hides the regular checkbox. The second one moves the label (our circles) 34 pixels from its current position when the checkbox is clicked. The last selector changes the inner circle color when clicked.

A pretty amazing change and all done with a little CSS slight-of-hand.

CSS Clearfix: Three Lines and a Breakdown

Occasionally the learning curve in web design can be gentle. Other times it’s a sharp right angle and once in a while it’s just a nasty hair-pin curve. How you perceive these curves is just that, your perception. You know, this morning you feel as sharp as a tack and late in the afternoon you feel as dull as a butter knife.

Clearing floated elements has been one of those butter knife curves for me. True confession time…it hasn’t been a gentle or sharp curve, it’s a I know it works so I haven’t devoted brain time to understand it curve. Was that out load? They say confession is good for the soul.

Let’s break it down and see why it’s necessary and why it works.

basic-code

The code above results in the page below. Two nested containers inside an outer wrapper. That outer wrapper should be 100% of the pages width, as tall as whatever it contains (height: auto), and it has a light gray background color.

Inside the wrapper are two boxes that should each be 30% of the wrappers width, 100 pixels in height, and have a phthalo green background color which is 70% opaque.

floated-divs

But there is a slight problem, the background color of the wrapper is missing. That’s because floated elements don’t follow the pages normal flow rule. They are removed to float left or float right which means the wrapper now believes it has no content. The height: auto of nothing is…nothing. No content, no background color.

The fix, or clearfix as it has been designated comes to the rescue. Three simple statements that make things right based on a pseudo class, a display property, and the clear property.

CSS has introduced many pseudo (false) classes in its last two versions :before and :after being included in that list. Both of these pseudo classes are useless without its content value. What are we inserting before or after? In the typical clearfix code the content can either be an empty string or a single space. We just need some content in our wrapper that is not floated and it will be placed after any existing content.

That leaves our display: block property-value pair. Using the rules established in the Block Formatting Context by the W3C block formatted elements will contain their floated children and cannot extend past the bottom edge of the block.

The code below shows our added clearfix and below it is the resulting web page showing the missing background color of the wrapper.

css-with-clearfix

floated-divs-with-clearfix

 

A Printer Friendly Version

“You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.”1

The endnote, if you take the time to read it, will tell you the article this references was written in 2002. Fourteen years later and we are still faced with far too many pages with a printer icon or the ubiquitous “click here for a printer friendly version”. Makes you wonder what we have learned during those years.

The ability to include a stylesheet specifically for print media has existed since CSS 1 released in 1996 and was refined with CSS 2 as a published recommendation in 1998. The <link rel=”stylesheet” href=”print.css” media=”print”> highlighted attribute can be added to a linked external stylesheet. That statement informs the browser the stylesheet is to be used when printing or when viewing the pages content in print preview.

If you would rather not create a separate stylesheet for print media there is the option of adding a @media print section to your existing stylesheet. Any specific rules for printing a page can be added to this media query block.

@media print    {

  header {

  background: none;

  color: #000;

  }

}

Using a separate print stylesheet also affords us the opportunity to use those interesting units of measure CSS offers like pt for fonts or in/cm for margins. We don’t use them because they don’t make any sense in a world of varying screen sizes. It makes consistent design improbable. The printed page on the other hand is consistent in size and is perfect for points, picas, inches, centimeters, or millimeters.

Most of the time designers for the web feel the content is only going to be viewed in a browser. The printed page isn’t a consideration. But it stands to reason if we design pages to adapt to varying screen sizes we should also take print into consideration. The printed web page needs to be addressed in this time of responsive design, usability, and accessibility.

Here are a few additional resources on the subject.

 CSS for print tutorial

6 Things I Learned About Print Stylesheets From HTML5 Boilerplate

10 Tips for Better Print Style Sheets

Tips And Tricks For Print Style Sheets

1Meyer, Eric (5/10/2002). CSS Design: Going to Print [Article]. Retrieved from http://alistapart.com/article/goingtoprint

Using a CSS Reset

One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then comes the task of modifying the site and trying to make heads or tails of the built-in CSS. Have fun! And we won’t talk about accidently removing content that hoses the database that breaks the site…Arg! But I digress. Sometimes that frustration can come from the browser itself. Did you know that your browser, user-agent, has its own stylesheet and it is first in line to style everything until you step in?

CSS reset to the rescue.

At least that is the way many people feel. Let me, the designer, decide what things should look like and you, the browser, step aside so I can do my job.

To demonstrate we will be using the first chapter of Mary Shelly’s Frankenstein and three different interpretations of a CSS reset. Here is what the page looks like as rendered by Google Chrome and its stylesheet.

screenCapture-nostylesheet

The HTML is simple and straightforward. A couple of headings and a series of paragraphs. Everything about the page, font, text color, background color, line height, heading size and weight are all set by the browser stylesheet.

frankenstein

The first reset we will use was designed by Vladimir Carrer back in 2010 and is a minimal approach to resetting the user-agent styles. It contains 5 declarations and modifies 18 elements, barely. Two of the declarations deal with tables and we aren’t using any tables.

mini-reset

The end result looks like this:

screenCapture-mini-reset

The primary things you will notice include the weight of the two headings has been returned to normal and the document margins and padding are set to zero. So little change it’s almost not noticeable. “I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.”  – Vladimir Carrer

The next reset was created by Russ Weakly back in 2010. It is a little more involved but still changes little within our document.

simple-reset

The end result looks like this:

screenCapture-simple-reset

The largest benefit to our document using this stylesheet is the elimination of margins from the top of headings and paragraphs. In essence what is left is “space-below” which makes it easier to control these elements.

The last reset we will investigate today is the shortest but involves the largest changes. It is mentioned in Jason Cranford Teague’s book CSS3. The premise is to reset the most important styles using the universal selector. It changes 10 properties on everything.

reset-simple

The end result looks like this:

screenCapture-cssreset-simple

It almost resembles a document with no tags, therefore, no styles. The thing to keep in mind here are the 10 properties that have been altered and what we want those new settings to be. A reset returns design control to our hands and that is generally what a designer wants.

This reset works well for small to mid-sized sites but can create a lot of work for large sites.

Is It Time for a New Browser?

viv_icon_256Microsoft_Edge_logo_256    logo256

 

When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to the top.

In 1994 the same people that developed Mosaic started a company named Netscape and released Netscape Navigator. Its growth was phenomenal as the popularity of the web was just taking off. Microsoft jumped on the band wagon in 1995 with Internet Explorer. During these early years Netscape dominated with as much as 90% of the market. Then and before you knew it the first browser war was being waged.

Microsoft bundled Internet Explorer with their Windows 98 operating system and said it was free which forced Netscape to stop charging for their browser. Within a matter of a couple of years the numbers were completely reversed and Internet Explorer had a 90+% market share.

Meanwhile in Norway a small browser named Opera was released in 1996. You’ve heard of it…right?

The two major players continued to battle it out when Apple decided it was time to introduce their own browser for their operating system. Safari made its debut in 2003 and was available for both Apple and Windows computers from 2007 until support for Windows was dropped in 2012.

Unfortunately neither Opera nor Safari seemed to be offering much competition to the now reigning browser, Internet Explorer. Quietly behind the scenes, Netscape had launched the Mozilla Foundation in order to introduce the open-source model to the world of browsers. It resulted in the release of Firefox in 2004. From the time of its release until its peak at about 28% in 2011 Firefox chipped away at Internet Explorer’s dominance.

Google, I assume you’ve heard of it, released Chrome in September of 2008. With chinks in its armor already showing from battling Firefox, Chrome piled on Internet Explorer as well. It probably didn’t help that Internet Explorer had been sitting on its browser duff and most web developers considered it to be a pain to work with. Oh yeah, and there were at least 4 different versions still being used.

Somewhere along in May of 2012 Chrome passed Internet Explorer as the top dog browser and as it continues to rise…Internet Explorer continues to fall.

So, the title of this article said something about a new browser. Truth be told we have several new choices.

If you have moved over to Windows 10 Internet Explorer is no longer installed by default. Microsoft’s new browser is called Edge and is a light-weight standards compliant application built on a new engine that has removed support for legacy technologies like ActiveX.

Pale Moon is an open source browser for usage on a Windows or Linux operating system.

“Pale Moon offers you a browsing experience in a browser completely built from its own, independently developed source that has been forked off from Firefox/Mozilla code, with carefully selected features and optimizations to improve the browser’s speed*, resource use, stability and user experience, while offering full customization and a growing collection of extensions and themes to make the browser truly your own.”

http://www.palemoon.org/

The newest of the new would be Vivaldi, released on April 6, 2016. Started by former Opera CEO Jon Stephenson von Tetzchner, it exists due to dissatisfaction with the direction Opera has chosen to move.

“Fast forward to 2015. The browser we once loved has changed its direction. Sadly, it is no longer serving its community of users and contributors — who helped build the browser in the first place.

So we came to a natural conclusion: we must make a new browser. A browser for ourselves and for our friends. A browser that is fast, but also a browser that is rich in functionality, highly flexible and puts the user first. A browser that is made for you.” – Jon Stephenson von Tetzchner

https://vivaldi.com

Exciting times are upon us again. Change is something we fight yet we fail to remember that change in inevitable. It was Netscape. It was Internet Explorer. It is Chrome. What’s next?

CSS3 Multiple Columns

Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along comes HTML 4.0 with its companion CSS but we still continued using tables. Why, because our browsers weren’t compliant.

It should have been easy because CSS introduced the float property. Take two div tags and float them side by side and we have the basic design concept of two columns. Eventually browsers did embrace CSS and what it offered but it still could have been easier.

Finally CSS3 has addressed the problem with a breakthrough simple solution. We now have a series of column properties that will allow us to divide our content into as many columns as we need.

Columns have been used in printing for a variety of reasons one of which is keeping text lines short enough to make reading easier. No long lines so you need your finger to trace down to the beginning of the next line. Lines of a length that we can read as a thought and not just a group of words.

That line length is generally considered to be between 65 and 90 characters. Taking that into consideration we can look at the first chapter of Mary Shelly’s Frankenstein laid out in full screen.

full-screen-width-text

The html is simple and straight forward.

chapter-one

By adding just a few lines of code to our CSS file (still using the necessary browser prefixes) we can ask the browser to flow the text into as many columns as we need.

css-column-propeties

I have chosen to set the column width property but we could also have used column-count and set its value to 2, 3, 4 or however many columns necessary.

two-column-text

In a commented area about our section settings you can see the list of CSS3 column properties. Count, gap, rule, and width are the primary choices. Column-span would allow us to span the title across multiple columns. Time will tell how much longer we need to use the browser prefixes but as long as they are included multiple columns are finally easy to implement.

Cropping Images with CSS

There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture.

Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day.

(more…)

Using CSS3 Instead of JavaScript

CSS3 has been in development since 1998, that’s right, 1998. Both CSS1 and CSS2 became standards in quick succession, December of 1996 for CSS1, and May of 1998 for CSS2. One of the main differences between CSS3 and its predecessors is the use of documents or “modules” to contain different components of the specification. Some examples would include media queries, level 3 selectors, level 3 color, and multi-column layout. These modules progress at different rates and are largely dependent on browser support.

There are two specific modules we are going to take a look at today: transforms and transitions.

Transforms can be 2D or 3D and allow you to scale, rotate, move, or skew an object.

Transitions allow you to change properties smoothly from one value to another, over a measured duration.

These two modules in combination allow us to perform basic hover effects that in the past were only doable using JavaScript. The advantage of using CSS is twofold: less code, and slightly better performance since animating a transform occurs in the GPU.

If you are concerned about browser support we have included screen captures from caniuse.com. All is well as long as your users/clients have progressed beyond IE9.

caniuse-transform

caniuse-transitions

Our demonstration will begin with a simple list that will be styled to look like a couple of sticky notes.

html-step-1

To make our sticky notes appear to be hand written we would like to use a font that looks that way, hand written. CSS3 makes that easier now because of the addition of web-fonts. For years we were stuck using the same fonts over and over again. Now it’s as easy as going to Google Fonts, selecting something from their list of over 700 fonts, clicking the quick use button, copying a link and pasting it into the head of your web page. Just use the name of the font supplied by Google in your stylesheet and you are good to go.

css-step-2

We’ll also add a drop shadow to give a sense of dimension to our notes. You’ll notice a prefix being used for this code. With 5 browsers vying for your attention and each of them progressing at a different pace they have taken to using slightly different syntax. This prefix is necessary for a given browser in order for your style to work. Eventually all browsers will use a standardized syntax, but for the time being we will include the prefix to guarantee success.

css-step-3

With some basic styles in place our page should look like this.

screen-shot-2

Now we want our sticky notes to appear randomly placed which means they shouldn’t look straight or level. That’s where transform comes into play. We’ll take each note and rotate it and use relative positioning from CSS2 to move them up or down. We are also using the CSS3 pseudo class nth-child to select which list item we are styling.

css-step-4

Our page now looks like this.

screen-shot-3

The over-all effect we are looking for is a zoomed in, straightened view of our sticky note. To accomplish this we will use the CSS2 pseudo-class hover. It will allow us to scale our note using transform and then time and smooth that transformation using transition.

css-step-5

css-step-6

(more…)

Preserving White Space Using CSS

We find it easy working with white space in today’s generation of applications. In word processing pressing the spacebar, tab key, enter, return, or even shift+ enter and what they deliver are all things we have grown to expect.

That isn’t the case when designing for the web. Some visual design programs handle basic white space issues like line breaks and paragraphs but the remainder of presentational formatting is left up to us. There is no HTML tab tag so we insert additional space characters. Without the space character (technically the non-breaking space character; &nbsp;) the browser will strip out the additional white space.

An approach that can make this easier is to use the CSS white-space property. It has 6 (six) values; normal, inherit, nowrap, pre, pre-line, and pre-wrap.

white-space-html-code

  • inherit – inherits it’s property from the parent container
  • normal – white space works as usual
  • nowrap – next will never wrap until it encounters a <br> tag, all other white space collapses as usual
  • pre – text acts like the HTML <pre> tag, formatting is as you see it, is as you type it
  • pre-line – text will collapse as usual, will break and wrap as necessary
  • pre-wrap – text is as you type it, will wrap and break as necessary

white-space-browser-full-screen

white-space-browser-full-screen-scrollbars

white-space-browser-half-screen

Browser support is full (Chrome, Firefox, Safari, Opera) as long as you are using IE 8 or later. It is part of the CSS1 specification.

10 Web Resources for Front End Developers

Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web.

Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated.

This means the tools we use and the items we refer to change constantly as well. This list of 10 web resources includes sites I have used for years, and a couple I’ve just discovered. They range from color references to HTML references to best practices. Are they perfect…no. Are they all inclusive…no. But you gotta start somewhere!

caniuse.com

caniuse

If you’re designing for the web today you’re using HTML5. And if you’re using HTML5 you are still faced with browser compatibility issues. This site is a great location to determine what features are compatible with your users most commonly used browser(s).

paletton.com

paletton

Originally known as ColorSchemeDesigner.com, paletton.com is the one tool in this list I have used and referred people to the longest. It is a great color planning and utilization site. Others have come along but it is still my go-to color scheme planner.

color.adobe.com

color-adobe

This is one of those “others have come along” sites I just mentioned. It began as kuler.adobe.com and has changed the kuler part to color (kuler is a Mauritian Creole word that means color). One of the benefits of this site are the thousands of color themes available.

HTML5 Cheat Sheet

html5-cheat-sheet

The one page, downloadable reference to HTML5 tags. It is available as a PDF file or a .png file. Grab a copy and throw it in a centrally located folder so it’s there when you need it.

typewolf.com

typewolf

If content is king, typographic characters and correct grammar are important! A great reference for those who “get it” and for those who don’t. After all, according to Oliver Reichenstein, web design is 95% typography (please feel free to discuss among yourselves).

javascripting.com

javascripting

There seems to be a never ending array of JavaScript libraries and frameworks to deal with. As this site tells us it is the “definitive source of the best JavaScript libraries, frameworks, and plugins”. Check it out and put that statement to the test.

youmightnotneedjquery.com

might-not-need-jquery

As browser compatibility improves there are times we can accomplish a lot with a little. A little JavaScript more specifically. There are times we don’t need to load an external resource to do something we can do in our own code. This site demonstrates many examples, from effects to events, proving that less can be more.

regxlib.com

reg-ex-lib

Since we were just talking about JavaScript, how ‘bout them regular expressions? Almost since day one, JavaScript has been used for form validation. IMHO it’s hard to beat the RegExp object for verifying the information supplied in a form is correct. This site has thousands of prebuilt expressions ready to use.

regular-expressions.info

regular-expressions-info

In case you didn’t get the concept I think regular expressions are powerful validation tools, here’s another resource. The last site had lots of code to use, this site has more information on the how-to part of things.

github.com/bendc/frontend-guidelines

frontline-guidelines

I mentioned best practices at the beginning of this post and this is one person’s interpretation. A series of recommendations dealing with content, presentation, and behaviors. (more…)

5 Tips for Photoshop Users

Sometimes it’s the little things that make all the difference.

Tip 1: We’ve all used the ever popular Save As to prevent messing up a photograph and not being able to go back afterward and edit out our changes. A much simpler approach to work in a non-destructive manner on an image is to create either an empty retouching layer or an image copy retouching layer. When using the empty retouching layer approach remember to check Sample All Layers in the options bar.

sample-all-layers-marked

Tip 2: To return a property window to its default settings, simply hold down the alt key (Windows) or the opt key (Mac) and the cancel button will switch to a reset button. After clicking reset, simply release the alt/opt key and it returns to cancel.

alt-key-cancel

alt-key-reset

Tip 3: There have been several times over the years where an added lens flare was that last little touch to make an image complete. The frustration arose when trying to precisely place the lens flare where it should go. The lens flare property window is often times less than cooperative with this accurate placement. The solution involves using the info panel to find the x and y coordinates where the lens flare will go, and then alt (Windows) or opt (Mac) clicking inside the lens flare panel thumbnail image to bring up the precise lens flare property window. Plug in the x and y coordinates found earlier and it now rests exactly where we wanted it.

precise-lens-flare-sized

The last two tips are for people using Photoshop for web page design.

Tip 4: Photoshop makes it increasingly easier to design for the web. Not only do we have web page size choices as part of creating a new document, but we can also use the New Guide Layout window (found in the View menu) to establish a layout grid. Number of rows, columns, column width, row height, and margins can all be assigned from within this window. You can even save your favorite grid as a preset for use over and over again.

web-most-common

new-guide-layout-sized

Tip 5: After establishing a grid to be used for your web page you can start placing images and shapes to accommodate text blocks. Once your layout is complete, let Photoshop tell you what CSS you’ll need to place each item in your page. Select the image or shape to be placed and use the layers panel menu Copy CSS command to generate CSS directly to the clipboard. This generated CSS can then be pasted into any text editor, such as Dreamweaver or Brackets. Photoshop will even generate CSS3 code for gradients, drop shadows, and rounded corners.

copy-css

paste-into-dreamweaver-sized

How to Size Fonts in CSS

One consideration most designers go through when creating content for today’s web is; should my stylesheet begin with a reset? The variety of reset options used today is fodder for a completely different discussion, but there is a subtopic I’d like to pursue.

Oftentimes a stylesheet will begin with a few very basic reset options. Simple things like setting the margins and padding in the body of the document to 0 (zero). Another is establishing the font to be used throughout the document as well as its size. The user agent (designer speak for the browser) sets the size of the font to medium, which translates to 16 pixels.

Firefox-font-settings Chrome-font-settings

The easiest way to establish this default font size setting is to set it to normal, or 100%. Most of the popular reset stylesheets do just exactly that, set the font-size to 100%.

That works well, but we might run into some issues if we decide we want to use ems as our unit of measure.

CSS offers 15 different units of measure: cm, mm, in, px, pt, pc (all absolute), em, ex, ch, rem, vw, vh, vmin, vmax and % (all relative).The absolute units of measure work well for output other than the screen, such as print. Ems work well for the screen because of their scalability. That is, until we start nesting items, such as lists.

If the font for a list is set to .8em and there happens to be nested data, the nested list uses inheritance to establish its size. That size, in our example, will be 80% of its parent. So every nested list would be 80% of the previous container. The incredible shrinking list is not exactly what we want.

compounding-screen-capture1 compounding-screen-capture2

The solution to this dilemma is to use .8rem instead. Rem as a unit of measure refers to the root element, not the parent. So each list, no matter how deeply it is nested, would be 80% of the normal font size.

This is one of those early lessons learned when you start using something other than pixels for sizing in your CSS files.

compounding-screen-capture4 compounding-screen-capture3

Typography: Part 3

In Part 1 we began with a simple classification of the different typefaces used today.

In Part 2 we took a simple look at some of the basic character components.

In Part 3 we want to make the users of Adobe products aware of a wonderful service that is available through the Creative Cloud.

Back in 2009 Jeff Veen, Bryan Mason, Ryan Carver, and Greg Veen, all originally part of the Measure Map/Google Analytics team began a company called Small Batch, Inc. Its purpose was to make font usage on the web far more accessible by introducing a product called Typekit.

Designers had been painfully aware of the limitations associated with font usage online since the webs beginning. At best there were about 14 fonts most designers could count on being installed on the average user’s computer. Did you think everyone was really that crazy about Times New Roman, Arial, or Verdana? (more…)

How To Plan a WordPress Website

wordpress-logo-stacked-rgbYou’ve decided you need a website for your business, your frequent family reunions, your… And YOU want to build it – you don’t want to pay someone. Where do you start? Here’s the frustration and fun. You search  “how to build a website” (or something similar) and the resulting possibilities are seemingly endless. Wow. Where’s the aspirin? (more…)

Typography: Part 2

In Part 1 we began with a simple classification of the different typefaces used today. We kept things simple and broke them down into 5 different groups; serif, sans-serif, monospace, handwritten, and decorative.

In Part 2 we will take a simple look at some of the basic character components. This is not an extensive listing of all the possible bits and pieces that make up a font, but rather a basic sampling of some more common terms associated with typefaces.

There are well over 100 components that can make up a character set. Several of the ones listed might even be referred to using a different term. A tiddle is also a dot, the mean line can also be called the midline. In the example below the letter g is used to demonstrate 2 components, but is made up of at least 5 including; ear, bowl, counter, link, loop, and descender.

So, while you are reading this, understand that hundreds of designers over many centuries are responsible for making your life easier, and more entertaining all due to the simple little font.

typeface-anatomy

Typography: Part 1

This will be our initial look into the world of text. All those letters that we string together to form books, online articles, blog posts, and the like.

Most mere mortals pay little attention to the how and why of assembling all those words into a form worthy of consumption.

“Typography is to literature as musical performance is to composition: an essential act of interpretation, full of endless opportunities for insight or obtuseness.” ― Robert Bringhurst, The Elements of Typographic Style

This series will begin with a simple classification of the different typefaces used today. To keep things simple I, and many others, have chosen to break them down into 5 different groups; serif, sans-serif, monospace, handwritten, and decorative.

serif_fonts

Serif

(more…)