A Touch of Jeff: October 2014

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.

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.

Add the following tag inside the <head> tags:
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.

iPhone Home Screen Icon

Create a 57 x 57 png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
Call it apple-touch-icon.png.
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.
iPad Home Screen Icon

Create a 75 x 75 png.
Call it touch-icon-ipad.png. Do not create rounded edges or a shiny effect. The iOS device will do that for you.
Place it in the root directory of your website.
Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76">

iPhone Retina Display Home Screen Icon

Create a 120 x 120 png.
Call it touch-icon-iphone-retina.png.
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.
Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120">

iPad Home Screen Icon

Create a 152 x 152 png.
Call it touch-icon-ipad-retina.png.
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.
Add the following tag to the <head> section of EACH webpage: <link href="touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152">

Fonts

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.
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.

Images

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.

Layouts

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.
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).

CSS branching

Write your CSS code like you would normally for a desktop browser.
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.

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 ?

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.

Wednesday, October 8, 2014

Something Wicked This Way Came

Here is the drawing colored.

And here is a greyscale version in the vein of classic horror movies.

Tuesday, October 7, 2014

Art Philosophy: Power of Line

Line is one of the most basic, and yet most powerful, elements of art. With just a few strokes, an artist can communicate a person, an object, an emotion, a place, or just about anything else. And with many, many lines, and artist can create an image that looks like a photograph.

Sir Kenneth Clark remarked, "The difference between what we see and a sheet of white paper with a few thin lines on it is very great. Yet this abstraction is one which we seem to have adopted almost instinctively at an early stage in our development, not only in Neolithic graffiti but in early Egyptian drawings. And in spite of its abstract character, the outline is responsive to the least tremor of sensibility."

And Lance Espland remarked, "Line is a rich metaphor for the artist. It denotes not only boundary, edge or contour, but is an agent for location, energy, and growth. It is literally movement and change - life itself."

It's amazing how something as simple as a line, a mark, can convey the weight, the feeling, the emotion, and the identity of a subject. It can make the viewer think and feel if executed well. And it can be created with almost any object imaginable.

Line work has the power to stand on it's own, and yet it also plays nicely with others. You can fill it in or paint over it and create a completely different and yet equally successful work such as in book illustrations, scientific illustrations, comic books, graphic novels, and fine art.

The drawing above is the line work of a Halloween illustration. I do plan on coloring it, but the line work worked so well it can stand on its own. So I'm letting it. I drew it with a Copic pencil, a Bamboo brush with Sumi ink, and added a few finished in Adobe Photoshop.

Let me know what you think!

Thursday, October 2, 2014

Illustration - Emotions and Telling a Story

What Mischief Can I Get Into Tonight?

One aspect I've noticed in really great illustration is the effective use of emotion and the skillful communication of it. So often I see illustrations where the figures in it have a blank stare or a generic look. Other times I see where there is emotion, but it doesn't really fit or make sense with the rest of the composition. And there are illustrations where I've seen the artist try for something with limited success.

Nothing is more impressive than an illustration that seems to come to life and jump off the page and make the viewer feel something, but to do this successfully, one must be conscious of two major considerations.

First, the artist needs to figure out what emotion should be conveyed. It doesn't matter how skillful his execution if the thing he's going for doesn't fit. Well rendered mistakes, no matter how skillfully done, are still mistakes. Decide the overall message of the work. What are you trying to say? Then consider the viewer, because communication is a two-way street that requires effort from both the communicator and the communicatee. Who is going to view it? Why are they viewing it? Where will they view it? What will they be thinking and feeling when they encounter the work? What do you want the viewer to think and feel when they see it?

Second, decide how you will communicate that emotion. It has been said that the eyes are the doorways into the soul, and that is true. You can see so much in someone's eyes. The face is also a powerful communicator. There's a reason why in person communication is so much more effective than merely talking over a phone or through words. The facial expressions say so much. Many artists are very good at creating great facial expressions, but they forget people also use the rest of the body to communicate. Consider the gesture of the body. A happy person stands/sits/walks differently than a depressed person. Have you ever seen a person from a distance and could identify how they were feeling even though you were too far away to see his face? Or how about knowing without doubt how a person is feeling from just his silhouette? Body language is a subtle but powerful form of communication, and one that elevates a work once mastered. But don't rely on figure alone. The rest of the work can also contribute to the message with color and form. You may want to continue the emotion to the edges of the canvas, or you may choose to show a completely different emotion as a foil to create contrast with the main figure or figures. Again, consider the message and audience and ask yourself what will relay your message most effectively.

Of course, all this assumes you have a message to communicate. Some people just like to draw pretty pictures, and there's nothing wrong with that.

In the illustration above, I've decided to show a witch at the beginning of her mischievious night. The figure is in a ponderous mood reflected by the body position, facial expression, and eyes. The environment is also in a someone static and indecisive pose. I drew this with my new Copic pencil (an AMAZING new tool!), inked it with a Chinese bamboo brush dipped in sumi ink, and colored it in Corel Painter 12.

Let me know what you think!