Friday, December 19, 2014

Color Theory: How many colors should one use?



It doesn't take an eagle eye to spot the differences between the two illustrations above. One is colored with blue and the other is full color. So, which one is better? Which one is right? That's not an easy question to answer.

Color has been a part of art since the first work of art was created. Throughout history, its use has largely been dictated by the technology. Oil painters were limited to whatever colors they could make and mix with the materials they could find. Printers were limited to whatever colors their presses could produce, first just black and then slowly adding more and more colors until full color was feasible.

Today artists have more options available than ever. With that blessing comes a curse--too many colors to choose from. It's caused many artists to become lazy. During times when color is limited, one has to think and design much more carefully about how to render the work. This extra thought and effort shows thru and is one reason why old illustrations hold up so well. But when every color under the rainbow is available, some people are like kids in a candy shop and make themselves sick eating too much (and the viewer as well).

The advantage of the first illustration with a monochromatic scheme (blue plus black and white so technically there are three colors) is its simplicity. It's easier to read and communicates more clearly, because there are fewer colors to distract the viewer. Also, black and white art has the advantage of being visual text in that people can more easily read it like they read black and white text. That's one reason the black and white daily comic strips in newspapers are so effective, they clearly communicate the concept. The disadvantage is it isn't as pretty and therefore not as eye catching. It requires more effort from the viewer to notice and appreciate. Of course, that usually leads to a higher caliber of viewer.

The advantage of the second is it is prettier and attracts more attention. The disadvantage is there is so much going on that the message isn't as clear. Sometimes that isn't a problem when the message is a feeling or emotion conveyed largely thru the colors.

To decide which color scheme you should use, you need to first determine the purpose of the art work and who you want to see it. (You should probably consider how the final product will be delivered as technology will dictate your options, but you should consider that at the beginning when initially conceptualizing the work.)

Monday, December 15, 2014

2014 Christmas Card


Merry Christmas from Jeff!

Each year I create a Christmas card and send it out to family and friends. Then I started adding it to my website. And now I share it on my blog and social media.

This year's card was inspired by the dressed up shop windows that lined a town's main street stores. The beginning of A Christmas Story is probably most people's experience considering how everything has gone to shopping malls, discount stores, and online shopping.

He-Man and the Masters of the Universe were some of my favorite toys growing up, so I had to include them in this year's card.

Enjoy!

Friday, December 12, 2014

The Auction preview 2

Below are a few more days' worth of a new webcomic, Wandering Koala outbids The Auction, now appearing daily at WanderingKoalaStrikes.blogspot.com. Be sure to go there and check it out!








Thursday, December 4, 2014

Preview of a new Web Comic

Below are the first four days of a new webcomic, Wandering Koala outbids The Auction, now appearing daily at WanderingKoalaStrikes.blogspot.com. Be sure to go there and check it out!





Saturday, November 29, 2014

A New Web Comic is coming!


It's been a little quite on this blog, hasn't it? You know what that usually means--a big new project is coming. And this time it features a certain Silent Wanderer(TM). Starting Monday you can read the new webcomic at WanderingKoalaStrikes.blogspot.com with a few appearances here.


Stay Tuned!

Friday, October 31, 2014

How to Format a Website for Mobile Devices (like the iPhone) using HTML 5 and CSS


Have you ever worked really hard to created a really cool website that looks great on a browser and large tablet PC only to view it on a mobile device (like a Smartphone) and have it nearly impossible to read? Me, too. But what is one to do? Create a whole separate website just for phones and try and reroute traffic? And what happens when something new comes up like a Retina display? Create a third site?

History


Someone came up with a really cool solution that is known today as Responsive Design. You can read the original article (according to Wikipedia, but I wouldn't be surprised if someone else stumbled upon this earlier) by Cameron Adams in 2004 at http://www.themaninblue.com/writing/perspective/2004/09/21/. You'll notice he called it Resolution Dependent Layout. I used to design websites with the same mindset that they reshape themselves to whatever size starting in 2002, but we didn't have the cool CSS tools, the large bandwidth, or the wide browser support we do today. I called my approach Organic HTML, which I still think is the best name. Feel free to spread it around and see if it catches on.

Approaches


There are a lot of different approaches that one can take. There are also hundreds of different devices and screen sizes one has to consider. One school of thought is to create a separate site for each screen size. But this becomes a nightmare to update.

My approach is to basically design your site so it works well for larger screens (desktops, laptops, and large tablets) and small screens (phones and small tablets) and use Cascading Style Sheets to create a different layout for each. You may be saying to yourself, "But i want to customize my site to look just so on every device." Yeah, there are too many devices--your code will be so bulky it won't load right and your sanity will have checked out long before you get halfway thru the list.

There are two important subjects to consider. First is the code to make the site behave how you want. The other is designing the site to look good and to be easily read and navigated. Both must be skillfully executed to successfully create a site that adapts to different devices. This post will cover the code aspects. A later post will cover design considerations.

It is also important to note, that this approach works best with what is wrongly called html5 and modern browsers, i.e. Mozilla Firefox 3.5+, Google Chrome 2+, Apple Safari 3.1+, and recent versions of mobile browsers. Versions of Microsoft Internet Explorer before 9 were NOT designed to properly render html5, CSS 3, or other techniques. While these browsers make up around 10% of the market, they are still significant enough to consider. You may need to add IE specific code to correct rendering errors of an html5 approach.

Code


Below are some tricks and techniques you can use to code your site to adapt to different screen sizes.
  1. Set the iPhone Retina (or other mobile device with high density display) to view the site as a mobile device with a low resolution display and not a desktop even though you have the pixels to do so.
    1. Add the following tag inside the <head> tags: 
    2. Set the min-width of either the <body> or the <div> containing the site to around 800. This isn't essential but will help you control how your site appears on smaller screens.
  2. iPhone Home Screen Icon
    1. Create a 57 x 57 png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
    2. Call it apple-touch-icon.png
    3. Place it in the root directory of your website. This will be the default icon for your site if someone wants to save it on their home screen like it was an app.
    4. iPad Home Screen Icon
      1. Create a 75 x 75 png. 
      2. Call it touch-icon-ipad.png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
      3. Place it in the root directory of your website.
      4. Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76">
    5. iPhone Retina Display Home Screen Icon
      1. Create a 120 x 120 png. 
      2. Call it touch-icon-iphone-retina.png
      3. Place it in the root directory of your website. This will be the default icon for your site if someone wants to save it on their home screen like it was an app.
      4. Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120">
    6. iPad Home Screen Icon
      1. Create a 152 x 152 png. 
      2. Call it touch-icon-ipad-retina.png
      3. Place it in the root directory of your website. This will be the default icon for your site if someone wants to save it on their home screen like it was an app.
      4. Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">
    7. Fonts
      1. In the Style Sheets, set the fonts using ems, NOT pixels or points. Ems will allow the fonts to scale as the size of the website changes. 1 em is a good default for text meant to be read.
      2. Caution: If you set multiple rules, the effect will multiply. For example, if you set the font-size of 1.2 ems for elements in a <div>, and then set 1.2 ems for an specific element inside the <div>, it will be 1.2 times larger than the 1.2 of the <div>, i.e. larger than you were expecting.
    8. Images
      1. Set the Width and Height of images to 100%. Set a max-height and max-width to the size in pixels you want the image to appear on a desktop at full screen. This will allow the images to scale smaller.
    9. Layouts
      1. While <table> provides the most robust and consistent layout framework, it won't work with Responsive Design, so you'll have to use <div> and CSS-P techniques to layout your site. But you've probably been doing this for years.
      2. Use percentages and NOT pixel sizes to set width and height. This will allow the design to adapt more freely. Pixel sizes are good for max-width and max-height (or min-width and min-height).
    10. CSS branching
      1. Write your CSS code like you would normally for a desktop browser.
      2. At the bottom add @media screen and (max-width: 980px) { } (or use a different pixel size for the max-width) and write a new set of CSS code in side the brackets for the specific elements (NOT all elements) that need to change for the smaller screen. For example, if you have three columns in your site, you may want to reduce them to one; use smaller images; enlarge text; set certain elements to disappear with the display: none; style attribute.
    11. Test your site on several devices. Depending on the design of your site and the audience, you'll want to adjust the numbers and settings until it appears just right on your site. The above is just to get you started. Modern browsers allow you to drag the corner of the browser and resize it to give you a rough idea of how it will appear on a mobile device, but it isn't perfect. You need to test the site on a real phone.

    The above list are basic techniques and approaches to turn your site into a mobile site. It's not meant to be exhaustive covering every technique, but it is sufficient to make your site mobile friendly. And there are lots of other resources on the web for other techniques. Here are a few I've found helpful:

Thursday, October 30, 2014

A New Website Created by ?

http://www.CreatedByJeff.com

I've been a little busy putting up a NEW website. And not just any website, but one I've been thinking about for a long time.

I have a lot of websites, but most of them have weird names like SkyFitsJeff or Jatce Studios that don't make a lot of sense. I've been wanting one a with a little more normal name, and I've wanted one that showcased my best and more recent work. I've also wanted one that was just freaking cool to look at with an original illustration on the front page.

And I finally got it!

For now there's only a home page with links to pages on my other websites, but I plan to fill this one out and keep it updated. The others I haven't, because they just weren't a good representation of what I wanted to do. This one is.

So where is it?

http://www.CreatedByJeff.com

Visit it and then come back here and let me know what you think.