Friday Favorites 2/19/2016 – late start

Okay, so Friday, Sunday… last week was pretty wacky for me. And I have nothing to show for it. 🙂 In other words, in my weekly review with my manager (me…) I had to say that while I did a lot of work last week, I can’t really show anything as completed. One client I had was having huge website issues that needed to be solved by their host. And their host wants them to either “optimize” their site (but they don’t say what they mean by that) or upgrade to a more expensive plan. Another client I just completely failed by getting confused by email and thinking that I had until Thursday when they needed it completed by Wednesday. I was working on the site on Wednesday when he called to ask what the status was. I replied confidently, “I’ll definitely be done on time.” Thinking “I should be done in about 2 hours! Phew! 20 hours ahead of time!” And he replies “Great, I’ll tell the team you’ll be done in 30 minutes!” “Wait, What?”

. . .

Error in RWD code

In LISTING 18.3 “CSS for a Responsive Form” (page 257) I include a position for the label of an input box to hide it from view. But the position values I used would cause the browser to create massive scrollbars both vertical and horizontal.

The incorrect CSS is:

label.inputbox {
  position: absolute;
  top: 9999px;
  left: 9999px;

This is easily corrected by positioning the top and left styles negative 9999px each.

label.inputbox {
  position: absolute;
  top: -9999px;
  left: -9999px;


The 5 Key Design Ingredients

When you are starting out to design a web page it can be tempting to simply slap ideas on paper or the screen and hope they come together into a coherent whole. But there are five key ingredients to all design projects. Once you understand these design ingredients, you will understand how they go together to create a beautiful design that meets your goals for the site. The five key ingredients are color, shape, texture, space, and flow.

Color is the Best Known Design Ingredient

additive color mixing
Additive color mixing.

There are millions of colors. Color is a design ingredient that can seem easy to use, but is really very difficult, because there are so many different ways to use it. Color theory is a way of organizing colors so that they make sense visually and are thus more appealing. The above image is of the RGB (Red-Green-Blue) color model. This is the additive color model that CSS and computer colors are based on. They are colors of light, rather than pigment. When the primary colors are mixed together they create the secondary colors cyan, magenta, and yellow.

Because of the way colors are represented in hexadecimal it is fairly easy to see the additive colors in action.

Hexadecimal colors are written with a pound-sign (#) followed by three numbers in hexadecimal (base 16).

Red is #ff0000 The first value (ff) indicates 100% red light, while the second two values (00  and 00) indicate zero green and zero blue light.

Green is #00ff00 The first value (00) indicates zero red light,  the second value (ff) indicates 100% green light, and the last value (00) indicates zero blue light.

Blue is #0000ff The first two values (00  and 00) indicate zero red and zero green light, while the third value (ff) indicates 100% blue light.

When you combine red and green you get yellow, and in Hex colors that is represented as #ffff00 Combine red and blue to get magenta, which is represented as #ff00ff  And combine blue and green to get cyan which is #00ffff in hexadecimal color codes.

Adobe Color CC
Adobe Color CC generating a palette from an image

There are other ways to represent color in web design. You can see a list of CSS color codes in the References section on this site. But to find out what colors go best with one another, you should use an online color palette maker. I have used tools like Paletton and Color Schemer Online, but I really like the Adobe Color CC because it gives you so many ways to find a color scheme.

You can generate a color scheme from a photo, as pictured left. But you can also use the color wheel and color rules to create analogous, monochromatic, triad, complementary, compound, shades, and even custom color schemes. When I’m working on a color scheme, I might take a photo I like and start with that color scheme and then work with it within the color wheel portion to find exactly the combination of colors I want to use. In fact I rarely use the first set of colors that any palette generator suggests, but Adobe’s tool makes it very easy to modify and find the perfect set.

Shape is the Design Ingredient that Defines the Layout

Everything is made up of shapes. On this page, there are the circles that make up the additive color mixing image above, the rectangles and squares of the images and the blocks of text, even the multi-sided shapes the logo makes. Shapes are a defined two-dimensional area that stands out as a separate entity. The easiest way to see the shapes of your design is to step back and squint your eyes a little. Once the text becomes blurry and hard to read, you can better see the shapes that make up the entire page.

This is why many design prototyping tools use shapes to define the layout rather than blocks of text or images. It’s also easy to use pen and paper to draw quick prototypes with shapes. You can block out your layout with the shapes you want to convey and then the text and image content will fill those shapes to fill your design.

But shapes can more more than your layout. The image of the sun at the top of this page is a stylized image using just shapes and colors to create a picture we recognize as the sun. You should also consider shape when you’re looking at your web typography. Consider the shape of the text when it comes to orphans, such as single words or short lines below a wrapped image. In fact, in writing this post, I considered the possibility of an orphan line when I was placing the images. I didn’t want just a few words to dangle below the pictures, as that would be hard to read and would take away from the rest of the page’s design.

Texture is More Than Just Tactile

Texture is visual as well as tactile
These zebras make excellent texture

Most people think texture can only be something that is felt–the rough feel of sandpaper, the silkiness of satin, the soft fur of a baby kitten. But texture in visual design either gives the sense of something that can be touched, like the rough grain on a board of wood, or it creates visual interest that suggests a roughness. The zebras pictured above make a visual texture with their stripes connecting and co-mingling.

In web design texture adds visual interest to the pages. You can add texture as background images behind text blocks or the entire page. One popular texture technique is to add faint pinstripes to the background. This helps the page feel more dynamic than flat color would.

Space or Form Defines the Dimensions of the Design

The Veil Nebula
The Veil Nebula

Space and form are design ingredients that can be difficult to define on web pages. They convey a sense of two- and three-dimensional space to two-dimensional web pages. These are illusions, but these illusions provide depth to a design and give them more visual interest.

While web pages are two dimensional, there are things you can do with the design of your pages to make them appear to have three dimensions. The simplest thing is to overlap elements. Using background images, with text above, immediately suggests depth. When drawing or painting, artists use shading and highlights to suggest three dimensions. A web designer can do it with CSS adding shadows and glowing highlights on elements. But even simple things like the size of an element on the page can convey a sense of space or form. Smaller items appear to be further away, while larger items appear closer. This is especially true when small items are near the top of the design while larger items fill the bottom portion.

Flow Defines a Sense of Movement in a Design

Water flows downhill

Flow is another design ingredient that can be difficult to see on static web pages. Flow is the sense of motion through a design. It relies on the way people read web pages and how their eyes track the contents. People read web pages in a standard order. If the language they are reading is left to right, like English, they tend to start at the top left corner, track across to the right, then slid diagonally down to about the middle of the screen, and then back right. Right to left language web pages tend to have a similar shape to the eye tracking, just starting at the upper right and tracking left.

A web designer can do things to affect that flow through the page by placing elements that stop the eye and elements that draw the eye on further. Some tricks you can apply to keep people moving through your pages include:

  • Look at your photos–where are the people (or animals) looking? People like to look at what other people are looking at, so make sure people in your photos are looking at the content you want your customers to look at.
  • Arrows may seem obvious, but they are great for increasing the flow of the design. It is possible to use arrows to point people at exactly what you want your audience to look at.
  • Lines block flow. This includes borders around boxes. If you must have borders and lines, and they are an important shape, make sure that they act like arrows and draw the eye to the next part of the design. Follow the line in the direction of your text to see where your audience will end up.

Consider the Design Ingredients Before You Design Your Pages

It’s perfectly acceptable to continue to design your pages however you’re comfortable. But consider the design ingredients you may be using without realizing it. Once you have a sense of the elements of design you can make better choices about what your design needs to be better.

Friday Favorites 2/12/2016 – Typography Edition

This week I’ve been doing a lot of writing about typography. Which has resulted in my looking at a lot of websites and articles about typography. I have known that CSS supported OpenType font features for a while, but I hadn’t really tested it much, until now. Check out this image:

custom ligatures in opentype fonts
An example of how CSS supports font-features. View it for yourself

It is nice text with fancy typesetting, but since it’s in an image it’s not that exciting, right? But check out the site live in your browser. Unless you’re using a very old browser, you should see the image I display above. Bu then highlight the text. It’s selectable! It’s just text! Search engine robots can read it, Assistive technology can read it without alt-text. This is so exciting!

I found this on the Font Deck blog from four years ago. Yes, that’s how long CSS has had the ability to do this. Why aren’t more sites using it? Typography can be beautiful.

What is your favorite design ingredient?

Hi My name is Jennifer and I am addicted to fonts.

I regularly have to delete fonts from my computer because I have so many that it fills up my hard drive and slows the computer itself. And I know I’m not the only one with this addiction as I have friends and relatives who send me links to cool fonts they’ve found or show me interesting artwork they’ve created using the latest swoosh or dingbat. I’m even in the process of creating my own font from my Dad’s handwriting. I’ve got a basic version of it already created, but there are still some issues.

How are you doing, JennBenn?
Still some issues with the font, but it’s my Dad’s handwriting.

I love fonts. I have created website designs based on a font. I have made books because I found a font so appealing I had to use it in something. Fonts are my design addiction.

But there are so many different aspects of design that can be addicting. I have friends who are addicted to color. I had a friend who had a list of color names that she would add to whenever she learned of another color. She could distinguish colors that I would swear had no difference at all–and she’d be right. I have another friend who is addicted to patterns. She creates patterns all the time and they are very creative. In fact, she’s developed an entire business centered around her patterns.

What design ingredients do you like to use the best? Are there any you hate using?

[poll id=”14″]

Why Do You Like That Ingredient?

Share your thoughts in the comments below.

Typography Tips for Web Designers

Traditional designers have known for centuries the importance of typography in design. But web designers were stuck using boring default fonts with automated line heights and tracking that often made even the most well-crafted pages look amateurish when compared to print designs.

Initially, web designers had no way to change the fonts–they were controlled by the web browser. Then the <font>  tag was added, quickly followed by some limited CSS styles like: font-size , font-weight, font-style, and a few others. But finally, it is possible to do true typography with CSS, adjusting leading and tracking, using kerning and font features, plus changing the font families and the look of the fonts. In many ways, typography is finally coming into its own in web design.

The following tips will help you add effective typography to your web designs using modern CSS styles that work right now.

Basic Typography–Change the Font Family

Google Fonts
Google Fonts give you a lot of options

The first thing you should consider when working on your web typography is the font family that you’re using. Most designers know how to use a font stack to tell the browsers the font families to use in priority order. You just list them in your CSS like this:

body {
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;

This method relies on your customers having the fonts you want installed, with fallback options if they don’t have your first choice. But most non-designers don’t have more than the default fonts their computer came with, so they aren’t going to have fonts that cost money like Helvetica Neue, no matter how nice it is. That means that your website is always going to have sub-par typography for the majority of people who view it.

The solution to this is to use embedded web fonts. You can host your own web fonts that you’ve either purchased or gotten from a free site like Font Squirrel. Or you can use online web font repositories like Google Fonts or Adobe Typekit. Online fonts are the easiest way to get custom typography because you generally just need to add one line to your HTML like this:

<link href=',latin-ext' rel='stylesheet' type='text/css'>

This is a link to the Google Font Alegreya Sans. Then, to use it on web pages you add it to your style sheets the same way you would any other font:

body {
  font-family: 'Alegreya Sans', sans-serif;

The advantage of web fonts is that as long as your customers are connected to the Internet, they will get the fonts you intend. But they can increase the download time of your pages, so don’t use more than one or two fonts on a page.

Spacing Typography with Leading, Tracking, and Kerning

Hand Set Leading
Notice the lead between the lines of text – that is Leading.

CSS has had the line-height  property for years, and this lets you do some simple leading adjustments. The line height designation is slightly different from leading. Leading was the process typesetters used of placing thin lead bars between the lines of type to separate them and change the way the text was read. Lead is generally added either above or below the line of text. The CSS line-height property, on the other had, splits the value and puts half above the line of text and half below. This can result in designs looking wrong if you are expecting the  line-height  property to be exactly like leading.

Web designers also often make the mistake of assuming that the  line-height  property must have a unit. In other words, they always write line-height: 12px;  with the “px” at the end. But while this is allowed, it makes your designs very inflexible. If a customer views a site and changes the font size in their browser in some way, there is a risk that the line height will not scale properly. It is better to use values that are relative to the font size, either with unit-less values such as  line-height: 2.1;  or percentages like  line-height: 120%; .

But you can also affect the space of the letters on each line with two different CSS styles: letter-spacing  and word-spacing . Like line-height  and leading, these style properties are not an exact analog of the typography tool tracking, but they give you some control over the legibility of lines of text. Unlike  the line-height  property, these properties should be given specific length values like letter-spacing:1px;  or word-spacing: -0.05em; . These values are added or subtracted from the current space between the letters or words. Be very cautious when using negative values, as these can quickly run the letters and words together in an illegible mass.

Kerning is something that most web designers have forgotten about. Those designers who did care would kern their fonts in image programs and then display the text as a picture. But this is no longer necessary with the CSS font-kerning  style property working in all modern browsers except Internet Explorer and Edge.

Font kerning is the spacing that is set within the typeface itself. It is a way of ensuring that the letters look evenly spaced by adjusting the spacing between certain letters. For example, if you look at the two capital letter forms A and V. When they are placed next to each other–AV–they can appear to be further apart than other letters in the same font family if the font is not well-kerned. However, browsers can turn off kerning in fonts, if the font size is too small. And sometimes you might not want kerning to be applied at all. In this case, you can use the font-kerning property to make your fonts kern exactly as you wish them to. The values are font-kerning: auto;, font-kerning: normal;, and font-kerning: none;. The default is “auto” and this lets the browser decide when kerning should be applied. When you choose “normal” you are turning kerning on in all situations. And “none” turns kerning off.

This is Just the Tip of the Typography Iceberg

Comparing glyph styles

CSS has got a lot more typography in it than it did ten years ago. So you shouldn’t be limiting your typography to just font families and spacing. You can affect the smoothness of your fonts with the font-smooth  property. You can add OpenType features with the font-feature-settings  property. If you use East Asian languages on your website, you can finally do better text emphasis with the text-emphasis  property. You can also decorate the text with shadows (text-shadow ) and strokes (text-stroke ).

Do any of these seem interesting to you? I’d love to know what you want to learn about. Drop me a line or post a note in the comments. What kind of CSS typography do you want to know more about?

Friday Favorites: 2/5/2016 – Infomagical

Getting Infomagical

Infomagical Website
The InfoMagical site

This week was an interesting week for me. I spent a lot less time than I usually do online. Why? Because I was participating in an experiment on reducing information overload called Infomagical. It was a series of five challenges, one per day, designed to attempt to help us focus our minds into something magical. My focus was on creativity. And creativity for me means writing and web design. And I did a lot more of that in this one week than I have in the last oh twelve months? Okay, that’s an exaggeration, but I did get so much more done and felt more energized and excited and, dare I say it?, creative!

There were five challenges as I said. They were:


The idea here was that we should focus completely on whatever task you have in front of you and not try to multi-task. As you end up switching between the two tasks and that just doesn’t work.

I found that this was very difficult in some ways and ridiculously easy in other ways. It was difficult because I’m so used to trying to do two, three, even five things at once. It was hard to pare it down to just one. For instance, I like to listen to podcasts while I’m writing or preparing to write. But what I noticed after single-tasking was that I don’t get nearly as much out of the podcasts I listen to when I’m trying to write at the same time. It was much easier to write in silence, not trying to focus on anything else. And I got my word count goals done so much faster than usual! Then I had time to really listen to the podcasts.

And in really listening to some of them I realized that there are a number of podcasts that I really don’t like or don’t need to listen to. Which brings me to the second challenge:


The Infomagical team mentioned Marie Kondo, and I must admit, while I bought her book, I couldn’t finish it. She just struck me as a little too nuts. I do roll my shirts and pants in my drawers now however. So on this day, I was prepared for resistance since they had the idea that we should de-clutter our information world as well. But I decided that I could try it out and if I didn’t like it, well, I could go back to my old method. So the first thing I did was move almost all my apps into a single folder on my iPad desktop. While I was moving them, I deleted a bunch, like nearly half, of the apps I had on the device. This may not seem like a big deal until you realize that I have a 64GB iPad and it was nearly two-thirds full, mostly apps. I was worried that it would be hard to find the apps I use a lot in one giant folder, but then I realized after a little while that I already was in the habit of swiping right and searching for the apps by typing. I left the two apps I used the most often in the gray bar at the bottom of the screen.

Later on someone pointed out that you can use Siri to open apps. “Open DayOne” opens my journaling app and “Open Facebook” opens the time-sucking vortex. So I moved the two apps I use all the time into the folder (no, neither of them were Facebook). Then I realized that I was still distracted by the tiny colors in the folder screen, so I rearranged the folder to have the 16 blandest icons in the front. My only criteria was their color–white, gray, and maybe black, no reds or blues to distract me. But even that was somewhat distracting. So I pushed the entire folder to the second screen. Now my iPad is a beautiful picture of a dragon ornament and nothing else. I wish I could get rid of the gray bar at the bottom, but no big deal.

iPad desktop
My iPad desktop today.

The other key to this challenge was turning off all badges. You know, those are the little numbers that appear at the top right of an app icon letting you know that “something has happened” in that app that it wants you to deal with. My experience is that 99.999999% of the time those numbers are either something you already know (yes, I know I have 800 late items on my to-do list, thanks Omnifocus) or something you really don’t care that much about (really? you want me to stand up and cheer because no podcasts needed updating, Downcast???). Turning off all the badges–and yes, Apple doesn’t make this easy, you have to do them each one by one, app by app–was a huge stress reliever off my mind. I have been known to get frantic at seeing a badge on Netflix, but when you open the app nothing seems different! What’s the badge for? And don’t get me started on Facetime badges that never go away even when you’ve opened it and dealt with every phone call or message you’ve received from right now back to the 1900s. Poof! Now I have no badges. Nothing nags me in that way. Yes, I still get notifications. My phone still buzzes when I get a text message and my iPad still lets me know that there was an update on that Kickstarter campaign. But now it’s not obnoxious about it. If I want to know, I just swipe down. Otherwise, I stay focused on my day.

What’s especially cool about this method is that it makes using my iPad a lot more deliberate. I have to think about what I want to do before I just mindlessly swipe through a bunch of apps. And often that deliberation makes me realize “hey! I don’t really want to go into the time-sucking vortex right now. I’d rather write/read/draw/walk.” And I close the iPad (or not) and do something that ends up being much more fulfilling in the long run.

Focus on What’s Important

The third challenge seemed like a tough one to me at first. The goal was to only consume information that took me forward in my goal of being more creative. So no binge watching Netflix, no random scrolling Facebook. Instead, I was to ask myself if what I was about to read/do was in service to my creativity or not. And if it wasn’t I was to avoid it.

No cat pictures? Impossible!

But really, this was the easiest, and most satisfying day of all five for me. I got more done on this one day than I really thought possible. And everything went more quickly than I expected. Because I wasn’t spending time on things that weren’t furthering my creative goal and I wasn’t being interrupted by stupid things, I was really productive.

Make a Connection

Day four the challenge was to have a conversation, not a chat or email, but a phone call or in-person talk with someone for at least seven minutes about something I’d learned this week. This was challenging because I work from home, and I don’t think they meant chat with my dogs. I couldn’t decide who I wanted to talk to, and part of that was the realization that the people I wanted to talk to were either at work and couldn’t talk, in another time zone and so busy, or not answering their phone.

I did finally get through to someone, and we talked for almost 30 minutes while I waited in line to pick up my son from school. We mostly talked about de-cluttering because I’m so pleased with how my iPad is back to being a tool and not just a time suck.

Pick a Long-term Information Goal or Mantra

This challenge has been harder for me, as I don’t really know what I want my long-term goal to be. Having a general goal of “Be more creative” seems too broad. And yet the idea that I should just boil it down to “45 on 15 off*” seems a bit too pat. I did find a video this week that I enjoyed and seems to encompass my desires for creative work and focus. See below to watch it.

I’m going to keep thinking about this one for a day or two and see if I can come up with something that really speaks to me. But I might only do it in the 15 minutes goof off time I have each hour. Or maybe I’ll just go watch Poirot on Netflix while I think about it…. Hmmmmm

*By “45 on 15 off” I mean that I want to spend at least 45 minutes of every hour I’m in front of a screen doing “work” or something creative, and the other 15 minutes can be spent on “fun” like Netflix or Facebook or whatever.

My Mantra for Now…


Have you taken any design classes?

Sorry this is late today, I had a crisis with a client which upped the adrenaline levels and then the migraine that resulted made it hard to see the screen for a while. 🙂 But everything is good now.

This week I’ve been thinking a lot about learning design. When I first started out as a web developer I didn’t have any formal design knowledge. I hadn’t taken any design classes. I focused primarily on building websites and applications that helped solve a problem. I was much more worried that the things I built worked, than whether they looked pretty. As I worked I realized that sometimes the look of the page or application was affecting whether it worked. For example, sometimes the position of a button would affect whether the customers would see it and click on it. I also noticed that colors impacted the usage of applications. I think I fell completely into the design rabbit hole when I started playing with typography and discovered that even the choice of font and how tight or loose the text was affected site usability. And that whole process I did without taking a single design class.

Imagine my dismay when I walked into a design class and learned that everything I’d painstakingly figured out over years of development work was already well known by designers.

Design Classes are Useful

An apple a day...
Design courses don’t have to be in an actual school setting.

They can teach you things much more quickly than most of us can learn through trial and error. Plus you get the benefit of your instructor’s knowledge and the enthusiasm and assistance of your classmates. It’s easy to think that you don’t need a design class because you already know what you like to look at on web pages. But by learning formal design rules you’ll know when your design is breaking them and why. And you’ll be able to make a case for breaking those rules. But the real reason it’s useful to take a design class is because you’ll probably learn something that will improve your designs today, without any split tests or customer complaints.

Have You Taken any Design Classes?

If you have, did you find them of value? why or why not? If you haven’t, are you considering taking a design class? What kinds of classes appeal most to you? Do you like formal, in-person classes or informal, online courses you do at your own pace?

[poll id=13]

10 Web Design Trends You Should Learn in 2016

It’s amazing to me how far we have come in web design. When I first started, the web was all text, all black and white (or green and black), and links were the most exciting new trend. And that was only in 1995! Now there are so many ways to view web pages, so many things you can do in a web application, so many features you need to think about it can get overwhelming. But these ten web design trends should help you get your sites going in 2016.

1. Responsive Web Design is here to stay.

Sams Teach Yourself Responsive Web Design in 24 Hours
Sams Teach Yourself Responsive Web Design in 24 Hours

These days it’s hard to know what someone is going to be viewing your site on. There are watches with only 272×340 pixels of visible space. And there are 4K UHD monitors with 3840×2160 pixels of visible space. I personally have both a 4K monitor and an Apple Watch that I use every day.

As a web designer, I cannot assume that the devices I use are the ones that my readers use. I also cannot assume that my customers’ devices are not smaller or larger than the ones I design on. So I have to design responsively so that my applications and pages work and look good no matter where they are viewed.

Blatant self-promotion: you can learn RWD from me with my book Sams Teach Yourself Responsive Web Design in 24 Hours.

2. Content should tell a story.

What you put on your web pages is what drives customers to view them, so content will always be critical. But the style of that content is changing.

It used to be enough that a website state just the facts, with pictures and videos to support those facts. But as more and more web pages come out it’s becoming more important to tell a story. You want people engaged in your content. Show that there are people behind the corporate facade.

3. Single-page cards are gaining in popularity.

With the advent of Material Design, more and more websites and web applications are applying the concept of “cards” to their designs. Cards are a way of modularizing the content and design so that the pages can display well on a small screen or a large one.

Most people think of cards in the form of single page blocks on cellphones. But you can create a card based design on a large screen and include many cards on the screen at once.

A good example of this is Pinterest. Pinterest pins are each a little card that includes the picture, a title, and other details about the pin. On a large monitor I might see as many as 20 pins on the screen at once, while on a small screen I just see one or two.

You can also design cards that are intended to be the only thing on the page at any given time. The key to designing cards is to keep them simple, use one nice image, use a simple, clear font, and don’t forget icons.

4. You should learn web typography.

typography - web design trends
Typography is more than just fonts, but web fonts are a great place to start.

If you’re not familiar with typography, then you should first focus on web fonts. Find a nice, readable web font for your pages and stick to that for the entire site. Don’t stick with tired font families like Arial and Times New Roman. There are many options you can find on both Adobe Typekit and Google Fonts. Don’t be afraid of web fonts.

Once you’ve got a good understanding of web fonts and how to use them, you can move on to more advanced typography. Consider the line height and word spacing of your text. Learn how to use fonts as icons and icon fonts. Don’t forget about things like straight quotes versus curly and hyphenation. If you use WordPress there is a nice plugin that can help you improve the typography of your site—WP-Typography.

5. Imagery is changing to more illustration, less photography.

In 2015 we saw a lot of sites move to beautiful background photos that took up the entire screen. But 2016 will see a bit of push back into more illustrations and sketches. Pictures that look like or are drawings will gain traction.

If you aren’t an artist, this might seem daunting. After all, there are lots of free photography sites to choose from (my favorite is Pixabay), but what about illustrations and drawings? The good news is that most sites, including Pixabay, that have photos also have illustrations.

But you’ll have to be pickier in your choices. It’s very easy to fall into a trap of grabbing images that are mostly clip art and cartoony, and that might be worse than just staying with photos. I would recommend that if you don’t do your own drawings, and can’t afford to pay someone to do them for you that you ignore this trend. You will notice that my site continues to use photos.

6. Sketches might be hard to find, but there are lots of hand-drawn icons.

icons will get bigger in 2016
I found these icons on Pixabay.

Icons are a place where you can update your site to use more current trends, and get that hand-drawn or sketched look. Mind you, most of the good sets I’ve found do cost money, but they don’t cost a lot. I found one set that includes a hand drawn font as well as over 800 hand drawn icons for only $29—Hand Drawn Icons.

But beyond images, consider fonts when you’re thinking of icons. There are a lot of icon fonts that you can get for free. The most well known is Font Awesome, but it doesn’t have that hand drawn look. For hand drawn, I found a small set of 36 icons in the Jolly Icons Free Font.

7. Web pages will be more interactive.

Interactivity, especially small cards of interactivity, will be more and more common on web pages in 2016. Contact forms will be self-contained and when customers fill them out, they won’t leave the page, but just that card will change to indicate their interaction.

Interactivity is getting more and more important as the line between mobile and desktop blurs. And as that line blurs the line between what makes a web page an app and what makes an app a web page will blur as well. People expect their mobile devices to help them do things, and that is true of the apps and sites they visit on them too.

8. Videos will gain even more in popularity.

cat on video
Inline videos and background videos are all going to be important web design trends.

If you don’t have videos on your site right now, 2016 might be the year to consider them. I did my first professional video in 2015 (shameless self-promotion #2: HTML and CSS LiveLessons) and I’m working on a second video course right now. I’m hoping to get an RWD video series out in 2016 as well.

I must admit, I am late to the video bandwagon. I’ve struggled with the idea that videos are useful, as most of the time I am faster at reading through something than watching the video. But then I watched some videos on using Git. Git was something I’d heard of but hadn’t used. My brother felt I was making a huge mistake in not knowing Git, but every book and website I’d picked up had left me cold. I finally watched a video series because I had nothing else available. Now I use Git for nearly every project. It’s already saved my work several times. And I would not have gotten interested in it without the video tutorials to show me how.

So I am a convert. I do believe that videos are going to grow in popularity and usefulness and websites should consider them.

9. Don’t forget animation.

CSS animation is a fun way to get some visual effects and movement on your pages, especially if you don’t have the time to create a full video. And CSS animations don’t have to be big and flashy. In fact, tiny animations are going to be more and more popular. This includes simple animated transitions to move elements on and off your page as well as full animated icons and text. And since you can do this with CSS, that makes it even better.

10. Colors are going to get brighter in 2016.

vibrant colors - a web design trend
Vibrant colors is one of the web design trends I am looking forward to.

Monochromatic themes have been popular for a long time, but muted tones and colors are going out in favor of brighter, more vibrant colors. Material design uses a lot of flat colors in a creative way, and 2016 seems to be a year of more interesting colors.

What do you think are the biggest web design trends in 2016?

Do I have it right? Are these web design trends things you’re going to be thinking about this year? Or are you working on something completely different?

Please post your thoughts in the comments below. And if you’ve tried to comment before and gotten the name and address required error message, well, that’s been resolved. Sorry about that!