Tuesday 30 December 2014

My 2014 Goals—Always Keep Your Hands Busy - Vanseo Design

My 2014 Goals—Always Keep Your Hands Busy - Vanseo Design

My 2014 Goals—Always Keep Your Hands Busy

Posted: 29 Dec 2014 05:30 AM PST

Happy Holidays everyone. As has become my custom, the last post I publish each year takes a look back at the goals I set for that year and whether or not I succeeded in accomplishing them. I give myself a grade and reflect on each goal to learn what I can before setting goals for the coming year.

2014 Calendar

Those of you who have been reading here awhile will be familiar with these end and start of the year posts. Today I’ll look back on 2014 and on Thursday I’ll share my goals for 2015. If you aren’t familiar with how this works, here are some looking back posts from previous years.

2014 Goals

I set eight goals for myself in 2014 and I’ll stick with the one point per goal grading I’ve used in the past. I’m not sure if it’s the best system, but it’s the one I have for now. Here’s a reminder of the goals I set for the year.

  • Increase book sale conversions
  • Think about the next version of this site and my business
  • Improve the archives page
  • Set up a deployment strategy
  • Continue with changes on this blog
  • Find a workable solution to time and task management
  • Write another book
  • Continue my exploration of color

As 2013 was ending, I wasn’t quite sure what my goals should be for 2014. I wasn’t long from finishing my first book Design Fundamentals and I was feeling a loss in focus after having focused on one thing for most of the year.

Instead of my usual setting goals to help set a direction for the year, my lack of focus led me to throw a bunch of stuff against the wall in the hopes that some would stick and I’d gain direction in the doing as opposed to the planning.

“Always keep your hands busy,” is advice passed on to me from a friend who received the same advice from his father. It’s good advice. Whenever I’m not sure what to do I throw myself into anything just to keep busy. It might be aimless at first, but a direction usually reveals itself after a time and that’s what happened.

I’m giving myself a small range of grades this year. If I’m strict with myself I earned 4.75 out of 8.00. The generous me gave myself a 5.5 out of 8.0. Neither is a particularly good grade, but overall I did come through with the direction I was seeking. Read on for the details.

Increase Book Sale Conversions

Not really, but kind of. To keep busy I tried working on several goals at once to start the year. A day of this, a couple of days of that, and finish the week with that goal over there. Trying to increase book sales was one of those several goals.

I made a few small improvements.

  • I set up Google Analytics and purchased Yoast’s eCommerce tracking plugin to track sales and tie them into the rest of the data Google collects.
  • I chose one section of the book to be a free sample, which I added to the site.
  • I added another method of payment beyond PayPal.

That’s as far as I got before Adobe was in touch asking if I’d like to write a book for them. Part of my rationale for writing CSS Animations and Transitions was to help sell Design Fundamentals.

My thought was writing a book for a traditional publisher would lend some authority to me as writer and overcome a potential objection to buying a self-published book. It’s a theory I’ll test once I rework the Books section of the site.

At the end of July and for a few weeks in August, sales increased significantly. I wasn’t sure why until I noticed more email addresses from a single university than coincidence would allow. I think Design Fundamentals was assigned reading for a course, though I don’t know for certain. Hopefully it will remain assigned reading and I’ll receive a bump in sales every time the class is offered.

Still, I can’t claim to have done anything that led to those sales. Some of the specifics I mentioned when setting this goal were to:

  • A/B test the sales page
  • Create a sales funnel around the book
  • Offer a free sample chapter
  • Market and advertise the book

The only one above I completed was the sample chapter, which I suppose is the start of a sales funnel.

The hard grader is giving me 0.0 points, since I really didn’t increase sales over the year. Aside from the temporary spike, sales are the same as the start of the year. The generous grader is giving me 0.25 points for having set up analytics and for creating the free sample chapter.

Think About the Next Version of this Site and My Business

This one I successfully completed. I’m not ready to share all of the specifics, but they’re mainly concerned with moving from a service based business to one focused on creating and selling products. I’ve been thinking about how to go about doing this all year.

For a few years I thought the transition would involve developing WordPress themes or plugins. I no longer think it will. For years I set and failed to complete goals that would follow this path. If it was something I really wanted to do, I’d be working on it already.

Instead I’ve been creating products based on my writing and see writing as the path to follow. If you’d asked me two years ago what I did for a living I’d have said I design and develop websites or something to that effect. If you ask me in two years what I do for a living, I hope to say I’m a writer who also works on websites. If you ask me now, I’m somewhere in between.

I’m giving myself 1.0 points for this goal, since I did exactly what I intended to do.

Improve the Archives Page

Nope. I don’t think I ever looked at it beyond a few cursory glances to start the year. I collected some resources to help with what I thought I would do. I had expected to go through those resources over the summer and work on the page for a few weeks, but the CSS Animations and Transitions book decided otherwise.

At some point I started thinking I’d just wait till the next redesign of the site and I forgot about this goal for the remainder of the year.

I’m giving myself 0.0 points for this goal and would give myself less if I could.

Set up a Deployment Strategy

Again nope. I can’t say I did much for this goal beyond collecting resources throughout the year. I had good intentions, but I don’t think I should experiment with one of my client’s sites. I should set this up first for one of my sites and make mistakes with my sites.

However, I didn’t work a lot on my sites this year, beyond the usual maintenance. When the time comes to either redesign this site or design a new one for myself, I’ll revisit setting up a deployment strategy.

I am mad at myself for not working on this more. It’s important to have a better deployment strategy than being a sometimes cowboy coder. I’ll blame the book again, though not having the right site to set up deployment created another obstacle I did’t overcome. Mostly the fault lies with me for not making more of an effort to get this done.

I’m giving myself 0.0 points, though the generous me wants to give myself 0.25 points. While I didn’t do anything specific, I have been doing a lot of research and paying more attention to the topic. I have a better idea what I need to do and how to go about doing it. My generosity might have more to do with the holiday season than because I deserve it where this goal is concerned.

Continue with Changes on this Blog

Yes and no. I had mentioned a few specifics for this goal such as adding the podcast to iTunes, moving the blog away from FeedBurner, and adding some screencasts to the site. I did the first, didn’t do the third, and spent some time deciding how to do the task in the middle.

As part of this goal, I wanted to increase the spontaneity of the content here. I have worked at it, mainly with the podcasts. I now start with fewer notes and improvise more while recording. The spontaneity has crossed over into my writing to some degree as well.

I also learned I could write more than I thought I could over a set amount of time. It’s something I learned while working on the book and wanting to meet every deadline. It’s helped me become a more productive writer. I exceeded what I thought was a limit and I’ve been able to increase my weekly output ever since.

Finally I’ve been keeping something of a private journal all year. I’m now looking to set up specific journals or notebooks about topics that interest me and ideally some of what goes into those notebooks will make their way into the public, whether here or on another site.

I’m giving myself 1.0 points for this goal, though the mean grader wants to deduct 0.25 points for not making any progress with screencasting.

Find a Workable Solution to Time and Task Management

Yes and more so than the usual “Yes”; I assign to this goal. Being more productive is a goal I set every year. This year I spent considerable time figuring out how I could use Things with a GTD system that incorporates creative work. I shared much of what I learned in a series of posts.

This was the year I really tried to connect the system to the actual work I do and the tools I use. I still have plenty to improve, but I think I made signifiant strides in being more productive this year.

I’m giving myself 1.0 points and would give myself more if I could. I figured out something with this goal that had eluded me in previous years.

Write Another Book

A definite yes, though not the book I expected. I mentioned trying to work several goals simultaneously at the start of the year. A book was one of them.

I began what I hope will be the first of a series of practical guides. I finished the draft for the first half of the book and had started working on the practical examples half when Adobe called asking if I wanted to write a book for them.

Within a week I had a new focus and from that point on the book dominated the rest of my year. Between May and September I didn’t think about much else. By late June I was working weekends to keep up.

I snuck in two smaller client projects to help pay the bills, but mostly it was the book. I even let the blog slide, though fortunately I was several weeks ahead when I started. I was only half a week ahead when I finished. I spent the last few months catching up on all the things I pushed to the side while working on the book

While I didn’t complete the practical guide, I have started to look over it again to remember where I was. Finishing the guide is part of one of my 2015 goals.

It may not have been the book I was thinking I would write, but I certainly wrote a book in 2014 and I’m giving myself 1.0 points for the goal. I’d give myself more if I could as I learned far more working with a publisher and professional editors than I expected and because of the increase in productivity since finishing.

Continue My Exploration of Color

Once again yes. In fairness I set this goal as something of a gimme, since I felt confident I could come up with a few color related posts during the year.

I was right. I wrote two series of posts about color this year. First was a look into different color systems back in May.

The last few weeks I presented a series about luminance.

I’ve also spent more time with color decisions on the sites I’ve designed and worked on this year as well.

I’m giving myself 1.0 points for what I learned, what I wrote, and how I worked with color when designing.

Summary

How did I do overall? There’s a slight range. On the low end I’m giving myself 4.75 points and on the high end I’m giving myself 5.5 points. Neither is great score so I’ll go with the high end just to feel a little better about myself.

If I look at my grade alone, I failed. At best I scored 68.5% which isn’t quite failing, but it is pretty close. However, I usually look beyond the score.

Looking at all eight goals, I can feel good about completing five of them and not so good about three others. That’s not too bad, especially considering the lack of focus I had to start the year and how something unexpected dominated most of my time the rest of the year.

Like I said 2014 was a year I threw some things against the wall to see what would stick. Some did, some didn’t, and I shouldn’t have expected anything else. In keeping busy I discovered a direction to follow, which is the main thing I’m after with these goals.

Happy Holidays everyone. Have a Happy New Year and let’s meet again early in 2015. How about Thursday? I’ll share what I’m hoping to accomplish in the coming year and why and you’re welcome to do the same.

Download a free sample from my book Design Fundamentals.

The post My 2014 Goals—Always Keep Your Hands Busy appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Thursday 25 December 2014

Twas the Night Before…Flat Design - Vanseo Design

Twas the Night Before…Flat Design - Vanseo Design

Twas the Night Before…Flat Design

Posted: 24 Dec 2014 10:32 PM PST

Happy Holidays All.

A few years back, 2007 to be exact, Christmas Eve coincided with one of my regularly scheduled days for a blog post. Figuring not many people would be paying attention, I decided to have a little bit of fun with the holiday poem A Visit from St. Nocholas.

Snowy tree top

That year I shared shared Twas the Night Before Google. Two years ago when day and holiday coincided once again, I reworked the poem one more time and shared Twas the Night Before Responsive.

It’s still twas the night before local time so I think I’m not too late with this year’s addition. My versions are hardly great poetry, but they are fun to write and hopefully fun to read. I hope you enjoy

Twas the night…

  before flat design, and all through the sites,  Every element was skeuomorphic, it was all play of light;  All buttons were crafted with painstaking care,  Shadows, reflections, and gradients everywhere;    The leather was stitched all tight to the screen;  Metal textured with rust would still have a sheen  Designers all over, with nary a murmur,  Had started to think about how to go further;    When out on the web a new trend all a sudden,  Showed me something different; is that a flat button?  Away on the internet, I searched so I'd know,  What is this new look without all the faux.    No bevels embossed, no depth of any kind,  Where's all the realism, there's none I can find.  I see dots, shapes, and lines and plenty of space;  Color, type, and hierarchy, oh yeah, this is great.    With a flatness to guide me I quickly changed gears,  I'll remove detail from my site and everyone will cheer.  Rushing to my desk and soon opening Coda,  I connected to my site and reached for a soda.    Now Bootstrap! Now Gumby! Now Flatby and Pure!  On Foundation! On Bootflat! On UI kits galore!  Let's do this quickly; let's do this in haste,  Pass me that framework there's no time to waste.    A bookshelf gone here, torn paper removed there,  The depth has gone away, though I've no idea where.  Get rid of the grunge and the candy so lickable,  Seriously, why did we think a website was edible?    Then in a flash and for everyone to see,  I had to look again, my eyes weren't deceived;  Is that really be Microsoft taking the lead?  Indeed it was Microsoft, Indeed, oh indeed.    Windows 8 there it was, grids end to end,  And colors and space, disbelief must suspend;  With all that we knew about design until now,  How could it be Redmond that was showing us how?    Detail and dimension removed from the fold,  We all stopped to think that our sites must look old.  Strip out the watercolor, push pins and tabs,  paper clips, sticky notes and all the price tags.    With so much removed what will we add?  Simple shapes, solid icons, our designs we will clad,  Large clickable buttons no one knows to click,  And it'll all lay on top of a large background pic.    My palette now filled with desaturated color,  My canvas is becoming ever so paler.  Go big, go bigger, there's no in-between  Big giant type all over my screen,    I spoke not a word as I worked a design,  The return to basics was feeling sublime;  But out of the corner my eye caught a vision,  What's that moving over there? How did it transition?    Depth will return, I promise you that,  some buttons already are not quite so flat.  It's just a trend I say as I turn out the light,  A new trend for all, and to all a good night!

Merry Christmas and Happy Holidays!

Download a free sample from my book Design Fundamentals.

The post Twas the Night Before…
Flat Design appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday 23 December 2014

Learn More About Color By Working In Grayscale - Vanseo Design

Learn More About Color By Working In Grayscale - Vanseo Design

Learn More About Color By Working In Grayscale

Posted: 22 Dec 2014 05:30 AM PST

Do you find color difficult to work with? Do you have trouble combining colors in a color scheme? Would you believe me if I told you one way to learn to work with color is to remove the color information?


title

For the last few weeks we’ve been looking at the luminance component of color. First I talked about what luminance is and why it’s so important. Then I showed how to calculate a luminance value from RGB as well as the contrast ratio between colors. The combination can then be compared to accessibility guidelines.

Today I want to talk about a few things that didn’t quite fit into either of those posts. I want to consider the contribution of luminance to depth and then talk about working without chrominance information.

Spatial Acuity, Light, and Depth

At the start of the series I talked about cones and rods and how our rods, which are sensitive to light, don’t have a good sense of spatial acuity.

However, using light alone we can create a sense of depth on an otherwise flat plane. Adding enough contrast in luminance or the play of light over the object will create a sense of the 3-dimensional in a composition.

True we’re in the midst of a flat design trend, but depth will come back. It already is and it never really left. It won’t be to the same extent that it was with us in skeuomorphic realism. It will come back, but more subtle than before.

On the other hand when contrasting colors are created with similar luminosity the reverse occurs. If the luminance values between colors are too close they’ll flatten when compared to each other. Add enough contrast and the objects will begin to separate in space. It helps some elements come forward and gain notice while others recede into the background.

If you’re thinking about the relationship between figure and ground, give yourself a gold start or a pat on the back. It’s important that we separate figure and ground in any composition. Contrast in light and dark is one way we can.

Usually the lighter color will be seen as background, but it doesn’t have to be. The important part is that both are seen occupying different locations along the z-axis.

The contrast between light and dark can also add a great deal of drama to a composition. We’ll get to this momentarily.

Equiluminance

When objects of different color, contain the equal amounts of luminance (equiluminance), our eyes have difficulty perceiving the edges of the objects. Low levels of contrast flatten elements. Equal levels can cause other problems.

Due to the difficulty determining the position of equiluminant objects in space, the objects may appear to shift positions taking turns being closer and further away.

Because of this shifting in space, equiluminant colors can lead to a sense of motion and make a composition appear unstable.

Aspects of Color—Light and Dark

As I mentioned earlier in the series there are several aspects of color we can contrast with light and dark being one.

In western cultures, lighter tends to be seen as good and is typically associated with positive feelings. Darker tends to be associated with negative feelings, though they also add drama, mood, and tension to a composition. Darker colors can also substitute for neutrals at times.

Typically when contrasting light and dark you want to choose one as dominant and use the contrast of the other for accents.

Remember that light is seen in the context of an environment so think about when and where visitors will be looking at your site. There’s a reason people often prefer lighter color schemes during the day and in the presence of a lot of light and prefer darker color schemes and night when light is low.

Black and White Photography

Have you ever wondered why black and white photography is so popular? I know I have. I thought maybe it was some kind of retro thing, but after working on this series, I realize there’s another reason.

We are more sensitive to light so even the color images we look at are influencing us through light and dark more than anything else. Black and white removes the color information and communicates through luminance.

If anything this series is convincing me to shoot more and more in black and white to help me learn about light and contrast and harmony in luminance. Learning about light in isolation from color will build a stronger foundation for understanding hue and saturation when you add them back in.

Chiaroscuro

Similar to black and white photography, artists have been practicing with a technique called chiaroscuro for centuries. Chiaroscuro plays up the effect of light through the contrast between light and dark. It’s working without color, but it generates a great amount of dramatic effect.

Caravaggio often worked worked with chiaroscuro. His work features very dark backgrounds that hide much of the detail of the environment in order to shine a light on his subject. His work is somber, moody, and very dramatic.

Working with chiaroscuro will get you to push the envelope. You’ll make darker values darker and lighter ones lighter, increasing the contrast and dramatic effect.

Working with Grayscale

Hopefully I’ve convinced you that working in grayscale is a good way to learn more about color. When we remove chrominance information and we’re left with luminance or brightness or lightness, we’re on a scale from black to white with gray at all points in between.

Years ago when I was first attempting to work with color I often started color schemes entirely in grayscale. Once I felt good about the contrast between elements, I would play around with the hex values and increase of decrease the red, green, and blue components of the values.

For example if I was working with a light gray, say #cccccc, I might increase the red component while decreasing the green and blue resulting in #ddaaaa. I’d continue to adjust and refine until I ended up with something like #d59487.

I’m not sure it’s the best way to work, but I did gain more of an appreciation for luminance and contrast and I did learn to manipulate hex and rgb() values.

I hadn’t realized it at the time, but I was doing something similar to an exercise recommended by Joseph Albers. He recommended studying gradation through gray scale steps, the softer and more equal the steps, the more valuable.

Practicing with grayscale is a good way to start learning about color and once you gain an understanding of grayscale you can work with a single hue and again play around only with the light and dark of the color. You move from grayscale to monotone and eventually bring other hues into the mix.

Another way to make use of grayscale is to convert your design into grayscale. You can get an image of any page online as it would look in grayscale at GrayBit. It makes for a good check on the contrast in your color scheme.

As I was collecting information for this post Tom Osborne of Viget was running a series on how he chooses color schemes. I’ll leave you to read the series. It’s an interesting walkthrough for how Tom chooses colors at Viget. He starts in grayscale and builds a color wheel specific to a project. It’s an interesting and worthwhile read that I highly recommend.

Luminance Series From NASA and Ron Bigelow

Speaking of series, there were a couple more I came across while working on this series of post you’re reading. Instead of picking and choosing posts in each to link to, I thought I would just present them together.

First is a series of posts from NASA on working with luminance. It comes across as something of accessibility guidelines for NASA.

Next is a series by Ron Bieglow about perception, color, and luminosity. It’s a series I’ve come across before and may have linked to some of it previously. Here it is in its entirety.

Closing Thoughts

I covered a lot in this series and I know I threw a lot of math at you, that you’ll likely never use. Hopefully it helped make things clearer in regards to luminance and color as well as sorting out the differences in HSL, HSB, and HSV.

Because of the way our eyes work, luminance is the most important part of working with color and it’s the key to accessibility.

You can convert the hex and rgb colors you typically work with to grayscale to find their luminance and then compare luminance values to determine if enough contrast is present. More likely we’ll skip the math and head straight for a tool that does all the work.

I’ve found it can be helpful to work in grayscale at times and when you consider the history of art and design, I wouldn’t be the only one. Working only with light information is a good way to learn not only about light and dark, but about how to combine colors into schemes for use in a design.

The holidays are now upon us. Later in the week, I have something resembling a holiday poem for you. Next week, while many of us are taking a little extra time off, I’ll fill you in on how successful I was or wasn’t in completing my 2014 goals before setting new goals for 2015.

Download a free sample from my book Design Fundamentals.

The post Learn More About Color By Working In Grayscale appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday 19 December 2014

Thoughts About HTML5 Structural Elements - Vanseo Design

Thoughts About HTML5 Structural Elements - Vanseo Design

Thoughts About HTML5 Structural Elements

Posted: 18 Dec 2014 05:30 AM PST

Do you use the new HTML5 structural elements like header, aside, article, and footer? If so, do you do use them because of the added semantics they carry?


Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes

I started thinking about structural elements after reading a post by Jeremy Keith. One of Jeremy’s readers asked how he could convince colleagues to use the HTML5 structural tags. You can read Jeremy’s post for the details of his response.

The gist is not to agonize over using the new tags, though don’t be lazy and always settle for divs either. Sometimes the extra effort in deciding something should be an article instead of a div isn’t worth the time. Sometimes it is.

Jeremy talked about using h1-h6 headings and lists and paragraphs and how they help assistive technologies like screen readers. He said semantics are particularly beneficial with forms so you should use the right elements. However, these aren’t the new structural elements I’m talking about.

Reading the post made me think. A little more than three years ago I wrote a post about the new structural elements and their semantics. I even created a demo putting them to use. At the time I was very excited to use them in practice. I used them when I built this site and client sites of the time include them as well.

Fast forward to today and I rarely end up using them. I have to remind myself or they aren’t making it into my code. I’ve mostly gone back to using HTML like <div class="header"> instead of using <header>. It wasn’t so much a conscious choice to go back to my old ways. It happened little by little until I stopped using the new tags. I want to spend some time today thinking out loud about why that us.

Support for the new elements is great. Pretty much everything other than IE8 and below supports them. The main element isn’t supported everywhere, but the rest are. Browser support is not the reason I avoid the tags.

How Important is Semantic HTML?

I can already hear the arguments about the importance of semantics and no matter what I now say, someone will tell me how wrong I am. Welcome to the internet. The reason for semantic HTML is that it can communicate an extra layer of information to anyone or anything listening.

As far as rendering the page is concerned it doesn’t make a difference if you code something as an aside or as a div with a class of sidebar. The semantics won’t change how the page can be displayed in browsers. It only makes a difference to anything out there (human or machine) that’s understands the extra layer of communication and is going to do something with it

The natural question is who or what out there is currently listening and taking some meaning from the semantics of the structural tags? Do they make a difference to screen readers? Do search engines read them? Feed readers? Anyone?

I assume where screen readers are concerned they do, though I haven’t found anything concrete to confirm one way or the other. Does <header> communicate more to a screen reader than something like role=masthead? Is there a difference. Do screen readers understand both? One? Which?

If you know please leave a comment.

Based on what I could find, I don’t think much of anything is taking anything from the semantics of the structural tags. It always seems to be one of those things that will happen in a future that never comes.

I do think it makes sense to prepare for the future. Skate to where the puck is going and not where it is. Still, is it worth the extra effort if little or nothing is gleaning anything extra from the semantics? Maybe screen readers are more than I think and I apologize if they do. I should probably know, but I don’t.

Building Websites

Elements like divs and articles and spans and HTML elements in general are containers. You create a div, article, section and you put stuff inside it.

To build a site the semantics aren’t necessary. What I care about structurally are things like whether the element behaves as a block level element, an inline element, or both. I’ll want to know if it’s floated or positioned in some way.

I need to know those things so I can fit all the blocks together. In many ways building a website is like building a jigsaw puzzle, except you can change the size of the pieces to make them fit.

Whether you use a div, article, aside, section, doesn’t really matter. All can be made to behave the same way and can be located where you want and look how you want. None of the elements are limiting what you can do with them.

Any element that needs styling beyond its default will likely get a class. Styling the div element is usually too generic so I’ll usually add a class to any that needs styling or I’ll hook into an attribute inside the tag.

I suppose if one element becomes an article instead of div it’s more specific, because there will likely be fewer of them, but it’s still rather generic and I’m probably going to add a class before styling

The structural elements aren’t really making it easier to develop. I don’t see where header makes things easier than .header

None of this is meant to take away importance of semantics. The idea is that semantics aren’t needed structurally. My website doesn’t care about them. Your website doesn’t either. They display and render and work regardless of our use of articles over divs or divs over asides.

Who’s Actually Listening to Semantics?

One of the reasons I see mentioned in favor of semantics is they can make the structure and presentation of a site easier to understand when looking at the code.

I can’t say I find that to be true. Maybe it’s different for you, but for me I just want to see the structure and be able to find the CSS used on the element. I don’t particularly care what specific tag or class was used as long as I can match the structure to the presentation.

Usually when we’re talking about the semantics of code, it’s for machines that might read the code. It would seem choice in semantics should come down to who’s listening, what they can hear, what they understand, and what they’ll do with the information.

Add that up and decide if the effort is worth it. Will it help your site in some way? Will it help visitors navigate or consume content? Is it worth the effort or is your time better spent elsewhere?

I don’t know. When I try to search to find answers about who or what might be reading the semantics, I don’t find anything. Maybe I’m just searching in the wrong places. Mostly I see people talking about how important this will be in the future, but I don’t see much mentioned about anything listening now.

Future proofing is a valid argument, but I think of things like Microformats. We’ve been hearing how we should use them for years. Are they really in use? On some sites maybe. They never really gained traction from what I can tell. Why should this be any different?

How about search engines. They back schema.org. I can’t say I’ve looked through ever page on the schema.org site, but I haven’t found any mention of HTML5 structural tags or their semantics. Mostly I see a lot of extra stuff we should use to mark up content.

How about marking up an article? It seems like a logical place to include an article tag. Nope. Not a single mention on the schema.org page on articles. Check the example code at the bottom of the page (the microdata tab). I don’t see any article elements. I do see lots of divs and spans though.

I’m not saying we should get our coding practices from search engines, but Google and Bing and Yahoo and all the rest should be who we’re adding the semantics for. However, it doesn’t seem like any of them are listening for those semantics. So who are we writing the semantics for?

I come back to screen readers. ARIA includes the concept of an article with <div role="article">. Are screen readers dropping support for ARIA roles in favor of the new tags? Probably not. Are they also supporting <article>? Again, I couldn’t find confirmation one way or the other, though I assume they will if they aren’t yet.

Even as I’m saying all this it sounds wrong. It sounds wrong to think we shouldn’t use the new structural elements. I like the concept behind them and their reason for existing. I can envision a time when they are being read, but is that time now?

There’s Too Much Confusion, I Can’t Get No Relief

Honestly I think the main reason I stopped using the new structural elements is because I find them confusing to work with. They shouldn’t be that hard. They sound easy in theory but I find theyget confusing in practice.

For example to me there’s a single header and single footer on the page not however many you want. Every section is supposed to include header and footer according to the spec. Really? Seems a bit like overkill.

The section element is for thematically related content. What does that really mean? Every word in this article is thematically related. Does that mean using a section is better than using a article?

In fairness an article is supposed to be a special type of section where what’s inside is self contained content that can moved somewhere else and still make sense.

Does that mean this whole post is an article and each section in the article is a section? Sound good. The words match. I’ve definitely written sections within articles that could stand alone independent of everything else in the article, though. Are they articles inside articles?

Based on what I learned previously I wrapped each blog post on the main page of this blog in an article tag. The five most recent posts are each inside an <article></article>. Each has a title, some meta information, the first paragraph of the article, a link to read more, tags, and a category.

Are those small bits really independent? Could you remove one and have it make sense elsewhere? Technically maybe yes, but I don’t think so in all cases. It removes the continuity and context of specifically being here.

The main element is meant to replace something like div class=”main-content” Apparently if you have an article on the page it should be wrapped with a main tag. Isn’t that redundant? Isn’t that just adding a tag that’s unnecessary? If an <article> is already enclosing the main content does it also need to be wrapped inside a <main> element?

The nav element seems simple enough. It’s clearly for navigation, but not all navigation. It’s only for major navigation. Is a section menu major navigation or minor navigation? How about a set of utility links?

A lot of these questions probably don’t matter. In time it will come down to designers using the tags and standardizing their use through consistency.

In the spec the W3C offers an example. It contains two sidebars. One is structured as <section id="sidebar1"> and the other is structured as an <aside>. Why the difference? Without an explanation it adds to the confusion.

When I see examples like this it’s not clear to me why a certain element was used over another. It’s confusing when there’s no clear way to use the elements. Most examples, particularly those from W3C and people involved with spec tend to confuse me more than help me. There are explanations, but then a different explanation for something that seems to be the exact same thing.

It seems like there’s too much overlap in when you could use a section, aside, or article. I question then whether these elements are communicating consistently if we’re not using them consistently or using them at all.

I think part of the problem is that the people who write the specs like to change the accepted meaning of things. We all refer to something as one thing and they change the meaning for some technical reason. Too often the names they give things makes understanding those things more difficult, not less.

In the end I choose divs because I can make the decision quick and move on. I just want to know how the element behaves so I can control it through CSS.

Whenever I try to incorporate the new structural elements I have to stop everything and try to sort out any confusion. It’s one thing to build a site for me and another to build a client’s site. I have more time with my site.

It can take considerable time to use the new elements. It’s not necessarily time consuming to choose one element, but to figure out how all the elements will fit into the structure of your HTML can take a significant amount of time. Until I’m less confused and have more assurance something is reading the semantics I keep falling back to divs.

Closing Thoughts

Please don’t take anything here as me saying I don’t think we should ever use the new structural elements. It’s not exactly difficult to replace <div class="header"> with <header>. It’s just a matter of making it routine.

It makes sense to have our tags communicate more, even if no one is listening just yet. They probably will in the future. At least I hope so. The short history of the semantics on the web suggests otherwise, though.

Despite thinking they make sense I find that unless I force myself to use them they aren’t going to find their way into most of the sites I develop. There will be an aside here and an article there, but I don’t quite see myself using them all that frequently given everything I’ve said here.

Right now they’re an extra layer of communication, except that no one is listening to that communication. And perhaps the inconsistent way we might use them means they aren’t communicating the same thing from site to site (assuming something is out there paying attention to the semantics).

One positive outcome of dumping all these thoughts here is that it’s made me want to investigate a little more. Maybe after New Year’s I’ll take a more in-depth look at the tags and what they mean and especially how to use them.

I wouldn’t mind taking a look at structured data in general and include some more thoughts about Schema.org along the way. No promises, but my guess is I will take that in-depth look before long.

Download a free sample from my book Design Fundamentals.

The post Thoughts About HTML5 Structural Elements appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday 16 December 2014

The Effect Of Luminance and Contrast Ratio On Accessibility - Vanseo Design

The Effect Of Luminance and Contrast Ratio On Accessibility - Vanseo Design

The Effect Of Luminance and Contrast Ratio On Accessibility

Posted: 15 Dec 2014 05:30 AM PST

You know it’s important to contrast text with it’s background. Black text on a white background offers the most contrast. Light gray text on a light gray background, not so much. What exactly are you contrasting and how do you know when the contrast is enough?

title
Light shining through the window creates a great amount of contrast in the image.

Last week I began a look at the luminance component of color. I mentioned the way the rods and cones in our eyes work and that it means we’re more sensitive to light and dark than we are to hue and saturation.

We're better at seeing the relative differences between objects than their absolute values

Our sensitivity to light means the contrast in luminance between two colors is the most important part of being able to distinguish them. It also means luminance is an important part of accessibility. That’s where I’d like to pick things up today.

We’re better at seeing the relative differences between objects than their absolute values. There are all sorts of things we can contrast where color is concerned. Contrast in light and dark is the most effective, but we can also contrast other aspects of color such as:

  • Complementary colors (opposites on color wheel)
  • Temperature (cool/cold and warm/hot colors)
  • Saturation (pale and bright colors)

Contrast in luminance is the most effective, given our sensitivity to light and this is where we’ll focus our attention today. Before we can work with luminance contrast we need to answer two questions.

  • How can we determine the luminance of any color?
  • How much luminance contrast is necessary between colors?

How To Determine the Luminance of a Color

We want to be able to take a color with a known hex or rgb value and calculate how much luminance it has. Last week I mentioned that different hues have a natural luminance and that both hue and saturation affect luminance values.

That tells us that each of the three color components (red, green, blue) contribute to the overall luminance, but in different amounts. In other words

  • L = (X × R) + (Y × G) + (Z × B)

where L is luminance and R, G, and B are the red, green, and blue components of the color. X, Y, and Z are all constants. The question is what values of X, Y, and Z we should use to determine the contribution of each component to the overall luminance value?

There are several different possibilities and if I’m understanding correctly those differences come from the color space being used and whether or not there’s any gamma correction. Ultimately I came across three different versions of the formula.

  • L = (0.2126 × R) + (0.7152 × G) + (0.0722 × B)
  • L = 0.3 × R + 0.59 × G + 0.11 × B
  • L = sqrt(0.241 × R2 + 0.691 × G2 + 0.068 × B2)

The first is the formula if you’re working in either the RGB or sRGB color space. The latter two formulas take gamma correction into account and both result in a perceived luminance. The difference between the two is mainly the last formula takes a little longer to calculate.

Let’s try some numbers. Say you have a color #2ddd2a (45, 221, 42), which is a bright green. Each of the RGB components is out of a total of 255 so&hellp;

  • 45 ÷ 255 = 0.1765 (red)
  • 221 ÷ 255 = 0.8667 (green)
  • 42 ÷ 255 = 0.1647 (blue)

Plugging these values into the luminance formulas gives us

  • L = (0.2126 × 0.1765) + (0.7152 × 0.8667) + (0.0722 × 0.1647) = 0.6693
  • L = (0.3 × 0.1765) + (0.59 × 0.8667) + (0.11 × 0.1647) = 0.5824
  • L = sqrt( .241 × 0.1765 ^2 + .691 × 0.8667 ^2 + .068 × 0.16472 ) = 0.6075

Hopefully I’ve done the math right. You can see all three values are close, if not exact. Rounding errors could account for some of the difference, but clearly the formulas don’t lead to the exact same result.

From what I’ve gathered the first formula is the most accurate when working in either RGB or sRGB color spaces. The middle formula is generally good enough and seems to be the one many people use. A few swear by the last formula.

I’ll use the middle formula for the remainder of this post, simply because it has fewer significant digits to calculate.

There are a couple of things to notice in all the formulas. The constants used to determine the contribution of each color component must add up to 1.0.

Also note that in each formula green contributes the most luminance and blue contributes the least. Or green is brighter than red is brighter than blue.

Contrast Ratio—How Much Contrast is Enough?

That answers one question. We have one left. Given the luminance values of two different colors how much should they contrast?

To answer, we first have to calculate the contrast ratio (CR) and then see what’s considered acceptable. The Web Content Accessibility Guidelines offers the following formula for the calculation.

  • CR = (L1 + 0.05) / (L2 + 0.05)

L1 is the relative luminance of the lighter of the colors and L2 is the relative luminance of the darker of the colors. Remember it’s lighter divided darker. I didn’t find a reason for the 0.05 constants, but I suspect it’s to prevent division by zero in the case where the darker color is #000 or rgb(0,0,0).

Let’s try an example and see what we come up with. Again, I’ll stick to the easiest of the three formulas and to save a little math I’ll use the luminance of the green from above as one of the values.

  • L = (0.3 × 0.3333) + (0.59 × 0.8667) + (0.11 × 0.1647) = 0.5824

Let’s contrast it with a dark red rgb(133,0,0)

  • L = (0.3 × 0.5216) + (0.59 × 0) + (0.11 × 0) = 0.1565

Plugging both values into the contrast formula leads to

  • CR = (0.5824 + 0.05) ÷ (0.1565 + 0.05) = 3.062

Now we know the contrast ratio between the red and green I’ve selected. Is it acceptable? Is there enough contrast? It depends on whether you’re after AA or AAA compliance and it also depends on the size of the text.

  • Level AA (regular sized text) requires a minimum ratio of 4.5:1
  • Level AA (large sized text) requires a minimum ratio of 3:1
  • Level AAA (regular sized text) requires a minimum ratio of 7:1
  • Level AAA (large sized text) requires a minimum ratio of 4.5:1

Large text is defined as being at least 18 point or 14 point bold text, however, there are exceptions. If a font is too thin or has unusual characteristics which make it harder to read, large might need to be larger than 18pt or 14pt bold.

The two colors I chose (bright green and dark red) would barely work for AA compliance if the text is large enough. Otherwise there isn’t enough contrast. In theory if one of these colors is the background, the other could be used as a heading that displays larger than 18pt.

Tools

You might be thinking, “I don’t want to do all that math every time I’m choosing a color scheme.” I’m with you. Fortunately neither of us has to.

I wanted to present the math to help both of us understand how all this stuff works, but there are tools that will do the math for us. With most, you add a color or two or three and the tool will let you know the contrast ratio.

Here’s a list of tools I found while researching for this post. You can find plenty more via your favorite search engine if these aren’t enough.

I don’t know that any one of the above is better than the others. It probably doesn’t matter and your choice likely comes down to personal taste. You should probably try to have more contrast than the minimum needed anyway, which would cover any differences between the tools above or any other you might decide to use.

Closing Thoughts

The luminance of a given color is its most important aspect when it comes to us seeing the details. For two colors to be easily distinguishable you want enough contrast in luminance between them.

You have three similar, albeit, different formulas to calculate the luminance of any specific color set with hexadecimal or RGB() values. All three will lead to similar, though different results.

Once you’ve calculated the luminance values for two different colors you can compare the luminance and see if there’s enough contrast between them. You can then turn to the Web Content Accessibility Guidelines (WCAG) 2.0 for how much contrast is acceptable.

Or you can find a tool and plug in your colors and let the tool do all the math. I’m sure most of us will prefer to use tools over the calculations. Still, it’s always good idea to understand where the tools you use came up with their calculations.

I have more more post in this series about luminance. I want to talk about working in grayscale and how luminance or a lack of it can contribute to our perception of depth. Well get to both next week.

Download a free sample from my book Design Fundamentals.

The post The Effect Of Luminance and Contrast Ratio On Accessibility appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday 12 December 2014

Your Design Skills Could Lift Humanity To New Heights - Vanseo Design

Your Design Skills Could Lift Humanity To New Heights - Vanseo Design

Your Design Skills Could Lift Humanity To New Heights

Posted: 11 Dec 2014 05:30 AM PST

If we all have the capability to solve problems, to communicate to others, and to make decisions toward a goal, it seems we all have the ability to design. What then, does it mean to be a designer?


Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes

A couple of months ago, I asked similar questions. I asked what does it mean to be a designer and whether or not we were all designers by virtue of being human. I also asked if there was something more needed to call yourself a designer.

The post was shared on Twitter for a week or so and drove some traffic this way. It also generated some good comments and they led me to think more about the topic. I want to thank everyone who commented. Thank you.

I thought I’d continue the discussion today with a few new thoughts and questions. I’ll lean on the comments from the older post throughout. I want to expand on the conversation with something I think is empowering to all of us, designer and non-designer alike. I think there’s a suggestion in all of this, that any of us has it within to lift all of humanity through our normal daily actions.

Everyone Can Design

Instead of reading through all the comments (again thank you for commenting), I pulled some words and phrases from them that can be used to distinguish between anyone designing and someone who is specifically a designer.

  • Awareness
  • Intention
  • Making good design decisions
  • The care you put into it the work

A designer is someone who sees design. For example if you’re looking at a menu in a restaurant and thinking about the way the type was set and whether the typeface was a good choice or the measure is the right length, then you see the world through the context of design.

The comments were unanimous about skill level playing a role. Everyone, myself included, thought much about being a designer has to do with how well you design and whether or not your skills are above some minimum level of quality.

That does raise the question of where the quality line is and who gets to decide where the distinction is between designing because you’re human and designing because you’re a designer.

I think the conclusion we all came to was that everyone might be a designer, but in the end it’s more a question of how well you design than whether or not you give yourself the title of designer. I was asking the wrong question.

It’s all Scale and Matter of Degree

The consensus was it’s a matter of degree. That everyone probably does have it within them to design, but not everyone is a designer. We’re all at some point on a scale where one end is 0% design skills and at the other end is 100% design skills.

We’re all somewhere on the scale by virtue of being human, but the important question isn’t whether we’re on the scale, but rather where on it are we. I’ve talked before about everything being on a scale and not being an absolute. Why this should be any different and why I didn’t think of it originally is beyond me. For some reason I tried to force the question into a yes or no issue.

I suppose every profession, every skill, every ability works in the same way. Everyone is somewhere on a scale as to how much skill and ability they have and somewhere on that scale is a point where you move from amateur to professional.

It also means if one human being can do something, we’re all capable. Being human puts all of us somewhere on all of these scales. With each scale, most of us will never reach the level of talent or skill to make us a professional or to create what others would consider as good, but we’re on the scale somewhere.

If someone asked me today if I could perform surgery, I would say I couldn’t, to the obvious relief of the patient. But given the right conditions, the right teaching and practice and effort and interest on my part, it’s possible I could have been a surgeon had I dedicated my life to it for a reasonable amount of time.

I can’t know the result of that possibility, because I didn’t put in the time or effort (For the record I think I would have made a lousy surgeon, but who knows). Fortunately I know enough not to try to perform surgery now.

Still, if someone out there can, it means all of us have the potential to do the same. We can all improve on whatever level of skill we have to the point were we move beyond the minimum level of quality needed.

Aside: I found it interesting that no one talked about money as a measure of being a designer or of the quality of your design. I didn’t think of the question in terms of money and I’m glad to see no one else did either. It wouldn’t have surprised me if someone said you’re a designer because you make $X annually or something to that effect, but I’m glad no one did.

We Can All Lift Humanity

Everything above suggests that in theory any and all of us is born with the potential to be anything we want. We all have it in us to be designers, surgeons, entertainers, or whatever else we want to be. If we put in the time and effort to get better we can move above those points on the scale.

There are obvious exceptions and we learn quickly there some things we’re now likely to do well because of some limitation real or imagined.

For example I’m not the largest or strongest person on the planet. I didn’t need a firm grasp on reality to realize my chances of being a professional athlete were not good. I’m athletic, but I’m simply not big enough to compete on the professional level. Others my size have made it, though they certainly had to work harder to get there. They were faster or possessed a specialized skills that I also lack.

Exceptions aside, if one of us can do something, it’s proof the rest of us have the same capability within us. If one of us can do it then in theory so can the rest.

It also suggests none of us is inherently better than anyone else. We’re all capable of doing the same things. Most of us won’t, but we’re all capable given the right conditions and effort on our part.

Some, perhaps never get the right opportunity. Say I was the right size for a career as an athlete. My parents views on sports good or bad could easily have increased or decreased my odds of making it. Someone wanting to be a doctor might not have the means to go college let alone med school.

There’s a suggestion in this idea of “what one of us can do we can all do.” It’s the suggestion that when anyone reaches his or her best at something it elevates the rest of us. The best of one shows the rest of us what’s possible, what we’re capable of achieving. It elevates humanity by removing what we think are natural limits and expanding on what’s possible.

Forgive another baseball reference. I’ve been watching the game for a long time, long enough to see some patterns. When I was a kid I’d see someone make a spectacular play that defied belief. Maybe it was diving for a ball seemingly out of reach or leaping above the outfield wall to rob the batter of a home run.

Those extraordinary plays are often now somewhat routine. Once seen others were able to copy and improve upon the play. It took someone with the imagination to show everyone else it could be done. Having done something once it removed the self-imposing limitations others placed on themselves. It allowed everyone to believe in something new. It’s the same in all sports.

I don’t know if you’ve ever watched the X-Games, but it’s the spirit of the games. Everyone is pushing their sport. They all want to win, but I know of no other sport (I know the X-Games aren’t a single sport, but stick with me) where the competitors are as happy for each other and rooting for each other to do well. Winning is less important than pushing the sport to new levels.

Perhaps I’m stretching things a bit and the competitors want to win more than I think, but watch an interview with someone who loses out on a medal at the X-Games and compare it to the loser in another sport. There’s a huge difference.

In being your best you elevate humanity. You strive to do something better than all who came before. It lifts all of us because it shows everyone a new way. It shows others that what was thought impossible is actually possible.

Closing Thoughts

In my earlier post on this topic I think we all decided that it’s not a matter of simply being a designer, it’s a matter of how well you design. I asked the wrong question previously.

It’s not about whether everyone is a designer, but rather about increasing your skills, developing a critical eye, developing aesthetic taste, and everything else you do to improve your design skills.

These things take time and before anyone embarks on learning them, they probably weren’t good designers. There are exceptions, of course, but for most of us, we don’t design well at the start. We learn and practice and get better. Maybe not everyone is a designer, but we’re all capable.

The same is true of everything. While there are always exceptions, if one us can do it, so can the rest of us. The ability is within us. It’s all a matter of degree.

That’s empowering to me. It means we can all lift each other by doing our best at whatever it is we do. Our best can push our industry into new territory and in doing so lift both the industry and all of humanity.

For example a few years ago Ethan Marcotte (and those he worked with) combined some existing technologies into what has become responsive design. They did their best and showed us a new possibility. Ethan lifted the industry by taking it somewhere new. How many sites today won’t be responsive. Someone did their best and lifted the rest of us.

I’ve asked in the past if design is a noble profession and if today’s web designers have a conceptual core as an industry. I now think everything can be a noble profession. You get to noble status by striving to do your best, by going beyond the expected and showing others what can be done and what’s possible. Even if you don’t quite get there yourself you can point the way.

It’s a very empowering thought. I’m no longer sure it matters whether or not everyone is a designer or a if everyone is capable of being a surgeon or an accountant, or copywriter, or whatever.

What’s important is doing what you do as best as possible. Show others the way. Show them new possibilities. You may not get there, but you can help others get there and in so doing you lift your profession as well as all of humanity.

Download a free sample from my book Design Fundamentals.

The post Your Design Skills Could Lift Humanity To New Heights appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Subscribe to: Posts (Atom)