Articles on HTML5 in 24 Hours

What's New in 2023

Sat, 11 Mar 2023 14:38:17 -0800

This website has been around a long time. And there are many resources available for web developers who want to learn more about HTML, CSS, JavaScript and other aspects of web design.

Books to Learn HTML, CSS, JavaScript, or Web Design

Videos to Learn HTML, CSS, JavaScript, or Web Design

Articles to Learn HTML, CSS, JavaScript, or Web Design

Force a Download with HTML5

Fri, 09 Feb 2018 17:32:43 +0000

HTML5 is the greatest version of HTML ever! (Well, at least until the next awesome version comes out). I just learned how trivially easy it is to force downloads with HTML5.

I was just trying to force a download of a PDF file because the customers need to sign it and send it back and it’s harder to do that online. I was going to use JavaScript, but decided that I’d do a quick search in case there was a better way.

Forcing Downloads is Easy—HTML5 to the Rescue!

Not only is there a better way, but it’s trivially easy to implement. I just add the keyword download to my anchor and BAM! the browser will pop a dialog box. I haven’t tested it in a lot of browsers (or devices), but it’s still huge! I mean, as a fallback I can attach a download function only to links that have the download keyword in them.

Now my download links look like this:

<a href="link to file" download="">Download the PDF</a>

I’m practically crying, I love HTML5 so much!!!

Do Hackers Care About Your Meta CharSet?

Fri, 19 Aug 2016 17:10:26 +0000

The other day, I got this question about the meta charset tag in the mail:

“Would you be so kind as to explain to me, in logical terms, how in 7 hecks does the presence of:
<meta charset="utf-8">
is supposed to affect a ‘hacker attack’ in accordance to your book?
I literally cannot imagine hackers caring much about which charset you display on the UI side when attacking.”

This is a great question. The book he’s referencing is Sams Teach Yourself Bootstrap in 24 Hours, and in it I emphasize the importance of using the meta charset tag and placing it as the first element of your <head> element. But while I explain that leaving it out can leave a page vulnerable to hacks, I don’t explain why. But I will now.

Cross-Site Scripting (XSS) Attacks

According to Wikipedia

“[a cross-site scripting or XSS attack] injects client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy.”

In other words, a website that has an XSS vulnerability can be hacked.

The UTF-7 Attack and How to Protect Your Site

There is an exploit that hackers can use called the UTF-7 XSS attack. They attach content to web forms and other pages that include malicious code encoded as the fake encoding “utf-7.”

Web pages that do not have the character set defined are vulnerable and can be attacked with this exploit. This doesn’t mean that every web page without the character set defined are vulnerable, because XSS attacks require other elements like JavaScript or a form. But if a web developer adds those elements to the page in the future, that page could be hacked.

Why Define the Character Set?

While it’s true that not every page has a cross-site scripting (XSS) vulnerability directly, by getting in the habit of always defining the character set of your web pages, you reduce the risk that you’ll forget to do it on a page that could be attacked.

It’s also true that many web servers use HTTP requests to define the character set automatically on all pages. But it’s not easy for a web designer to check that. Plus if the server changes or the pages are moved, the new server might not have that feature. By adding the <meta charset="utf-8"> tag to your <head> element, you ensure that the page has one level of protection without having to do anything else.

Note: you don’t have to use the meta tag to define the character set. You can use HTTP on the server, set it with PHP or another scripting language. It doesn’t really matter how you define the character set, as long as it’s set. It’s just easiest for most web developers to do it with the meta tag, because that’s what we have direct access to.

Do I Have to Use UTF-8 in the Meta Charset?

It doesn’t matter what character set you use, as long as you use a valid one. I like UTF-8 because it includes a huge number of characters so I can write things like ñ and ∫ right in my HTML without having to use character codes. The default character set in HTTP 1.1 is ISO-8859-1.

This is Not the Final Word on XSS Protection

Please do not expect that adding the meta charset tag will protect your site and scripts from all XSS attacks. This is not true. There are many things you need to do to protect your scripts from XSS vulnerabilities. But adding the meta charset tag is a start.

XSS is not the only way your website can be hacked, for example the Shellshock exploit that came out a few years ago. Don’t think just because you’re writing HTML that your web pages cannot be hacked. Always take security seriously, even if, like the questioner, you cannot imagine a way that hackers can attack your pages. Just because you can’t imagine it doesn’t mean that the hackers can’t. And they are imagining new attacks and exploits every day.

Clip Your Images with CSS clip-path

Sun, 10 Jul 2016 01:19:47 +0000

I used to try to clip images using the CSS clip property, but that was so difficult that I typically gave up and got out my image editor. What is the point of spending four hours trying to force an image to clip in CSS when I can do the same thing in Acorn in less than five minutes? But now that clip is deprecated, I don’t have to use it anymore. But better yet, the new CSS clip-path property works so much better!

The clip-path property includes features like:

You can apply it to any element, not just absolutely positioned ones
You can use SVG to define the clipping path
It actually works!

That last one is the kicker. Yes, I know the clip property worked too. But it was so hard to use that it might as well have not worked. As I mentioned above, I could spend hours just trying to get the image cropped the way I wanted it to. And I’m not talking about minor adjustments. I’m talking, I would attempt to clip the upper left corner, and the clip property would cut out something in the lower right. WTF?!?

So when I started playing with the CSS clip-path property I didn’t have high hopes. I figured at best it would be a little easier to use. Five minutes later I had clipped exactly the portion of the image I wanted, clipped it in a circle shape (not a rectangle!) and placed that circle on my web page.

CSS hooked me again!

So, since, like the image-set() notation, I thought this was super cool. I decided to create a video for you. The video covers how to create a rectangular clipping path for an image step-by-step. I also give you a tip about a site (Clippy CSS Clip Maker) that will help you create your own clipping paths.

Watch My CSS Clip-Path Video

https://youtu.be/U8GZSu_-FEA

So Excited about image-set() Notation!

Fri, 24 Jun 2016 19:45:31 +0000

As I’ve been writing my next book on forgotten features of CSS, I have been coming across some really cool things. It’s been hard to keep up the writing as I get so excited about actually using the features that CSS provides. Today I was working on image-set() and in doing my testing I realized that my dual monitor setup was well equipped for testing this tool.

What is `Image-Set()`?

You’re probably asking what the heck image-set() even is as it isn’t used very often and most designers don’t know much about it. In a nutshell: it is a CSS notation that allows you to define multiple image sources based on the resolution of those sources. The most common usage is for providing a Retina image and a non-Retina image. This way Retina devices see a crisp clean image, and non-Retina devices can show an image that is (hopefully) smaller and better optimized for their viewing.

How to Use `Image-Set()`

You use the image-set() notation where ever you would use images in your CSS. It has the format:

image-set( imageURL resolution,
           imageURL resolution )

Add as many images as you need, separated by commas.

The imageURL is written how you normally write URLs in CSS url('image.png') and the resolution can be written as 1x for standard resolution, 2x for Retina and other high-resolution displays, and even specific DPI like 600dpi for a 600 dots-per-inch printer version of the image.

`Image-Set()` Best Practices

To make your image-set() images work best you should always do the following:

Set a default image first. Browsers that don’t support image-set() will load that and ignore the other style properties
background-image: url('image.png');
Use browser prefixes
-webkit-image-set -moz-image-set -o-image-set -ms-image-set
Place the standard property last
image-set( url 1x, url2 2x )

Example of `Image-Set()`

Here is a video I did demonstrating the image-set() notation. And below the video is the source CSS I used.

https://youtu.be/_G1ZtlQ-nNs

       #box {
         background-image: url(image-set-example-none.png);
         background-image: -webkit-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         background-image: -moz-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         background-image: -o-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         background-image: -ms-image-set(url(image-set-example-1x.png) 1x,
                url(image-set-example-2x.png) 2x);
         width:800px;
         height:800px;
       }

To create the shape, I included a div with the ID box in the HTML.

Images for Download in Chapter 5

Mon, 13 Jun 2016 18:41:20 +0000

There are several Try It Yourself exercises in Chapter 5 that require images. You can either use your own or download the ones linked here.

Try It Yourself 5.2

In order to follow along with Try It Yourself 5.2, you should download these two images. They are linked to the full size images if you don’t want just the thumbnail.

Try It Yourself 5.3

In order to follow along with Try It Yourself 5.3, you need a Retina-ready image and a smaller resolution version for low-res screens. If you don’t want to use your own images, you can use these to test the code.

Retina Ready for 300x400 image block

Standard Resolution 300x400 image block

Moving Code Samples to GitHub

Mon, 23 May 2016 21:47:52 +0000

Things are moving slowly, but they are moving. I have gotten the Bootstrap book code samples up on GitHub. So those of you who wanted to download them all at once, you now can. I’ll be adding the code from my other books to GitHub as soon as I can.

If you notice an error (and they do creep in!) please feel free to let me know by email, comment, or pull request.

Once I get the older books up on GitHub, I’ll start working on getting my latest book’s code up on GitHub. Of course, that book isn’t done writing itself, so one thing at a time.

Image by Pexels from Pixabay

Friday Favorites 2/19/2016 - late start

Sun, 21 Feb 2016 17:49:00 +0000

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?”

I also planned a follow-up article to Monday’s article on Five Key Design Ingredients to post first on Tuesday, then Wednesday and now I might get it done by tomorrow, or maybe Tuesday. sigh And as you saw, nothing got posted this week other than Monday’s article. Oh well, back to the calendar!

Link of the Week: CanIUse

CanIUse is a very useful site for web designers

My link of the week this week is a site I use all the time–CanIUse. This site lets me look up lots of CSS, HTML, and JavaScript features and see what the current support is for various browsers. Now, mind you, this is not a substitute for actually testing in the browsers as in my experience a feature might be supported by the browser by not being ignored, but actually do nothing (font-stretch , I’m talking to you!). But it’s a great place to start. I use this site all the time and I can’t recommend it highly enough.

Thought of the Week: Is It Bad that HTML5 is No Longer Ahead of Its Time?

I saw this article last week on TechCrunch HTML5 On The Rise: No Longer Ahead Of Its Time. It seems sad but true. HTML5 is now really mainstream. And while I’m a little nostalgic for the days when it was the cool new technology, the fact is that it really is cool that it’s mainstream. It’s way less common to see people balking at the idea of using a simple doctype like <!doctype html> (which always blew my mind that people didn’t like that. I mean, a doctype that’s easy to remember? What’s controversial about that?). And HTML5 video is pretty much the standard these days. It’s awesome.

h/t @JasperEavu

The 5 Key Design Ingredients

Mon, 15 Feb 2016 21:55:00 +0000

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.

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

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

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

Fri, 12 Feb 2016 18:00:00 +0000

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:

[caption id=“attachment_1681” align=“alignnone” width=“720”] 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.

Added Code Samples to GitHub

Thu, 11 Feb 2016 03:12:03 +0000

I’ve gotten the HTML and CSS LiveLesson video code samples up on GitHub. If you’ve gotten the videos you can now grab the HTML and CSS I used in the videos.

Let me know if you have any issues.

What is your favorite design ingredient?

Wed, 10 Feb 2016 18:30:00 +0000

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.

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

Mon, 08 Feb 2016 18:00:00 +0000

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

[caption id=“attachment_1661” align=“alignnone” width=“720”] 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='https://fonts.googleapis.com/css?family=Alegreya+Sans&subset=latin,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

[caption id=“attachment_1662” align=“alignnone” width=“720”] 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

[caption id=“attachment_1663” align=“alignnone” width=“720”] 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

Fri, 05 Feb 2016 18:00:00 +0000

Getting Infomagical

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:

Single-task

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:

De-Clutter

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.

[caption id=“attachment_1645” align=“alignnone” width=“720”] 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…

https://www.youtube.com/watch?v=8bfELN6NskE

#DontBotherMeImWorking

Have you taken any design classes?

Wed, 03 Feb 2016 18:00:00 +0000

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

[caption id=“attachment_1641” align=“alignnone” width=“721”] 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]

Comments:

- Feb 3, 2016

Hi Jennifer; thank you for your years of generous sharing of your broad knowledge of and experience with web development. I have tried taking web design courses at the local community college. My experience there was that the teachers knew their subjects quite well, but were either not very good at teaching or were overwhelmed by the numbers of students and their ’needs’. When twenty or more hungry minds avidly try to consume and absorb a large quantity of new info, the instructors appeared to ‘shut down’ or ‘close up’ after a certain number of questions and repeated explanations. I had assumed that there would be an advantage to having a human ‘mentor’ in the classroom who would be able to answer all of my questions at every juncture. That’s not always the case. It seems to me that a ’lab’ type situation wherein students could work at their own pace and have relatively free access to the teacher (or teacher’s aid or student mentor or coach) would be ideal. There must be such types of learning happening across the internet; the closest I’ve come to it are/were the classes you give/gave on html that one could start and finish at his own pace. The problem there was that there was no real time ‘face’ time, so there was no ‘pressure’ to finish anything and no sense of an end goal.

- Feb 3, 2016

I forgot to empathize with you in my previous comment, Ms. Kyrnin, about the stress with your client. Sorry you have to deal with such situations, but - alas - we are human and are flawed, I think, by nature - except for my wife and my customers. :o)

- Feb 4, 2016

What online design classes would you recommend for a web developer. How much time would it take to complete a course? I am elderly but very active in web development.

Jennifer Kyrnin - Feb 4, 2016

I haven’t taken a lot of online courses, personally. But I like the SitePoint and Treehouse offerings. These sites offer self-paced courses that you can do at a speed that is comfortable for you.

Jennifer Kyrnin - Feb 4, 2016

that’s been my experience with online courses is that unless you are strongly motivated to finish, you won’t. But in-person teachers can get overwhelmed as you mentioned.

Jennifer Kyrnin - Feb 4, 2016

lol, of course, your wife is perfect. It’s smart that you recognize that. :-)

10 Web Design Trends You Should Learn in 2016

Mon, 01 Feb 2016 14:30:00 +0000

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.

[caption id=“attachment_958” align=“alignleft” width=“244”] 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 272x340 pixels of visible space. And there are 4K UHD monitors with 3840x2160 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.

[caption id=“attachment_1617” align=“alignnone” width=“720”] 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.

[caption id=“attachment_1625” align=“alignnone” width=“720”] 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.

[caption id=“attachment_1621” align=“alignnone” width=“720”] 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.

[caption id=“attachment_1622” align=“alignnone” width=“719”] 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!

Friday Favorites: 1/29/2016

Fri, 29 Jan 2016 23:00:00 +0000

Most Interesting Article I Read This Week

Tips for Designers Who Don’t Code by SpeckyBoy.

[caption id=“attachment_1584” align=“alignnone” width=“719”] Not a lecture, just good advice

This is not a lecture article. The advice in this article is really good. For example, everything in your design should start with the content. And this means your mockups, not just the final design. How will your beautiful layout look if the title is more than three words long? What if the ads in the sidebar extend below the length of the main content–will you be okay with a big blank spot in the middle of your design? What if the people choosing the images don’t choose image in the correct aspect ratio–will your landscape-focused design look good with portrait images? or square? What if they attempt to crop the offending image, and it’s even worse than if they’d just left it alone?

Design is great, but when it meets the real world it can be challenging, and if you don’t code it can just be frustrating. But this article might help at least a little.

Quote of the Week

Design is not just what it looks like and feels like. Design is how it works.

-- Steve Jobs

This is something to bear in mind whether you code or you don’t code. If your web page or application doesn’t work for the audience it’s targeting then it’s poorly designed, no matter how pretty it might be.

Questions about web editors

Wed, 27 Jan 2016 20:00:00 +0000

When I started asking questions about web editors, I started thinking there might be something better than what I was using. There are so many web editors out there, it is hard to choose which one to use. Most designers I know find an editor that suits their needs and stick with it. And this is definitely an easy solution. After all, if it’s meeting your needs, why would you need a new one? I was using Dreamweaver, and it met my needs.

Dreamweaver has a lot of great features, it includes a decent code editor, has some RWD features, it includes preliminary testing for mobile devices, and integrates fairly well with Photoshop. But one thing I noticed year over year was that even though new versions of Dreamweaver were coming out every year, they all seemed the same. Sure, I didn’t want the interface to change too dramatically, I was used to it. But couldn’t they at least add in some new features like advanced CSS properties or better visual design? I wouldn’t have been so bothered by it except that Adobe was also releasing products like Adobe Muse (a visual web editor with no easy HTML support, but very easy to use WYSIWYG) and the Edge products (Edge Reflow for RWD, Edge Code for HTML, Edge Animate for web and CSS animations, and Edge Inspect for previewing on mobile devices). These products offered a lot of the features I was looking for in Dreamweaver. But why weren’t they being included in Dreamweaver?

Once I started asking questions I couldn’t stop. I started looking at other editors. It was terrible, I felt like I was cheating on Dreamweaver, but I couldn’t help it. The more editors I tried, the more I realized that there were features in web editors that I didn’t know I was missing. And once I saw them, I missed them. Thus I moved to Coda and Pinegrow.

Panic Coda–Creating a New Site

What Questions About Web Editors Do You Have?

What web editor do you use? Why do you like it? What would you change about it? Have you considered trying another editor? Most editors out there offer some type of free trial, so you can check out some new editors and perhaps be surprised by the features you didn’t know you were missing.

Two Important Web Editor Features

Mon, 25 Jan 2016 19:00:00 +0000

Web editors offer features that you can’t get from a text editor. But often the one web editor feature people look for is the price–free. I’ve been trying out web editors for nearly twenty years, and while I have one web editor that I still use that’s free, most of the ones that I really like I’ve spent some money on. And over 20 years, spending $50 or $100 on an editor seems like a good investment. There are other web editor features that I look for instead of just price.

One of the best things about doing web design is that you don’t need any special software to do it. The tools you need are either already on the web or you can use an editor that comes with your operating system. So they are free. In fact, many people write all their web pages in Notepad. When I’m in a hurry I’ve been known to just open up vi (a Unix text editor) and slap out some quick HTML tags myself.

Most of the time, when I’m doing work on web design I like to use a web page editor. My current favorite is Coda because it integrates easily with Git and lets me preview in any of the browsers I have without a lot of effort. I use this editor almost every day.

There are many possible web editor features

I should say that I have been building web pages since 1995, and I can often write a complex CSS property faster by just typing it out than by using a visual or WYSIWYG editor. But that’s not true for everyone. Some of the other editors I use include:

Komodo Edit--a free text editor for Windows, Macintosh, and Linux that is based off the much more powerful Komodo IDE. But although I still like this editor, I use Coda more and more often instead.
Macaw--one of the first responsive web page editors I ever used. It’s a visual editor and made it fun to fiddle with my designs.
Pinegrow--another visual editor, this one also has the feature of including WordPress template editing.
Dreamweaver--I’ve used Dreamweaver since the 90s, and it’s changed a lot over the years. Now, of course it’s owned by Adobe.

I’ve used dozens of other editors, but those are the ones I come back to day after day. I was thinking about what makes these editors my go-to tools for web design and development, and I came up with these two features that I use all the time.

Most Important Feature: HTML

This might seem like an obvious feature, but a lot of web editors out there, especially the WYSIWYG ones seem determined to make it nearly impossible to view and edit the HTML. That drives me crazy. Sure, if it really is what-you-see-is-what-you-get then it shouldn’t matter, but the fact is that CSS and HTML still aren’t so consistent that you can guarantee a page will look the same no matter where you view it. Sometimes you need to go tweak the HTML or the CSS or both.

My favorite editor, Coda, is an HTML text editor first and foremost. It has syntax modes for many different languages including things like JavaScript, Python, PHP, Perl, CSS, and many more. And when it comes down to it, these languages are all written in text editors, so the difference is how they are displayed (color coding, indenting, etc.).

But visual editors need to have access to the HTML as well. And the best ones do. Macaw and Pinegrow each allow you to edit the HTML with separate windows. Generally you edit the HTML in blocks, rather than the entire document itself, but you still have access to it. Dreamweaver has a code editing mode that you can switch between.

Do you think HTML editing is important in a web page editor? Or do you rely on the visual editor 100%?

Previewing is an Important Feature, Too

If you’re like me and you prefer a text or code editor, having a good preview is important as well. But even if you use WYSIWYG you should be able to preview in different browsers and possibly even mobile device emulations. Previewing is a web editor feature that is often overlooked in favor of more of the bells and whistles because it seems like an obvious feature.

But with responsive web design and the need to develop sites that work on many device widths, sizes, and capabilities, being able to preview what you’re doing quickly and without a lot of fuss is critical.

I like Coda because I can hit the preview button and it will show me my pages, including PHP and other dynamic designs, right in a webkit browser in the editor. I can resize the preview pane and see how it responds once I’ve added RWD features. Then when I’m confident it will work in that browser, I can open my page in any web browser I have on my computer.

Dreamweaver offers a connection to mobile devices through the Creative Cloud. All you do is click on the preview icon and it will give you a QR code you can scan and view on any device. You can also send the URL to other people to have them preview your designs. This is a great quick collaboration method. And this is in addition to the built-in preview modes to do edits in a page sized for an iPhone 4 or a Google Nexus 10 or any other size you want to define.

Do You Agree? Are These Important Web Editor Features?

Do you have a feature you can’t live without? It can be something as simple as color coding or something fancy like RWD-builders. What makes an editor something you can’t live without?

Friday Favorites and Features: 1/22/2016

Fri, 22 Jan 2016 23:00:00 +0000

Two New Articles Featured

This week two of my articles on web design were featured on InformIT:

I hope they are useful to you.

Most Interesting Article I Read This Week

[caption id=“attachment_1562” align=“alignnone” width=“719”] Learn to Code HTML and CSS in 12 Lessons online.

Shae Howe’s book Learn to Code HTML and CSS (Buy on Amazon.com) is a really nice looking introductory book on HTML and CSS. And he’s also got a free online course you can take to learn HTML and CSS that is just as beautiful. Learn to Code HTML and CSS in 12 lessons.

Product or Service I’m Considering

[caption id=“attachment_1567” align=“alignnone” width=“720”] A browser specifically for developers

This Monday I was recording some videos on Firebug, and so I had to open Firefox to install it. I haven’t used Firefox in a long time because Chrome has been working well for me. But it seems like Firefox is going to suck me back in. I learned of a new Firefox fork called the Firefox Developers Edition. This is an interesting version of Firefox that puts tools useful to developers front and center.

h/t Noupe

Quote of the Week

The enemy of art is the absence of limitations. –Orson Welles

So the next time you find yourself complaining about the drawbacks to a certain browser or how annoying it is to have to design for tiny screens consider that without those limitations you can’t create art. And creating something beautiful, something that is art, is a noble goal for any website.

What is the most important web hosting feature?

Wed, 20 Jan 2016 20:00:00 +0000

When I was working on Monday’s article I was planning on writing about the web hosting features I thought were the most important to look for in web hosting. But really, price is the one that we all care about, and the article wanted to be about that, so…

But that doesn’t mean there aren’t other web hosting features you should consider. Things like:

Space - a lot of web hosting providers offer unlimited space, but some don’t.
Bandwidth - like space, many web hosts offer unlimited bandwidth, but some don’t.
Support - I like sites that have good support, even if I rarely use it.
- Email support - my preferred method
- Followed by chat
- And finally phone support
Up-time - I find up-time promises to be a little silly, as most of the time hosts are either up reliably or they are not.
Software and services - Personally, I use a VPN and control the software that’s installed on the server myself. But if you aren’t a huge tech geek like me, it can be nice to have a service that offers decent software packages already included.
What else?

What web hosting features do you find valuable? Participate in the poll and post your comments below.

[poll id=“12”]

The Price of Web Hosting

Mon, 18 Jan 2016 19:00:00 +0000

I have determined that there are two types of people in this world: the people who care about how much things cost and the people who claim they don’t. Whether we like it or not, price is a factor in how useful a hosting provider is going to be to you and your website. It doesn’t matter if your hosting provider offers every bell and whistle under the sun if your business can’t afford to pay for it. On the other hand, just because a hosting provider is free doesn’t mean that it’s the best choice.

Many people are inclined to go immediately for the free and low-cost web hosting providers simply because they are just that—free. But there are drawbacks to free and low cost hosting providers that might not be apparent immediately.

Who Controls the Ads, You or Your Hosting Provider?

Coffee mmmmmmmm

Most free web hosting providers put ads on your website that you don’t control. Not only will you not earn money from those ads, those ads might not fit the tone or goals of your site.

I spend a lot of time thinking about what ads I want to host, where to put them, and if I should keep them. Some of my sites deliberately have no advertising at all (or very very little). But if I’m on a free hosting service they might decide to fill up my screen with pop-ups and interstitials and those really annoying double-underlined text ads, and there is nothing I could do about it. In fact, one of the reasons I’m glad I’ve left About.com is because their advertising policy has gotten insane. It’s nearly impossible to find content on their site anymore because there are so many ads.

Free Web Hosting Might Cost You Money

Many free web hosting providers do not allow you to place your own ads on your site. They are typically concerned that your advertisements will compete with their ads, and they want that revenue, since you aren’t paying them.

But if you can’t put ads on your site, then you won’t be getting any money from those ads. This is what my MBA teachers would call “opportunity costs.” I have the opportunity to make some money from my website, but since I’m using a hosting company that disallows ads, that money is lost.

Hosting Providers Can Cap Usage

Most free and cheap web hosting providers have usage caps. They limit the space you have available to your site, the bandwidth that you can use to deliver the site, sometimes even the number of files you can post on your site. The really unscrupulous providers will add on extremely high fees that come into play when your site goes over a cap. You won’t get a warning, just a bill for the services. This can cost you in the opportunity to provide more content to your customers, but also in the very real money that you have to pay the hosting provider when they charge you for going over your cap.

The Price of Web Hosting Isn’t Always What It Seems

Money to buy coffee

Many inexpensive web hosting providers will heavily advertise a price that seems really good, but has onerous requirements. For example, you might get a $2 a month price if you sign up for five years of hosting (so you have to pay $120 up front). Then if you cancel before the term is up, some hosting providers simply keep the money while others block website transfers. One web hosting company charged a very low monthly fee, but the fine print on the contract allowed them to set up a recurring charge of much more than that after the first three months. I heard one claim that the only way to cancel was to cancel the credit card.

Paying a small fee might sound like a good idea when you’re first starting out, but if you are forced to stay there, you might end up paying more money just to get out.

Once you have signed up for cheap web hosting, some providers will then hold your website hostage. One well-known web hosting provider makes it very difficult to move a site away from them once you’re there. They lock your domain name for six months of the year and has even been reported to have removed access to the website files if they think you might be considering leaving. Most people don’t realize this can happen because the hostage situation only becomes apparent when you try to leave. It’s like “Hotel California” web hosting style–You can check out, but you can never leave.

Always Read the Contract

Be sure to do your homework and find a hosting provider that really does provide what they say. Look for loopholes in the contract–are you stuck for 90 days or can you cancel immediately? Do you have to buy something else (like a domain name or web design services) to get the great price? Also remember that web hosting is often something that other service providers will try to tack on as an “extra” service. Some web design firms will redesign your website and move it to their hosting service. This can leave you with a monthly bill on two web hosting providers even though you only need one.

David Bowie RIP

Fri, 15 Jan 2016 23:00:00 +0000

Most Interesting Article I Read This Week

I grew up in the 70s and David Bowie was a huge part of it. So I was very sad when I learned of his death on Monday morning. Like many of my friends I spent most of Monday and portions of Tuesday (and let’s be honest, Wednesday, Thursday, and yes, today…) watching videos of Bowie singing a-capella with Freddie Mercury and crying as I listen to Blackstar. But one of the articles I found most interesting was one on the BBC: David Bowie: The internet pioneer. I remember Bowienet, although I was not a member. I remember when he released “Telling Lies” as a downloadable single. But I didn’t realize how much he was involved in the early Internet. He was a man ahead of his time. David Bowie—RIP

He will be missed.

Quote of the Week

“It’s only forever, not long at all.”

—Jareth (David Bowie) in Labyrinth

5 Things You Need to Design a Website

Mon, 11 Jan 2016 19:00:00 +0000

It’s very easy to design a website these days. I’m really almost jealous of people coming into it now as all the annoying things that I had to learn to work around finally just work now. I can spend time on cool CSS rather than focusing on whether my images will even display in the browser (or display where I want them).

But if you’re just getting started with building web pages, it can still be really overwhelming. There are a few things you need to get started, but don’t worry, it’s not as hard as you might think!

To Design a Website First You Need a Computer

A laptop is nice but not required

This may seem obvious, but it is very difficult to build a web page without a computer. But the computer you use doesn’t have to be fancy. There are people out there who have built entire web empires on public computers (like at your local library). If you have access to a computer that can access the Internet, then you can build a web page.

There aren’t any hardware specifications that you must have. Your computer can be ten years old or the newest thing out there. You can build your own computer or you can create web pages on a tablet or smartphone. You could probably build them on a feature phone, but that would be pretty difficult, so I’d head to the library if that’s all you have.

Once you have the computer or other device you’re going to build your site on, you then need:

You Need a Hosting Provider

[caption id=“attachment_1527” align=“alignnone” width=“720”] You don’t need a domain name, but most sites eventually want one

There are so many options available for web hosting these days that you may feel paralyzed in choosing. If this is the first website you’ve ever designed, then I recommend you start with a hosting company that acts as a web page builder as well. Some of the best ones out there right now include:

Weebly

Weebly makes it easy to create a really nice looking website, blog or online store. They have a lot of styles and themes to choose from to create exactly the site you need. Plus they will help you set up a domain if you want one and they have great stats to watch your site grow.

Wix

Wix has a lot of categories and styles to choose from and like Weebly it offers some really nice templates and themes so your site will look professionally designed right out of the box. Wix has a lot more templates than Weebly, but they both offer equally nice looking themes. The biggest drawback to Wix is that it can be difficult to move a site from there once it’s been built on Wix. But if you like what you have, this shouldn’t matter.

Squarespace

Many of the small business owners I know who are considering designing a website are considering Squarespace. They offer lots of themes and styles to get exactly the site you want. Plus they have a lot of responsive website themes, which are lacking on some other builders. They also have great SEO features.

If you are looking for a more advanced hosting system, you won’t go wrong with BlueHost. They offer a lot of programs and systems, but you have to do a bit more work to build your site than on the site builder hosting companies listed above. Personally, I use Linode co-location. I’ve been building and maintaining websites since 1995, and they offer me the services and security that I look for in a web hosting provider.

You Should Have a Text Editor

[caption id=“attachment_1528” align=“alignnone” width=“720”] A typewriter might be a little bit old school.

If you go with a site builder like Weebly, Wix, or Squarespace, you might not even need this, but I like to have copies of my web pages on my local computer. Keep in mind that you don’t need a fancy web editor to build your site in a web builder or in WordPress. A text editor like IA Writer or Notepad++ can give you a place to write and edit your content before you paste it onto the site. And you can use your site builder to add images.

Speaking of images…

Don’t Forget an Image Repository

[caption id=“attachment_1529” align=“alignnone” width=“720”] All the images on this page were found on Pixabay.

Note, I don’t mean you need an image editor. In fact, most of us, myself included, are probably not graphic designers or professional photographers, and we would do better just sticking with graphics from a reputable source than trying to create and edit our own.

Remember: just because an image is on the web does not mean that you can use it on your web pages!

Instead of risking nastygrams and worse from photographers and graphic artists because you used an image you found in Google images, go to a site like Pixabay and be confident that your images are free for commercial use. I use Pixabay for nearly all the sites I maintain, and they have a huge selection of really nice looking photos and illustrations.

Most Important: You Need Your Creative Imagination

[caption id=“attachment_1532” align=“alignnone” width=“720”] This is probably the most important part

Once you have the first four things, you’re ready to get your site up and running. Head over to Weebly and pick out your template. Write your first couple of pages in Notepad++ and then post them to your site with images you found at Pixabay. And then keep going.

Designing and building web pages is fun!

Friday Favorites: 1/8/2016

Fri, 08 Jan 2016 23:00:00 +0000

Most Interesting Article I Read This Week

File this under “I wish I’d written that…” You never learned to code? Start here. is a great overview article for beginning web designers and web developers. Don’t be intimidated by the title, it’s not just about “coding” but about building web pages and more. I love that it starts out by figuring out what language you should learn first. And it goes well beyond just HTML, so for those of you who don’t think writing HTML is programming, you’re covered.

The article is long, but worth it if you’re struggling with what language to learn or how to break into programming. Even if you just want to decide what to learn next, this is a great overview of some good choices.

Git Is My New Favorite Tool

I’m currently moving most of my projects into Git using BitBucket. It’s been really great for both collaboration with other designers abut also just keeping track of changes to everything from my latest book project to the Wordpress themes I’ve been working on.

I was using a GUI to interface with Git, but I’ve found that I like the command line interface better. I’m so much faster just typing than I am with the mouse.

Quote of the Week

“Begin at once to live, and count each separate day as a separate life.” — Seneca

What Are You Working On?

I’m working on:

A new book on Cool CSS
A video course covering HTML, CSS, JavaScript, jQuery, and Git
Three different WordPress themes
Four different websites

Learn Design: 3 Reasons for Non-Designers

Mon, 04 Jan 2016 19:00:00 +0000

Even if you don’t think of yourself as a designer, learning how to design websites can be a valuable part of your web content creation process. And when I say learn design, I don’t mean just learning HTML and CSS. I mean you should learn design techniques and the principles of good design.

It is very common for business owners and developers to think that they don’t have the skills to design their own websites. Business owners might think they don’t have the technical know-how and developers might feel intimidated by the design aspects of the work. But it’s possible to get a handle on web design even if you don’t know the technology or don’t know design, or both!

Knowing Design Helps You Focus Your Content

Your design should focus on your content

One of the key things about good design is that it centers on the message. A well designed book is easy to read. A well designed brochure gets the call to action right out in front of customers. And a well designed website lets the customer see the content first.

Once you know a few design techniques such as line work or flow, you will start to understand how your content can be improved (or ruined) through design. I recommend learning the basics of design even if you’re going to hire a professional web designer to do the work. That way you’ll be able to articulate what you’d like changed more effectively and you’ll understand what the designer means when she tells you the reason behind the font choice or the shading or colors.

Design Knowledge Helps You Refine the Styles You Already Like

A fractal is constantly being refined

If you know that you like bright colors with lots of vibrant images to go along with them, having some knowledge of the design tenets that support those choices will make your choices that much better. Without knowing design, you might just think “I like reds” and leave it at that. But after studying design, you might discover that red colors have specific meanings to certain cultures or that warm colors (like reds and oranges) convey a sense of warmth to the entire site. And once you understand the meanings behind colors, you might decide to increase that feeling on your site with similar colors or you might try to tone it down with complementary colors in the cooler side of the spectrum.

One design aesthetic that many designers learn is how many, or really how few fonts they should use on a page. A website that has been designed will typically only have one or two different font faces (font families in CSS) on the page. But many web designers start out with dozens of different font faces. As they learn more about effective design, they reduce the fonts until they have a workable amount that enhances rather than detracts from the page content.

You Will Become More Discerning by Learning Design

Abandon the old and broken designs

Once you start learning how to do design well, you’ll start noticing all the places where it’s done poorly. You’ll notice signs with too many fonts, ebooks with too much white space, and websites that aren’t balanced. This might seem like a bad thing, but as you’re noticing the flaws in designs you’ll also start to notice the sites that are designed well. You’ll start admiring typography and want to learn how to add more contrast to your pages. Your images will get better as you start to recognize well designed photos alongside the web design.

But because of this improved discernment, your entire website will improve. Spacing issues that might have gone unnoticed will start to bug you. And every time an image is resized incorrectly you’ll cringe. If you’re a developer, you’ll want to learn how to fix those things yourself. And if you’re a site owner, you’ll have your list of improvements for your design team.

Do You Agree? Do You Want to Learn Design?

Do you think it will add value? Why or why not? If you don’t already know design, are you going to go out and try to learn more?

My Bootstrap Book is Now Available

Mon, 16 Nov 2015 13:00:15 +0000

I’m excited to announce that my Bootstrap book Sams Teach Yourself Bootstrap in 24 Hours is available in stores. You can order it online from Amazon and Barnes and Noble or buy it from your local bookstore.

It’s available as a Kindle eBook from Amazon or as a Nook eBook from Barnes and Noble. You can also get it in paperback as well as ePub, mobi, and PDF from InformIT directly.

This Bootstrap Book Makes Bootstrap Easy

Sams Teach Yourself Bootstrap in 24 Hours

If you’ve been considering moving to a CSS framework, Bootstrap is a good option. Bootstrap 3, which this book covers, offers a lot of useful features that customers and designers have come to expect from websites. Bootstrap makes things like grids, typography, and responsive design quick and easy. Now I find myself getting frustrated by sites that don’t use Bootstrap as I often have to reinvent the wheel just to get features that are standard in Bootstrap.

This Bootstrap book covers all the basics of Bootstrap including the CSS, components, and JavaScript libraries you can use to improve your site. You will also learn how to customize your Bootstrap website so that it doesn’t look like every other Bootstrap website out there. I even included a few example sites of some Bootstrap sites that really impressed me. You might be surprised at the sites that do use Bootstrap. There are a lot more than you might realize.

Please Consider Reviewing My Books

If you get a copy of my Bootstrap book or any of my other books, please let me know. I’d love to hear what you think. And if you have a chance, please leave a review on Amazon. If you like any of my books, the best thing you can do to help is to write a positive review on Amazon. And even if you don’t like them, I want to know, so I can improve them.

Laugh of the Day: Prime Ranking in SERP, but No Content

Sat, 14 Nov 2015 18:08:02 +0000

Getting high ranking on search engines is usually pretty hard. But if you have invented something new or have a revolutionary product or service, your website might rank well for those search terms just because you’re the only one doing it. This is a really good thing. After all, if you’re the first, it is nice to be recognized for that. But be careful, as if you’re not ready, this can end up as bad SEO, not good.

If you’re not ready for recognition, prime placement can end up backfiring.

Today, I was thinking how nice it would be if the Apple Watch or other smart watches didn’t have to be worn on your wrist. My husband joked “an Apple Pocket Watch” and I thought “what about a necklace?”

So I did a search on Bing for Apple Watch Necklace. I was surprised and excited to see a listing (after all the ads for the Apple Watch, a Samsung smart watch, and plain watches) titled “Apple Watch Pendants | The Premier Site For Apple Watch …” I didn’t read any further, I just clicked through.

At first glance, it looked pretty good. No pictures, but a nice clean template with the headline “The #1 Most Trusted Apple Watch Pendant Store.” I scrolled quickly to see if there were any pictures, and didn’ see any so I started to read:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in risus eget lectus suscipit malesuada. Maecenas ut urna mollis, aliquam eros at, laoreet metus.

Shop Now

I thought “Number one? Yeah, because they got the domain name!” I don’t think that’s what the site owners wanted me to think. Sure, the domain name helped their search engine optimization, but having no content is just bad SEO. But since all they have put up so far is a template and some placeholder text I’m not going to stick around long enough to do anything other than laugh. Instead of being impressed by their cool idea or new concept I was reduced to tears laughing at their complete fail of a website. (See the screen shot of the entire page.)

If It’s Live—It’s Live

It’s easy to forget that if you build a web page and put it live on the Web that people other than yourself and your company may see it. But you should consider that a rule of thumb. If a page is live on the Web, anyone can see it. And if anyone can see it, search engines can see it. And if search engines can see it, they will rank it in their results. And once you’re in their results people can find you.

And if people find your page and then can only read “lorem ipsum…” they won’t be impressed. Not even if you have ebullient phrases adorning the page like “#1 most trusted” and “Holiday Sale.”

In fact, by rushing your website out the door without all the content you need, you risk alienating some customers. I don’t recognize the company Divi, but I will remember them in the future. I don’t know if I would be willing to buy a pendant holder from them. And that’s too bad. As they might actually be a really great company for this type of accessory. I’ll never know now.

Apple Watch Pendants Do Exist

There was a Kickstarter campaign that ended on September 5, 2015, to create both a pocket watch and pendant style holder for the Apple Watch. You can pre-order them from the Bucardo website and they will start shipping in January 2016. Too late for a birthday present for me for this year, but maybe next year! Of course, first I’d need to get an Apple Watch.

Security Through Obscurity is Not Secure It’s Just Bad SEO

The moral of this story is that you shouldn’t assume that a page you haven’t promoted won’t be seen. Security through obscurity is really just wishful thinking. If your content isn’t ready, then don’t put up a page.

Full website - it’s not ready for prime time (click to view full size)

Adobe: What's New and What's Not

Thu, 08 Oct 2015 00:00:54 +0000

I had the opportunity to learn more about what Adobe is releasing this week at Adobe MAX. One of the things I like best is the new Capture CC app for iOS. I have used the older capture apps like Shape CC and Brush CC, but it’s nice to have all of them in one place.

[caption id=“attachment_1391” align=“alignnone” width=“720”] Brushes, shapes, and colors all in one app

Adobe Capture CC combines four previous apps in one: Shape, Brush, Color and Hue. This makes it so much easier to create custom shapes and vector line drawings from items in your environment. You can also create custom brushes and lines to decorate your sites. Color and hue help you to grab colors and then apply them as a palette. I spent several hours just taking random shots of my desk and the plants outside my office to create some silly drawings and brushes. I even came up with a monochromatic color scheme based on the color of my desk and some ink that spilled on it.

Photoshop and Lightroom

I’ve been playing a bit with the Photoshop CC artboards. These are really interesting, but I’m not sure I understand them yet. I do like the way you can create multiple views of the same document all in the same Photoshop document. So I can create a small, medium, and large mockup of a web page and keep them all together.

I have also started using Lightroom CC to attempt to put some order to my photos. This is taking a lot of time, and I think I’ll be working on it for years, but it does make me feel better to think that I’m getting my photos categorized and thus more usable.

There are other updates to these apps, but I haven’t really used them much because I was busy playing with other new toys.

My Dreamweaver and Muse Doubts

At Adobe’s MAX keynote this week they talked about the idea of “to code or not to code.” The speaker said that Adobe doesn’t believe that there is a right or a wrong answer to this question. I must say that I am skeptical of this.

Adobe had a great coding product for web designers (do any of you even remember Homesite?), and instead of developing it they killed it. They still have and promote Dreamweaver, but it is getting older and older feeling without any significant upgrade in how it works or feels. Instead, they have added a few new, minor feature upgrades. Bootstrap templates—featuring Bootstrap 3—doesn’t impress me a lot. And if they follow with their past iterations, it will be difficult or impossible to customize Dreamweaver with Bootstrap 4 updates, even though that version is due to be released any day now.

[caption id=“attachment_1393” align=“alignleft” width=“282”] Bootstrap 4 is coming, Aww yeah!

But I can’t complain about Bootstrap too much, after all, my book is about version 3, and version 4 is coming, so I should cut them some slack. Then the speaker tells me, as a coder, that “[I’m] gonna love the new 64-bit version of Dreamweaver.” Um. No. Okay, yes I would like to see a 64-bit version of Dreamweaver, but I’ve been waiting since Snow Leopard came out! For those without a Macintosh, that’s 2009. Six years is a long time to wait for something that you have found on tablets since 2013 and on Macs since, as I said, 2009!

Apparently the way Dreamweaver looks is considered innovative and new, but it doesn’t look all that different to my copy of Macromedia Dreamweaver 4. Part of me then thinks, sure don’t mess with something that’s working. But I’ve had the opportunity to work with modern web editors like Coda and Pinegrow and Dreamweaver is severely lacking compared to them. Coda is far superior in how it handles databases, connecting to Git and other source control systems, you can even edit directly on the server!

[caption id=“attachment_1394” align=“alignnone” width=“720”] Panic Coda

Pinegrow offers a very easy to read and understand visual CSS and DOM viewer, responsive design features, as well as support for Bootstrap, Foundation, AngularJS and WordPress right inside their visual editor. Yes, Dreamweaver CC 2015 has Live View, but that was interesting four years ago, not now.

[caption id=“attachment_1395” align=“alignnone” width=“720”] Pinegrow

The MAX keynote said that “millions of websites have been created in Adobe Muse.” But my question is this: how many tens or even hundreds of millions of websites have been created with Dreamweaver? And yet, instead of crowing about how popular it is or giving it some big useful updates, Dreamweaver gets one minute of the keynote (maybe one and a half minutes) and the big news is 64-bit, which it should have had five years ago. Instead, the web design tool Adobe wants us all to focus on is Muse.

The big news in Muse is that you can now create responsive websites in it. Okay, that’s great. Adobe would probably argue that Muse is their product that competes with Pinegrow and Dreamweaver competes with Coda. But I would argue that if that’s the case, neither does so very well. I use both Coda and Pinegrow and I like them both. And in both of them I can preview my sites and edit the HTML code. Granted, I can’t grab an object and move it around in Coda, and the code editor is a bit low-fi in Pinegrow, but they both do all the things that Muse and Dreamweaver do, and they do them better. The MAX speaker states that “never before has there been a custom free-form design tool that would allow you to output a responsive website.” Um, WRONG! I was using Macaw in January 2014. That’s almost two years ago now. I’ve been using Pinegrow for almost a year now too. So that’s two software programs that do “custom, free-form” designs to generate a responsive website. Muse was definitely not the first, and it’s not even the best. It’s just another one. Do your homework, Adobe!

Project Comet - or How Adobe Psychs Me Out… Again

One thing you’re going to hear more and more about if you follow Adobe news is Project Comet. Adobe wants to create an end-to-end project development platform, and Project Comet seems to be how they’re going to do it. The idea is that instead of having an app for wireframing, another for visual design, a third for prototyping, and a fourth for previewing, you do it all in one system or tool—Project Comet.

It is a new desktop application to let UX and UI designers create and prototype their designs in the vector design environment. Some of the cool things they demoed included:

She created a results screen with one result, and then collected that result

[caption id=“attachment_1402” align=“alignnone” width=“700”] Repeating the results object in Project Comet
You can then adjust the margins and padding for all the results by grabbing and dragging again.
Your prototypes don’t have to have blank spaces for images, you can drag images into shape elements and they will be non-destructively resized, cropped, and masked to fit in the shape.
She just dragged the images straight from Finder (Windows explorer for you MS types) into Comet and they scaled and masked and so on like magic.
She also the view to show her full artboard layout with hundreds of artboards, and Comet was very fast, even with all those assets.

I’m just afraid that it’s going to be like some of the previous things Adobe has demoed—they look great in the demo and then are hard to get to work with real-world scenarios. Or it will only create prototypes, and we won’t be able to design full apps or websites with it. Fingers crossed! Because Comet looks really cool! I could use it right now. But I have to wait for the public preview coming “early next year.” So, May or June? ;-) You can find out more about Comet from Adobe and even sign up to get email notifications. I have.

So even though I’m still disappointed at the lack of any substantive change or update to Dreamweaver, I am looking forward to Comet and hoping that I’ll be pleasantly surprised.

A Busy Week

Mon, 31 Aug 2015 03:06:24 +0000

I spent the last week working on two projects: the “Learning HTML and CSS Livelessons” and editing the Sams Teach Yourself Bootstrap in 24 Hours book.

It was both one of the most fun weeks I’ve ever spent and also one of the scariest (at least at first). I have never been in front of a camera before, and I spent 6-8 hours a day on Monday through Wednesday right there. Luckily Pete and his dog Shorty were there to put me at ease. It ended up being a lot of fun.

Now, of course, I have a bunch more work to both catch up from being gone for several days and some update work to get the website ready for the videos. This LiveLessons series is intended to help people learn enough HTML and CSS to get a website up and running and looking good. I’m hoping that if this project does well, I can do another on something like CSS to go into more depth on how to use CSS and style really fancy pages.

[caption id=“attachment_1135” align=“alignleft” width=“150”] Sams Teach Yourself Bootstrap in 24 Hours And I also got the first 50% of the technical and copy edits for the Bootstrap book. And I got the second 50% right after I got back. I’m hoping the second half is fairly error free (as far as we have found) like the first half. And as always, any errors that make it into the final book are my fault not my copy editor or tech editor (thanks Jon!)

One of the biggest challenges of writing a book about Bootstrap is that I find myself wanting to convert every site I look at to Bootstrap. I finally upgraded this site to Bootstrap just this week. And I’ve converted a couple of other sites I manage as well. But let me tell you, even as the author of the book, my clients don’t all want to do a huge redesign just because Bootstrap rocks. Oh well, their loss.

What’s Next?

My next project is finishing up a book on web publishing. That should be fun, and hopefully pretty quick. After that, who knows? If you have any ideas, let me know!

amzn_assoc_placement = “adunit0”; amzn_assoc_enable_interest_ads = “true”; amzn_assoc_tracking_id = “kyrnindesign-20”; amzn_assoc_ad_mode = “auto”; amzn_assoc_ad_type = “smart”; amzn_assoc_marketplace = “amazon”; amzn_assoc_region = “US”; amzn_assoc_linkid = “4e58e504a77bddbf022bf0fe2039d151”; amzn_assoc_emphasize_categories = “13900871,2238192011,1064954”;

HTML5 Cheat Sheet

Fri, 14 Aug 2015 22:08:43 +0000

I built an HTML5 cheat sheet for myself, so that I could make sure that my tag libraries were up-to-date and so on. And then when I finished, I realized that this might be something you would like too.

It is a PDF file listing all the HTML5 elements, what they are and whether they are new, changed, the same as HTML 4 or gone from the specification (and what you should use instead). I hope you like it!

HTML5 Cheat Sheet PDF

Comments:

jim - Apr 2, 2013

Awesome list! Thanks! One minor gripe, though: The section “Tags not in HTML5” is hard to read due to the dark gray background.

Jennifer Kyrnin - May 0, 2013

Thanks for the feedback. I’ll see if I can fix that.

Dorian Mattar - Nov 1, 2013

Thanks for the cheatSheet, but I have a few comments. 1. Although it’s a “pdf”, it’s not a searchable pdf as it’s an image and not a true pdf. Not so much an issue because it’s alpha and only one page, but still it could have been… 2. The resolution is also not optimum and when magnified for high-resolution monitors, it pixilates. A true pdf would also solve this issue. 3. There is no sample code for each tag, which would make this truly a great cheat sheet. Thanks, Dorian

Bill Waddy - Apr 3, 2014

Thanks for the cheat sheet.

Viraj Lathigara - Mar 4, 2016

Thank you very much for this cheat sheet ! It had been very helpful to me and my friends ! Its my humble request to you to provide one more thing, We want sample codes for each and every tag. Hope you will help us !

Stop Optimizing and Add Content Instead

Mon, 27 Jul 2015 12:00:34 +0000

So, you’ve built your website, and focused on SEO (search engine optimization) enough to start getting some traffic to it. You’re watching your stats grow week over week and month over month. It’s exciting. Your SEO efforts are working!

But what happens when you hit a plateau? And believe me, even the best sites plateau after time. If you have been focused on SEO it can be tempting to continue optimizing your home page and other pages on your site, but that can be a mistake. And with new search rules that Google continues to add, it can be a very big mistake.

Google Over-Optimization Penalties

Google has never been a fan of SEO. In fact, I would be willing to bet that if you cornered some of the search engine experts at Google, they would admit that they consider SEO to be a form of gaming of their system. And Google has always penalized gaming. So the fact that Google has announced that they will be adding additional penalties for sites they consider to be “over-optimized” should not be a big surprise.

How Can You Tell If a Page (or Your Whole Site) is Over-Optimized?

This is a legitimate, but tough question. Google doesn’t release their algorithms for us to see (as that would make it child’s play to game). But that means that most of the following suggestions are just that—suggestions. You might be able to continue to do these things without any penalty, while another site might be apparently penalized for much less. Here are some clues to help you determine if your page or site may be over-optimized:

Too much repetition of the keyword phrase This is the most common signal of over-optimization. If your keyword phrase occurs more than 10-15 times in your article, you might be over-optimized. One way to check this is to ask someone who doesn’t know your site to read the article and tell you what they think is the phrase you are optimizing for. If they can tell the exact phrase, with little or no prompting, you probably over-optimized.
Titles that are stilted and repetitive One strategy that was very common (in fact I’ve even recommended it) was to write your title in the format keyword phrase - something else keyword phrase e.g. “Meta Keywords - Using Meta Keywords.”
Multiple headlines using the keyword phrase While you do want your keyword phrase to be included in your main H1 headline, repeating it in every subsequent subheading can be too much and look like over-optimization. Strive to create headlines, headings, subheadings, and text that is natural sounding and only uses the keyword phrase where appropriate.
Including the keyword phrase in additional, less visible, locations This is the first place to look for keyword stuffing. If all of your image alt text, noscript elements, and other elements that don’t display on the page include some version (or worse, multiple versions) of your keyword phrase, you should change them to make them more natural.

What to Do When Your Site Plateaus or Falls in Search Results

The first inclination of most beginning and intermediate web designers when they see a plateau or drop in search referrals is to immediately go in and re-optimize pages. While there is some benefit from fixing the problems I listed above and editing content to keep it fresh and up-to-date, most of the time, your inclination to edit files is going to result in more over-optimization penalties, not less.

Instead, do what the most successful sites on the web do: write more content.

Adding new content to your website has a lot of SEO advantages:

Search engines see that your site is still relevant and focused on delivering content to customers. Since a search engine is useless without something to search on, by providing more content, you are providing the chance for more results.
More content means you will have expanded content. Once you’ve written about one aspect of a topic, you can then expand on it and write about other aspects. And after a while, if you continue to regularly add content on that topic, your site will be more and more valued as a place to find information on the topic.
More pages of content provides more pages to be found in search. This is simple math. If I have a 10 page site and you have a 1000 page site, you have 100 times as many chances as I do to get a page view or search referral.
New pages provide more linking opportunities. And every time you link to your older content, that sends a signal to Google and the other search engines that that content is still relevant as well.
Regularly added content tells the search engine that your site is still maintained. And if you keep to a schedule, the search robots will figure that out and start spidering your site more often.

Remember, too, that adding more content doesn’t have to be long. While longer articles might do better in Google, just adding a 2-paragraph blog post every day is enough to show that you’re paying attention to the site. In fact, it’s best to come up with a schedule that you can stick to, whether it’s once a day, once a week or once a month. More is better, but staying consistent is important too.

By regularly adding new content to your site, and doing basic maintenance on your older pages (but not worrying about re-optimizing for search on those pages) you can get better search engine placement than you can by just fiddling with the same 100 pages over and over.

Remember, write more content!

Adobe Creative Cloud 2015 - What Web Designers Will Like

Fri, 19 Jun 2015 12:46:46 +0000

Adobe has announced a bunch of updates to the Adobe Creative Cloud. The biggest changes are that they are releasing updates to 15 apps within the Creative Cloud as well as including a new service: Adobe Stock.

If you had Creative Cloud last year, you may remember the day when your hard drive space was sucked up by an entire new copy of all your Adobe applications. If you had a gigantic hard drive, you may not have noticed, but if your laptop is like mine, the 40GB you had free was suddenly not nearly enough. Yes, I appreciated the ability to check things in the old version of Photoshop CC and Dreamweaver CC, but when I couldn’t save any files because my hard drive was full, the duplicate copies of the apps got annoying. This year, Adobe has learned from that mistake and is making the way you install the new version an option. In other words, if you want the old version side-by-side with the new, you can do that. But if you just want your current version to update to the latest version, you can do that instead. Thanks for listening Adobe!

Adobe Enters the Stock Photo Business

The big news of interest to web designers is that Adobe is now entering the stock photo business. Last year they purchased Folia, and now they are integrating that service into the Creative Cloud in the form of Adobe Stock. With this service, Adobe customers will be able to purchase stock photos and illustrations right from within the Creative Cloud products. Plus, as a Creative Cloud member, you will get access to reduced prices on the images.

If you are a photographer or illustrator you will be pleased to learn that Adobe will also be paying for stock photos and illustrations. They plan to offer competitive royalties for creatives that add to the Adobe Stock library. This is great news for designers who also sell photographs or illustrations.

Android Apps Finally Available

If you use an Android device you will finally be able to use Brush, Shape, and Color on your devices. This has been a long wait, but these apps as well as the new app, Hue, are available on the Android store.

Changes to Dreamweaver

Dreamweaver CC (2015) adds some new features. Nothing really groundbreaking, but will make some web development tasks a bit easier. Some of the new features include:

Integration with Adobe Stock You can now find the perfect images for the websites you are building from right within Dreamweaver. Adobe Stock is new with this release, but there are already over 40 million images to choose from. Single images are not cheap, but if you’re already a Creative Cloud member, you can get 10 images a month for around $3 an image (10 per month for $29.99). Plus, if you use less than your 10 in a month, they roll over up to 120 images.
Preview on Any Device As long as your devices are all on the same WiFi network, you can use either a QR code or type in a URL on your devices to view your Dreamweaver pages on them. You can also inpect the elements on the devices and preview on multiple devices at once. When you make changes in Dreamweaver, they are instantly updated on the devices.
Bootstrap Starter Templates You can now create responsive websites with Bootstrap components using built in Bootstrap starter templates.
Batch Extract from PSDs With the Extract feature, you could extract images from a Photoshop file. But now you can extract multiple images at once using the batch extract feature. This will make getting production-ready images that much faster.
Code editor tab completion even more robust Now you can use shortcuts to create common, complex blocks of code. Things like nav>ul>li.link{Link $}*5 turns into a 5-element unordered list each with a class of “link” e.g.
```
<ul>
	<li class="link">Link 1</li>
	<li class="link">Link 2</li>
	<li class="link">Link 3</li>
	<li class="link">Link 4</li>
	<li class="link">Link 5</li>
</ul>
```
Shortcuts in CSS too I used to use TextExpander for all my CSS and HTML shortcuts, but now Dreamweaver has a bunch built in. This will make it that much faster to write HTML and CSS in the code editor. They use Emmet for code completion and there are lots of shortcuts you can learn.
Link checks your code for you As you type your HTML and CSS, Lint inside Dreamweaver CC (2015) checks your code and validates that it is correct. It will highlight incorrect lines in red, and if you click on them you will get more information about what the problem is so you can fix it.

There are lots of other small features added to Dreamweaver, but those are the highlights.

Changes to Muse

Adobe Muse has also been updated in the 2015 release. Like Dreamweaver, you can now get stock photos from Adobe Stock right inside Muse CC (2015). You can also get Adobe Typekit fonts right from within Muse.

The widgets panel now includes shopping carts and RSS blog feeds. You can even style the feeds you pull in. There are lots of widgets both free and paid that you can use to improve your site. I am happy to say that you can finally add radio buttons and checkboxes to contact forms in Muse. This makes it easier to get more accurate information from your form submissions.

CC 2015 Release is Pretty Exciting

CreativeSync is a very useful tool to keep your files and images up-to-date across all your computers and devices. I have already created documents on my laptop and then finished them on my desktop as well as worked with images on my iPad that I finished on my laptop or desktop. It’s a very convenient feature.

There are updates to the following apps in Creative Cloud (2015):

AfterEffects
Audition
Dreamweaver
Edge Animate
Flash
Illustrator
InCopy
InDesign
Lightroom
Media Encoder
Muse
Photoshop
Prelude
Premiere Pro
SpeedGrade

Comments:

Maxie - Dec 4, 2016

My codеr is trying to convince me to move to .net from PHP. I have alwaqys disliked the idеa because of the ᥱxpenses. But he’s tryiong none the less. I’ve been using Movable-type ⲟn numerous websitᥱѕ for about a year ɑnd am worried about switching to another platform. I have hеarɗ ᴠery good things ɑbout blogengine.net. Is there a way I can import all myү woгdpress posts into it? Anny help would be grreatly appreciated!

Jennifer Kyrnin - Jan 2, 2017

I wouldn’t recommend it, personally. .Net and PHP are vastly different, so things that work fine on your PHP site won’t work on .Net. It will also require a lot of work to move. I used to use MovableType but it’s been a long time. And I don’t have any knowledge about Blogengine.net but I’d be willing to bet with a name like that they can import wordpress posts without an issue.

Buy press releases - Jan 3, 2023

I read this paragraph completely regarding the resemblance of latest and preceding technologies, it’s awesome article.

สมัครสล็อต - Feb 2, 2023

Hello, i think that i saw you visited my website so i came to “return the favor”.I’m trying to find things to improve my web site!I suppose its ok to use a few of your ideas!!

The Lazy Way to Mobile-Friendly

Sat, 18 Apr 2015 17:26:23 +0000

Or How I Made a Simple Change on a Bootstrap Site to Please Google

Like most web designers I know, I am frantically trying to get many websites mobile-friendly in time for Google’s deadline of April 21st. Knowing that Bootstrap is a very mobile-friendly framework, I have been migrating a lot of the sites I manage into it. This has worked great, but as the deadline looms ever nearer, I have been cutting more corners in getting the sites ready.

And at this point, most of the sites that I’ve left hanging are my own.

So today, I decided to check my branding site http://htmljenn.com/. And as I suspected, even with Bootstrap, it came up as not friendly.

](/images/screenshot515.jpg) I knew that header image was too big!

As you can see from the picture, my headline graphic is way too large for most mobile screens. I knew this, but I was probably hoping it would fix itself overnight or something. It didn’t.

Luckily, Bootstrap offers a feature that makes it easy to get rid of the offending graphic (for now) and replace it with text that is mobile-friendly: The Bootstrap responsive utility classes.

There are 16 classes you can use in Bootstrap to show and hide content from different sized devices. They are:

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

You may notice that I only listed eight classes above. That’s because the .visible classes each have three variations:

.visible-*-block
.visible-*-inline
.visible-*-inline-block

Since I realized that most likely the real problem with the mobile site was that the banner image was too big, I decided to hide it (for now) on smaller screens. Instead, I would show them the site title in an <h1> tag.

So I added the <h1> site title (<h1>HTMLJenn</h1>) and then added the class .hidden-md to it. This would hide the site title from any devices of medium size or larger.

Then I hid the banner image by adding the class .visible-md-block to it. This makes it visible only to devices of medium size or larger.

After I uploaded these simple changes, I tested on Google and got:

[caption id=“attachment_1131” align=“aligncenter” width=“300”] It’s mobile-friendly!

Hooray! My site is mobile-friendly. Now to work on making it look less ugly! But that can wait until I’ve finished fixing all my other sites!

What To Do to Make Your Site Mobile Friendly

Test your site to see if Google feels it is mobile friendly.
If it isn’t, don’t panic. Google will not delist your site. This bears repeating. Just because a site is not mobile friendly does not mean that it will not show up in Google search. It just means that when someone on a mobile device searches Google, your site will not rank as well as a similar site that is mobile friendly.
If it isn’t already, add your site to Google Webmaster Tools and follow the instructions in the Google Mobile SEO

There are many ways you can make your sites more mobile friendly. The Bootstrap framework is one way to get a responsive web design fairly quickly.

More Help with Bootstrap, Mobile-Friendly Design, RWD, and Google’s Change to Search Results

Order my book Sams Teach Yourself Responsive Web Design in 24 Hours
Get Bootstrap
Pre-order Sams Teach Yourself Bootstrap in 24 Hours by Jennifer Kyrnin
Read Mobile First Responsive Web Design by Brad Frost
Test your site with the Google Mobile Friendliness Test from Google Webmaster Tools
Read Finding More Mobile Friendly Search Results from Google Webmaster Central

No More Napkins

Mon, 30 Mar 2015 20:09:12 +0000

I can’t tell you how many times I’ve grabbed a napkin or piece of scrap paper and scribbled out a mockup for a design idea I have. I have done this with clients, for my own sites, even for ideas that come to me at midnight. But now Adobe has released an app that lets me scribble my ideas on my iPad and they appear as a tidy mockup like magic. And it even pastes in placeholder text without my needing to.

I had the opportunity to play with the new comp designer from Adobe, Adobe Comp CC, and it’s a lot of fun, but what I found most enjoyable was how easy it was to draft a quick mockup. And instead of looking like horrible stick-figure sketches, Adobe Comp converts them into nice, sharp mockups. I can even include my own images that I’ve uploaded to the Adobe cloud.

But I find Comp hard to explain in writing, so I’ve created this video for you to see what I mean.

https://youtu.be/M41D4M7w_tk

Comments:

Nicole ll - Mar 2, 2015

Thanks for sharing this,Karen. I wasn’t aware the s existed.

Jennifer Kyrnin - Apr 4, 2015

It only just came out the day I released that post. And my name is Jennifer, not Karen. :-) Thanks for your comment.

Why Bootstrap?

Fri, 13 Mar 2015 23:22:00 +0000

Since I’ve started writing my latest book, Sams Teach Yourself Bootstrap in 24 Hours, I’ve been asked a bunch of times “why Bootstrap?”

Bootstrap Makes Development a Lot Easier

Bootstrap is a framework that you can use to help speed up your page development time. A lot of the decisions that every web designer has to make for every website have already been made for you and the resulting calculations and programming decisions have been taken care of. Plus Bootstrap includes a lot of pre-made components that are easy to add into your website.

For example, I added a rotating carousel to a photo gallery site. When I was doing it myself, it took me several days of design and coding work to get a rudimentary carousel up. When I switched the site to Bootstrap, I was able to put up a much fancier carousel in about 10 minutes. I spent more time deciding what pictures to include and what the captions should say than I did building the HTML and JavaScript.

Responsive Grid

One of the coolest things about Bootstrap is the responsive grid system. It has four device sizes it supports and this lets you get fairly specific in how you want your pages to display in large, medium, small, and extra small screens.

With the Bootstrap grid you get up to 12 columns and you can divide your pages into any combination of columns and widths. What’s particularly nice is that you don’t have to do any math yourself. Bootstrap has the column and gutter space defined for each grid width and all you have to do is set a class (or several) on your elements.

Bootstrap is Not All Perfection

While I do like using Bootstrap, and I think it’s a great way to get a good looking site up quickly, there are some things I don’t like about it.

The default color scheme and other styles means many Bootstrap sites look identical.
There are no fallbacks included if JavaScript is disabled.
Presentation and interaction are not separated from the content because many plugins and components are added using data attributes and style classes.

The first two issues can be fixed by taking more time to work on Bootstrap sites. It’s possible to adjust your Bootstrap defaults to colors and styles that fit your own aesthetic. And you can always add additional styles to overwrite the Bootstrap look and feel.

While Bootstrap doesn’t include JavaScript fallbacks by default, good designers provide their own. And even if you don’t want to do that, the fact is that very few users have JavaScript disabled, so it’s not going to impact most websites.

The last one is the one that bothers me the most. It is considered best practice to separate HTML (content layer) from the CSS (presentation layer) from the JavaScript (interaction layer). But Bootstrap relies on multiple CSS classes on nearly every element to define both what it is and how it should look. And there are a lot of classes in Bootstrap, many of which seem to do nothing or are redundant. This makes maintaining, reusing and scaling a Bootstrap site more challenging than it might need to be.

This last issue is the reason I don’t use Bootstrap for every site I manage. I use it when the ease of getting a good looking site up quickly is more important than whether it can be maintained by 10 different people, three of whom haven’t started working with me yet.

I Use Bootstrap Where it Makes Sense

And when it doesn’t make sense, I use something else, or nothing.

For instance, you might notice that this website does not use Bootstrap. And it is unlikely that I will be changing that any time soon. But I still like Bootstrap. And after you see my book you will too!

Starting on my Next Book

Thu, 15 Jan 2015 01:17:22 +0000

I’ve finished 25% of my latest book Sams Teach Yourself Bootstrap in 24 Hours. This has proven to be very fun to write. Bootstrap, if you’re not familiar with it, is a web design framework to help you build web pages that have a consistent design and look and feel. It includes things like a grid system and powerful CSS styles; components like icons and navigation; and a bunch of JavaScript plugins to make building dynamic web pages that much easier.

Some of the things I love about Bootstrap include:

It is responsive by default. So everything you learned in my last book Sams Teach Yourself Responsive Web Design in 24 Hours is still useful, but you can implement it more quickly with Bootstrap.
The grid system is very easy to use. And it’s easy to create multiple grids for different device sizes.
Bootstrap creates a good looking typography and color iconography framework for your website. You don’t have to worry about how your text will look. And if you need to show information like warnings or success states visually, Bootstrap has you covered.

And there is so much more too Bootstrap than those features. I hope you’ll be willing to join me on this adventure with a great framework.

Comments:

Petro Rautenbach - Jan 4, 2015

Hi. I live in South Africa and our postal service is very unreliable. Will you be publishing your books in e- format soon?

Jennifer Kyrnin - Jan 5, 2015

The book is available in Kindle format from Amazon, epub from Barnes and Noble, and PDF and other formats from InformIT http://www.informit.com/store/responsive-web-design-in-24-hours-sams-teach-yourself-9780672338380 as well as in other formats listed on my “How to Order” page. If you aren’t seeing it available from your favorite ebook distributor, please let me know and I’ll ask my publisher to look into it.

Language Codes (ISO 639-1)

Fri, 09 Jan 2015 00:21:55 +0000

ISO 639-1

It’s a good practice to include the language code of your web page content in the HTML tag like this: <html lang="en"> If your page is in English, that’s what you’d write, otherwise, you should use the code for the language of the page. These codes are:

Language

ISO Code

Abkhazian

Afar

Afrikaans

Albanian

Amharic

Arabic

Aragonese

Armenian

Assamese

Aymara

Azerbaijani

Bashkir

Basque

Bengali (Bangla)

Bhutani

Bihari

Bislama

Breton

Bulgarian

Burmese

Byelorussian (Belarusian)

Cambodian

Catalan

Cherokee

Chewa

Chinese

Chinese (Simplified)

zh-Hans

Chinese (Traditional)

zh-Hant

Corsican

Croatian

Czech

Danish

Divehi

Dutch

Edo

English

Esperanto

Estonian

Faeroese

Farsi

Fiji

Finnish

Flemish

French

Frisian

Fulfulde

Galician

Gaelic (Scottish)

Gaelic (Manx)

Georgian

German

Greek

Greenlandic

Guarani

Gujarati

Haitian Creole

Hausa

Hawaiian

Hebrew

he, iw

Hindi

Hungarian

Ibibio

Icelandic

Ido

Igbo

Indonesian

id, in

Interlingua

Interlingue

Inuktitut

Inupiak

Irish

Italian

Japanese

Javanese

Kannada

Kanuri

Kashmiri

Kazakh

Kinyarwanda (Ruanda)

Kirghiz

Kirundi (Rundi)

Konkani

Korean

Kurdish

Laothian

Latin

Latvian (Lettish)

Limburgish ( Limburger)

Lingala

Lithuanian

Macedonian

Malagasy

Malay

Malayalam

Maltese

Maori

Marathi

Moldavian

Mongolian

Nauru

Nepali

Norwegian

Occitan

Oriya

Oromo (Afaan Oromo)

Papiamentu

Pashto (Pushto)

Polish

Portuguese

Punjabi

Quechua

Rhaeto-Romance

Romanian

Russian

Sami (Lappish)

Samoan

Sangro

Sanskrit

Serbian

Serbo-Croatian

Sesotho

Setswana

Shona

Sichuan Yi

Sindhi

Sinhalese

Siswati

Slovak

Slovenian

Somali

Spanish

Sundanese

Swahili (Kiswahili)

Swedish

Syriac

Tagalog

Tajik

Tamazight

Tamil

Tatar

Telugu

Thai

Tibetan

Tigrinya

Tonga

Tsonga

Turkish

Turkmen

Twi

Uighur

Ukrainian

Urdu

Uzbek

Venda

Vietnamese

Volapük

Wallon

Welsh

Wolof

Xhosa

Yiddish

yi, ji

Yoruba

Zulu

Are you interested in learning responsive web design?

Thu, 08 Jan 2015 20:38:54 +0000

I’m excited to announce that my latest book Sams Teach Yourself Responsive Web Design in 24 Hours is out and available in bookstores and online.

If you have any questions about the book, or find any problems, I’d love to hear about it. Feel free to post comments below.

Sams Teach Yourself Responsive Web Design with in 24 Hours

This book is intended for web designers who already build websites but are interested in making their sites responsive. But it can also be used by motivated novices who have some understanding of HTML and CSS and want to build sites that use the most modern techniques.

In it you will learn the basics of RWD as well as how to make things like images, videos, tables, and forms responsive. You’ll learn about tools that are available to help create responsive sites and there is a chapter dedicated to best practices of RWD as well as showcasing multiple websites that are already using RWD to provide great designs for customers on multiple devices.

If you’ve been wanting to learn RWD, this book will make it easy.

Sams Teach Yourself Responsive Web Design in 24 Hours is available in paperback and ebook formats. Plus, you can get a Learning Lab edition that also includes videos demonstrating what you learned as well as interactive quizzes to help test your knowledge. Order your copy now. You can also look at the book’s code samples online.

// < ![CDATA[ // < ![CDATA[ // < ![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “http://forms.aweber.com/form/47/1434307847.js"; fjs.parentNode.insertBefore(js, fjs); }(document, “script”, “aweber-wjs-d5r35b00s”)); // ]]>

How to Write a Web Design Contract

Mon, 17 Nov 2014 13:00:01 +0000

When you’re starting out as a freelancer, you need to know how to write a contract. It can be tempting to do work without a contract, and most web designers have done it a few times. But if you don’t have some sort of written agreement (even if it’s just an email message indicating what you’re going to do and for how much), you run a very real risk of not getting paid for your work.

One of the main reasons new freelancers worry about contracts is because they assume a contract must be written by a lawyer and have lots of fancy text and multi-syllable words. But a contract is an agreement between two parties. For most web design projects, there are a few things you need to include in your contract, and as long as both parties agree, the contract should be binding.*

Contracts can be intimidating for customers as well. Some clients may feel offended at being asked to sign a contract. But contracts protect both you and the client.

What Information to Include in a Web Design Contract

While a contract can contain anything that you or your client want, there are a few things that are standard, including:

What work will be done
What services or work that fall outside the main body of work
Where the designs will be hosted
How long it will take
Cost
How maintenance will be taken care of and by whom
Contact information for both client and designer
Other boilerplate provisions

The Statement of Work

The statement of work is the main area of the contract. It details the work you will do for the client. The more explicit, the better. For example, it’s better to say

“I will create five (5) web pages for the ABC company comprised of two to five (2–5) paragraphs of text and three (3) images provided by ABC company.”

than

“Build a website for ABC company.”

Include details like:

Requirements defined by the client
HTML development planned
Programming languages to be used
CMS tools for the site, if any
Browsers and mobile devices to support

The more details you include in your contract, the less likely you’ll be caught by scope creep.

Scope creep is when a client keeps asking you to do more and more work without changing the terms of the contract. In other words, they want you to do more without paying for it. If you don’t get a contract agreement with very clear work details, you can end up working for months on a project without ever getting paid because the project is never “done” to the client’s satisfaction.

Your contract should include how you will handle scope creep when it shows up. That is dealt with in the pricing section of your contract, but you can put provisions in the statement of work for adding features.

Services Outside the Main Body of Work

Many web design clients want more than just web design work. This could include search engine optimization (SEO), marketing and promotion of the web page, social media work, and content creation. Your contract should make clear what other services you will (or may) provide for the client.

Many freelancers use this portion of the contract to market other services they may offer beyond what the main contract is providing. For example, a graphic artist might indicate that she can create images for the website for an additional fee, while an SEO expert might offer an SEO evaluation if the client is willing to pay more.

The key to this section is to make it clear that these are additional services beyond what is being offered in the contract and that these services will incur extra costs and might take additional time.

The contract should indicate how the client can add these services. For example, you might be willing to create up to five videos for the client if they give you three weeks notice (and agree to the extra cost), but they need to tell you at least three weeks before the videos can be done. Or you might only be willing to add on extra services if the client requests them before the final contract is signed. It doesn’t matter how you accept this work, only that you make it clear to your client.

Hosting and Domain Names

Web hosting and domain names are often a place where freelance contracts fail. Either the designer fails to specify their need for access to the client’s site or the client assumes that the web designer will set up and pay for all hosting and domain fees, or something else equally annoying and expensive for you or the client.

Your contract should specify details about the hosting and domain name so that there is no confusion. Include things like:

Where will the site be hosted?
Who will pay for the hosting?
What domain will it use and who will be listed as contacts?
Where will testing and evaluation be done?
Who will pay for hosting and domain name service?

I have heard stories from web designers who did tons of work for a client only to lose most of their fee because they were expected to pay for and host the website themselves. I have been listed as the “technical contact” on domain names for sites that I have no access to, and so can’t make any technical changes if there’s a problem. In one case I got stiffed the cost of a five-year domain renewal because I had set up the initial domain and the client did not update the DNS provider when they took over the site.

If you don’t specify domain and hosting information in your contract, your clients can be hurt too. I know of clients where unscrupulous web designers held their content hostage until they paid more. In one case, the client’s website was completely deleted because the web designer got angry and there was no contract in place. By showing that you care for your client’s well-being as well as your own, your contracts will be viewed more favorably, and they will be more willing to sign and pay you.

The other thing you should indicate is what type of access you will need to put the website live. This is an issue for redesigns, but can apply to new sites as well if the client is handling hosting and DNS themselves. The contract should indicate things like:

How you’ll connect to the server: SSH, FTP, CMS, or some other way
How long your connection should be available to you. I recommend at least a month after the project is complete to fix any issues that come up after launch
Who will maintain access accounts. Will you be administering their site or do they have someone on staff who will.

Timing

Any web design contract should include how long it will take you to do the work and when you anticipate it being completed. It should include things like due dates for deliverables from both you and the client and dates when partial or complete payments are due.

It can be tempting to put an absolute date, such as November 6, 2014 in the contract, but this is a bad idea. Web design requires interaction with at least two to three different people and groups to get a project ready for launch. And while you can control how long it takes you to complete your portion of a task, you have no control over the other people who might have content or information you need to complete your job.

For example, consider the following scenario. I agreed to do a job for a small website. My job was to create the design for the site and post the content (images, text, and video - all provided by the client) into the design. I would receive final payment after the website was built, approved, and launched.

For that project, I knew that it would take me about a week to complete the HTML, CSS, and JavaScript for the design. I posted it to a testing server once the design was complete. Then I had to wait for the images, text, and video. That took over a month to receive.

Once I received the content, I posted it to the testing server to receive approval from the client that it was ready to launch. This took another month. Once I received approval, I moved the pages to their live server and the job was complete.

If I had set absolute dates for when the website would be done, I would have almost certainly been in breach of contract, not because I was late with my deliverables but because the client took two months to provide content and approve the design.

Even still, many clients want absolute dates. They will tell you “I want this site up last week!” and express huge concern for the timing in the negotiation phase. But then when they need to give you something, even something as simple as an account on their CMS, it will take a lot longer than you expect it to.

This is why I always word my contracts in the form:

“Creation of HTML will be complete within seven (7) days of receipt of SSH access to [client’s] server.”

In other words, if work I need to do cannot be done until I receive something from the client, then I write that into the contract.

Be aware that this can backfire as well. For example, I once said I would complete a design in five business days after the client gave me the content. The client then gave me the content the day before a four-day school holiday. The days were still business days, but there was no way I was going to be able to compete the job in the time I had mentioned. In this situation, you should talk to your client. People get sick, things happen. Most clients are understanding. But you may be expected to adhere to the letter of the contract.

So your contract should have due dates listed in it, both for you and for your clients. If you are asking for interim payments, when they are due (and what triggers them) should be included in those due dates.

If you need to estimate how long something will take, be sure to indicate that in the timing section. I have found that if your times are estimates, it’s better to provide a range, i.e. two to four (2–4) business days. And always give yourself more time than you think you’ll need.

The last thing you want to include in your timing section is a “backout“ or expiration date. This prevents the client from receiving your contract, ignoring it for two years, and then coming to you and demanding you honor it. And, yes, I have seen this happen. You should include how long they have to respond to the contract as well as how long the contract terms are valid.

Pricing

For most people, whether it’s clients or freelancers, this is the most stressfull section of the contract. I’m not going to go into detail about how you should set your prices in this article, but you should have some idea for the contract.

Your contract should indicate if you’re going to charge by the hour or by the project and what additional (if any) charges might be applied.

If you offer additional services for an additional cost, that cost should be spelled out here as well, and include what needs to happen for them to be invoked.

If you are asking for interim payments before a project is complete, you should indicate how much they will be and when they are due. You can set absolute dates or base them on milestones within the project being completed.

Maintenance

One feature of most websites is that they are always being updated. And you and your client need to decide how maintenance of a site will be handled once your design work is done. Who is going to do it? How will it be paid for (hourly rate? monthly fee? etc.)?

If the client is going to maintain the site, do they need training? Are you going to do the training? Is that training included in the entire project cost or is it an extra charge?

Contact Information

This is another very important section that you should include in all your contracts: contact information for both you and the client. I recommend getting as much contact information as possible, including phone numbers, email addresses, and mailing addresses.

Boilerplate Content

Boilerplate is standardized language found in contracts. Most of the time these are provisions that just don’t fit anywhere else. These are often included under a title like “Miscellaneous” and are placed at the end of the contract. Freelance web design contracts include boilerplate like:

Arbitration - indicating that any disputes will be resolved through arbitration, not a lawsuit
Jurisdiction - where the lawsuit (state and country) must be filed
Notice - how notice for things like termination of the contract must be provided
Assignment - whether either party can transfer the rights in the contract
Relationships - most web designers are not employees of the company they are contracting for and this spells out their exact relationship
Copyright - who owns the copyright on any content created (typically, web design work is considered “Work for Hire” and all copyright reverts to the site owner)
Attribution - where and how attribution is displayed for the work done on the website
Confidentiality - guarantees that the parties will not disclose certain information

You can learn about many other common boilerplate text at NOLO: Law for All.

Now Go Out and Write Your Contract

Once you know what the parameters are for the project, you can write your contract. By including all the sections listed above you know you’ll have covered the majority of web design contractual issues.

// < ![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “http://forms.aweber.com/form/88/1475240988.js"; fjs.parentNode.insertBefore(js, fjs); }(document, “script”, “aweber-wjs-wat4xzsog”)); // ]]>

Comments:

Lorin Friesen - Aug 0, 2016

Yes, I would like to see the contract template. Your web creation information is most helpful, thanks.

Jennifer Kyrnin - Aug 0, 2016

Hi Lorin, The form disappeared from the page. Weird. I’ve put it back. https://www.html5in24hours.com/write-web-design-contract/#freecontract Thanks for your comment, Jennifer

RWD Inspiration - fun effects on mobile and desktop

Sun, 19 Oct 2014 17:35:35 +0000

I love seeing web designers doing fun and interesting things on their sites. But the ones that I really like are the ones that reflect the theme of the page or article. This is the kind of RWD inspiration I look for every day.

This is an article about lead poisoning which is a serious issue. But serious issues are hard to read, because who wants to read a depressing article? The Seattle Times web team decided to dress it up a bit with some fun features.

On the desktop version the pull quotes fully appear when you mouse over them and the headline gets completely revealed when the mouse runs over it. But I had the most fun on my iPad when I viewed this page. There, when you tap the screen fingerprints appear and slowly fade away.

[embed]http://html5in24hours.com/wp-content/uploads/2014/10/loaded-with-lead.mp4[/embed]

You may not think this is an example of responsive design, because the layout doesn’t change on the iPad from the desktop, but it is. This design responds to the fact that on an iPad, you are tapping the screen with your fingers—a mouse click wouldn’t make a fingerprint!

Updates from Adobe - a Fun New Adobe App

Mon, 06 Oct 2014 18:50:51 +0000

Adobe released a number of new apps and features today at the MAX convention. There are some new features in Photoshop CC, Illustrator CC, InDesign CC, and Premiere Pro CC. But the ones I found most interesting were the changes to Muse CC, Dreamweaver CC, and the new free Apps for iOS.

Muse CC

Muse finally has secure FTP support which I find very important. In fact some of the servers I work on don’t allow any connection other than secure FTP - which meant until now I couldn’t use Muse for them. It also now has Find and Replace. This is a critical feature for web editors as when you’re working on a large site it can be difficult to know you’ve found all the instances you need to change if you have to do it by hand. For one site I worked on, we had to provide discounts to customers because one page listed the price from the previous year, and we didn’t catch it when we updated the site with the new price. Another great new feature of Muse CC is the SVG import. Now you can create your images as vector graphics and import them directly into your web page. This is great for doing prototyping in Illustrator and then moving directly to the website. SVG images give you so many options beyond the standard web images.

Dreamweaver CC

Dreamweaver CC doesn’t have a lot of updates this time, but there are a few that are interesting. It has 64-bit support, plus they updated Live View. You can now edit while in Live View - which is a huge improvement. I hardly ever leave Live View now. I love that you can drag and drop images into Live View—so much easier to do! There are also a bunch of new starter templates you can use to create different kinds of pages including Responsive Web Designs.

Mobile Apps

But beyond Dreamweaver and Muse, Adobe now offers a bunch of mobile apps that all connect with your Creative Cloud account to allow you access to your creations from any device. There are three new apps in this release:

Adobe Premiere Clip
Brush CC
Shape CC

The one I’m most interested in is Brush CC.

Brush CC

Brush is a new app that will help you create your own custom brushes right on your iPad or iPhone. You start by creating a line or shape or whatever you want as a brush. Then you can modify it so that it displays exactly as you want it to. You can adjust things like:

display as a ribbon, or just a scattering of marks
color or black and white
have it repeat linearly, mirrored, or stretch to fit the space
crop it to make it a seamless brush or your own dotted line
add transparency
have the ends fade in and out or taper

There are endless ways to create your brushes.

Then, once you’ve created your brush, you can save it to your Creative Cloud library and use it in Photoshop CC and other connected applications. I can see myself spending a lot of time in this app.

Download Brush CC from iTunes

Shape CC

This is another new app that looks like it could be a lot of fun. However in my first attempt at using it, I found it fairly difficult. There is no image stabilization, so I found it difficult to focus on just the item I wanted. It also took me a while to figure out how to edit my shapes, and when the vectors were too connected, it was difficult to get just the lines I wanted and none that I didn’t. However, I then imported my shape into Illustrator without an issue.

There are no pre-defined shapes in Shape CC but it is reasonably easy to use other than the above concerns, I created two new shapes very quickly.

Download Shape CC from iTunes

Comments:

nick Jubrey - Oct 2, 2014

Thanks for the update. Still using cc for now.

Could the Shellshock Exploit Destroy Your Website?

Fri, 26 Sep 2014 18:15:03 +0000

UPDATED October 7, 2014: Keep Patching!

There have been several new patches since Shellshock was first patched, and you need to make sure that your server is still up-to-date, even if you patched on the first day.

Learn What You Need to Do to Protect Your Site

Shellshock is a huge security threat to the internet, but if you’re like most people, the technicalities underlying it make it hard to get too worried about other than in a general sense. After all, you may be thinking “Yes, I worry, but I worried about Heartbleed last month and nothing bad happened, so is this another one of those?”

Let Me Put the Dangers Shellshock Poses in Personal Terms

It’s one thing to hear that the exploit is “using fast-moving worm viruses to scan for vulnerable systems and then infect them…” (source: The Times of India) or that they are creating botnets to attack Akamai with a distributed denial of service (DDoS) (source: itnews).

Yes, those sound bad, but they probably wouldn’t immediately affect your bottom line. So, it might be enough to just wait and see what happens.

But if You Run a Website Your Server Could Get Infected

And if your server gets infected the attackers could do all kinds of things that could directly impact you and your business. Things like:

Delete every page on your website
Deface every page on your website
Take control of your web database and steal all the data
Add back-door functions to your web forms and scripts to steal your customer’s information as they submit it to you—things like credit card numbers, email addresses, and any other information

I have had to deal with scenarios where portions of a website were deleted, defaced or hacked, and it’s not fun. Do you really want to have to report to your customers that their credit card information may have been stolen? Do you really want to rebuild your entire site from scratch? I know I don’t.

What To Do About Shellshock

The first thing you should be aware of are the devices and tools you use that might have Bash on them. This could affect things like: web servers, routers, Linux and Mac OS X Computers, and other devices.

If You’re Running a Web Server

If you run your own web server, you should immediately go and patch it. This exploit affects nearly any web server running Bash and nearly all Linux and Unix boxes run that. Here is a list of some popular Linux vendors and their information on patching for Shellshock:

If You Host Your Website

If you don’t run your own web server, but you host on another site, you should find out if they are running on Linux (most hosting companies are) and if they’ve patched their server. There are several experimental tools available on the web that you can use to test your site.

Shellshock Bash Vulnerability Test Tool tests for HTTP exploits
ShellShock Tester tests ping exploits

And if you have access to a shell prompt on your web server, you can test using the following script. Just go to your shell prompt and type:

env x='() { :;}; echo vulnerable' bash -c 'echo yay'

If your server is vulnerable you’ll get a response of:

vulnerable
yay

If it’s not vulnerable, you’ll get a response of:

bash: warning: x: ignoring function definition attempt
bash: error importing function definition for \`x'
yay

Contact Your Web Hosting Provider

If you run these tests and your web server is vulnerable, you should contact your hosting provider immediately. Right after you contact them, you should then backup your entire website, including any scripts, databases, images and so on. Then if your server is attacked before your provider patches it, you have a current backup.

If You Run a Mac with Mac OS X

Mac OS X is currently vulnerable, and Apple has not yet released a patch. However Apple says “The vast majority of OS X users are not at risk to recently reported bash vulnerabilities…” (source: iMore). This is because the system is protected by default, and advanced Unix services would need to be enabled to disable that protection.

If you have enabled Bash on your Mac OS X system, you should take it back to the factory settings for now. Or you can patch it manually with the instructions at LinuxNewsPro but only do this if you know what you’re doing. If you don’t know what I mean by advanced Unix services, do not do anything. Just wait for the Apple patch.

If You Have Other Things Running Bash That Could be Attacked by Shellshock

Your best bet is to contact your support or service providers for them to find out if they have provided a patch. Many router companies have already got them up, or are working hard on a patch. Symantec also has created an Intrusion Prevention signature for protection against this exploit.

Comments:

Kenton - Dec 2, 2022

What’s up, all the time i used to check web site posts here early in the break of day, since i like to learn more and more.

Pokerstars Monte Carlo 2023 - Dec 2, 2022

As the admin of this website is working, no question very rapidly it will be renowned, due to its feature contents.

Drag and Drop Puzzle Code

Fri, 19 Sep 2014 17:22:52 +0000

Download the Code Now

The drag and drop puzzle is a fun game to add to a website, and with this code you can do it quickly and easily. Download the code here (PDF).

Share on Facebook Share on Twitter

You can also play the puzzle online.

Copy Editing and Tech Editing Done

Thu, 18 Sep 2014 00:00:57 +0000

I just sent in the last chapters after reviewing the copy edits and tech edits. Whew!

I am very glad to have such great editors - Jon, my tech editor, and Kitty, my copy editor. They both saved me from some major screw ups and I couldn’t have done this book without them! And as usual any errors that still make it through were not because of them.

Now I just need to finish the videos. I’ve got an editor working on editing them, so they should be done soon.

Pre-Order Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Now

Amazon

Barnes & Noble

And don’t forget to check out the free chapter if you haven’t already gotten it.

How to Speed Up Your Website with GZip Compression

Wed, 17 Sep 2014 18:25:22 +0000

If you follow the instructions on the Yahoo! YSlow best practices, one of them is to compress your pages using gzip compression (“Gzip components”). By doing this, you compress all your files before they are sent across the web, and then the browser decompresses them on the other side. This can significantly improve the time it takes your website to load.

How to Compress a Website with GZip and HTaccess

First check that your site is not already compressed. Some hosting providers do this automatically.

Go to GID Zip Test and enter your URL. If it returns that your site is compressed, you’re done.

[caption id=“attachment_892” align=“alignnone” width=“300”] This site is compressed

If your site is not compressed, you need to know what web server you’re using. If you’re not sure, ask your hosting provider, but the most common web server is Apache. Chances are, that is what your site uses too.

Compress Files on Apache

Go to the root directory of your web server and edit the .htaccess file in a text editor. If you can’t see that file, first make sure that hidden files are visible and if it’s still not there, then you should create a file with that name—including the dot (.) at the beginning of the file.

Add the following lines to the file:

\# gzip compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\\.0\[678\] no-gzip
BrowserMatch \\bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Upload the .htaccess file to the same location on your website (typically the root folder).
Test your site again using the GID Zip Test site.

If Your Apache Site Still Isn’t Compressed

Many hosting providers use virtual hosts for web hosting, and sometimes these don’t always recognize all commands in the .htaccess file. Your best bet is to talk to your hosting support to see if they can get it running. They will probably have to add the above lines (in step 2) into the httpd.conf or vhosts.conf file.

Compress Files on IIS

I don’t have an IIS server, so I cannot tell you exactly how to do it, but Microsoft has a comprehensive Technet document: Configuring HTTP Compression in IIS 7 that covers: configuring compression, enabling compression of dynamic content, and enabling compression of static content.

Comments:

Earl - Sep 4, 2014

Compression makes a world of a difference on page speed. I use Gzip on my own sites and average about a 61% reduction rate. Never knew about the GID Zip Test tool though, thanks for sharing.

HTML5 Allows Tables for Layout

Tue, 16 Sep 2014 00:08:32 +0000

If Someone Tells You That is Invalid, They are Incorrect

I’ve been writing HTML since 1995, and in that time various techniques and tools have come in and out of style. But one that has been especially troublesome is the idea of using tables for web page layout.

Back in the late 1990s, there weren’t a lot of ways to lay out your web designs. You could use the single-pixel GIF trick to add spaces, and you could ignore layout and hope the browser displayed your content in a legible way. So when tables became available in HTML, many designers (including myself) leapt upon them as a gift from the heavens. Finally there was a way to create layouts with fixed widths, specific placement of elements, and more. Web page editors made them really easy to create—even if you used tons of embedded tables to get exactly the look you wanted.

Soon, nearly every web page with any attempt at design was built with a <table>.

But HTML4 came out and said:

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.”

http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

And nearly every web designer who used tables for layout let out a scream of frustration. While I believe that CSS isn’t terribly hard to learn, many people have found it very difficult. And layout is particularly challenging. But for several years, we struggled and strained to learn CSS for layout and stop using tables for that purpose.

HTML5 Changed the Rules

According to the HTML5 specification, while tables for layout is not recommended, it is a valid way to design web pages. You just have to make sure that you indicate that the table is a “presentation” table, not a data table. Specifically:

“If a table is to be used for layout it must be marked with the attribute role=“presentation” for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.”

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

How to Use a Table for Layout in HTML5

In order to indicate that your tables are layout or presentation tables, rather than data tables, you can add one of two attributes:

role="presentation"This is the most compliant method, and is what the W3C recommends. But it requires that you change every web page you have written to include this attribute.
border="0"This attribute also indicates that the table is a presentation table, because most data tables include borders. Plus, most layout tables do not use borders, so you shouldn’t have to change anything on your pages.

There are other ways to indicate a presentation or data table:

Table Feature

Type of Table

<table role="presentation">

Presentation

<table border="0">

Presentation

<table cellpadding="0">

Presentation

<table cellspacing="0">

Presentation

Use of the CAPTION, THEAD, or TH elements

Data

Use of the headers and scope attributes on the TH element

Data

<table border="">

Data

<table border="1">

Data

Visible borders set with CSS

Data

Tables cause problems for web pages. They can be slower to load. They can be difficult for search engines to parse. And they mix the content and design, which is more effective when it’s separated.

Comments:

Dave Greene - Sep 2, 2014

What tools/techniques do you recommend for design and layout, Ms. Kyrnin? Thank you.

Jennifer Kyrnin - Sep 4, 2014

Hi Dave, That’s a great question, and deserves more than just a comment answer, so I’m working on a post that discusses this in detail. But in the meantime, here are some of my favorite tools: - WordPress - I use this for most of the sites I build and maintain because it’s easy to use and lends itself to many different types of sites. - Komodo Edit - this is a free text editor that I use to write all my articles, blog posts, and more. I often have to then convert the documents into something more formal like a Word Document or blog post, but Komodo Edit is where I start most projects. - Macaw - this is a web design tool that I love to use for working on new responsive designs. - Dreamweaver - I also use Dreamweaver for RWD, but not as often as I used to. - Chrome - I test everything in Chrome first and then move from there to other, less standards-compliant browsers - Photoshop - I edit most of my images in Photoshop to keep them as small as possible.

James M - Dec 0, 2014

I agree, there are far too many people dogmatically saying you must never use HTML tables for presentation rather than tabular data. In an ideal world, all browsers would support CSS3 flexible boxes, but in the real world, they don’t. And we have to design for the real world, so we have to design for the browsers that are actually being used, not the ones we would like to be out there. And the reality is that IE8 is going to be with us for some time yet, so designers of websites for the real world are stuck with not using CSS3 flex boxes for the foreseeable future. The very fact that CSS3 introduced flex boxes is an obvious indication that CSS2 specifications were lacking a good alternative to HTML tables. I have seen many methods to make CSS2 imitate tables, but they can often end up being no better than the hacks we used to use for IE6, etc. For example, the CSS text-align: justify is often used to align css divs, when the text-align is semantically intended only to apply to text. I do always try to avoid HTML tables for presentation if I can do it easily with CSS2. And I have used the text-align: justify to align divs. But if trying to emulate a table ends up with anything more than a few simple HTML and CSS workarounds, then I have to face the fact that it is coming to the point where the attempt to emulate a table is becoming counter productive, and instead, I use a HTMl table with role=“presentation”. Otherwise the claimed benefits of separation of semantics and content, and ease of alteration by CSS disappear, and the “don’t use tables for presentation” becomes a mantra without logical justification. As a case in point, I don’t think that there is any sensible alternative to using tables when, within a div that contains content, you want to include content that consists of three elements where the two side elements are fixed sizes and the central element expands to fit the remainder - and it contains a single line of text that you want centered. And where it degrades gracefully if the central element becomes very small. With a table it’s simple. Try doing that in CSS without using CSS3 and you end up with a big bunch of unwieldy code. Until the vast majority of browsers actually being used are CSS3 compliant, the reality is that there is no reason not to use HTML tables with the attribute role=“presentation” if there is is no sensible CSS2 alternative.

References

Wed, 10 Sep 2014 02:53:10 +0000

Planning a Website

Site Evaluation Spreadsheet

CSS and Styling a Website

CSS Color Codes

Special Characters and Codes

ISO 639-1 Language Codes

CSS Color Codes

Wed, 10 Sep 2014 02:49:58 +0000

There are many ways to write colors for web pages. While there are millions of colors in RGB, there are dozens of color names you can use. The basic color keywords and extended color keywords are both included in the CSS3 Color Module. Use these color keywords where ever you use color in your CSS. These CSS color codes will help you with your web designs.

Basic CSS Color Codes

The basic color keywords are CSS color codes that are supported in every browser. They are case insensitive and you can use them where ever you define colors in your CSS.

Color

Color Name

Hexadecimal

RGB

maroon

#800000

rgb(128,0,0)

red

#ff0000

rgb(255,0,0)

yellow

#ffff00

rgb(255,255,0)

olive

#808000

rgb(128,128,0)

purple

#800080

rgb(128,0,128)

fuchsia

#ff00ff

rgb(255,0,255)

white

#ffffff

rgb(255,255,255)

lime

#00ff00

rgb(0,255,0)

green

#008000

rgb(0,128,0)

navy

#000080

rgb(0,0,128)

blue

#0000ff

rgb(0,0,255)

teal

#008080

rgb(0,128,128)

black

#000000

rgb(0,0,0)

silver

#c0c0c0

rgb(192,192,192)

gray

#808080

rgb(128,128,128)

orange

#ffaa500

rgb(255,165,0)

Extended CSS Color Codes

These are also sometimes called SVG Color Keywords and Netscape Color Keywords. You can use the color name, the hexadecimal code, or the RGB code in your CSS to style your background and foreground colors.

Color

Color Name

Hexadecimal

RGB

aliceblue

#f0f8ff

rgb(240,248,255)

antiquewhite

#faebd7

rgb(250,235,215)

aqua

#00ffff

rgb(0,255,255)

aquamarine

#7fffd4

rgb(127,255,212)

azure

#f0ffff

rgb(240,255,255)

beige

#f5f5dc

rgb(245,245,220)

bisque

#ffe4c4

rgb(255,228,196)

black

#000000

rgb(0,0,0)

blanchedalmond

#ffebcd

rgb(255,235,205)

blue

#0000ff

rgb(0,0,255)

blueviolet

#8a2be2

rgb(138,43,226)

brown

#a52a2a

rgb(165,42,42)

burlywood

#deb887

rgb(222,184,135)

cadetblue

#5f9ea0

rgb(95,158,160)

chartreuse

#7fff00

rgb(127,255,0)

chocolate

#d2691e

rgb(210,105,30)

coral

#ff7f50

rgb(255,127,80)

cornflowerblue

#6495ed

rgb(100,149,237)

cornsilk

#fff8dc

rgb(255,248,220)

crimson

#dc143c

rgb(220,20,60)

cyan

#00ffff

rgb(0,255,255)

darkblue

#00008b

rgb(0,0,139)

darkcyan

#008b8b

rgb(0,139,139)

darkgoldenrod

#b8860b

rgb(184,134,11)

darkgray

#a9a9a9

rgb(169,169,169)

darkgreen

#006400

rgb(0,100,0)

darkgrey

#a9a9a9

rgb(169,169,169)

darkkhaki

#bdb76b

rgb(189,183,107)

darkmagenta

#8b008b

rgb(139,0,139)

darkolivegreen

#556b2f

rgb(85,107,47)

darkorange

#ff8c00

rgb(255,140,0)

darkorchid

#9932cc

rgb(153,50,204)

darkred

#8b0000

rgb(139,0,0)

darksalmon

#e9967a

rgb(233,150,122)

darkseagreen

#8fbc8f

rgb(143,188,143)

darkslateblue

#483d8b

rgb(72,61,139)

darkslategray

#2f4f4f

rgb(47,79,79)

darkslategrey

#2f4f4f

rgb(47,79,79)

darkturquoise

#00ced1

rgb(0,206,209)

darkviolet

#9400d3

rgb(148,0,211)

deeppink

#ff1493

rgb(255,20,147)

deepskyblue

#00bfff

rgb(0,191,255)

dimgray

#696969

rgb(105,105,105)

dimgrey

#696969

rgb(105,105,105)

dodgerblue

#1e90ff

rgb(30,144,255)

firebrick

#b22222

rgb(178,34,34)

floralwhite

#fffaf0

rgb(255,250,240)

forestgreen

#228b22

rgb(34,139,34)

fuchsia

#ff00ff

rgb(255,0,255)

gainsboro

#dcdcdc

rgb(220,220,220)

ghostwhite

#f8f8ff

rgb(248,248,255)

gold

#ffd700

rgb(255,215,0)

goldenrod

#daa520

rgb(218,165,32)

gray

#808080

rgb(128,128,128)

green

#008000

rgb(0,128,0)

greenyellow

#adff2f

rgb(173,255,47)

grey

#808080

rgb(128,128,128)

honeydew

#f0fff0

rgb(240,255,240)

hotpink

#ff69b4

rgb(255,105,180)

indianred

#cd5c5c

rgb(205,92,92)

indigo

#4b0082

rgb(75,0,130)

ivory

#fffff0

rgb(255,255,240)

khaki

#f0e68c

rgb(240,230,140)

lavender

#e6e6fa

rgb(230,230,250)

lavenderblush

#fff0f5

rgb(255,240,245)

lawngreen

#7cfc00

rgb(124,252,0)

lemonchiffon

#fffacd

rgb(255,250,205)

lightblue

#add8e6

rgb(173,216,230)

lightcoral

#f08080

rgb(240,128,128)

lightcyan

#e0ffff

rgb(224,255,255)

lightgoldenrodyellow

#fafad2

rgb(250,250,210)

lightgray

#d3d3d3

rgb(211,211,211)

lightgreen

#90ee90

rgb(144,238,144)

lightgrey

#d3d3d3

rgb(211,211,211)

lightpink

#ffb6c1

rgb(255,182,193)

lightsalmon

#ffa07a

rgb(255,160,122)

lightseagreen

#20b2aa

rgb(32,178,170)

lightskyblue

#87cefa

rgb(135,206,250)

lightslategray

#778899

rgb(119,136,153)

lightslategrey

#778899

rgb(119,136,153)

lightsteelblue

#b0c4de

rgb(176,196,222)

lightyellow

#ffffe0

rgb(255,255,224)

lime

#00ff00

rgb(0,255,0)

limegreen

#32cd32

rgb(50,205,50)

linen

#faf0e6

rgb(250,240,230)

magenta

#ff00ff

rgb(255,0,255)

maroon

#800000

rgb(128,0,0)

mediumaquamarine

#66cdaa

rgb(102,205,170)

mediumblue

#0000cd

rgb(0,0,205)

mediumorchid

#ba55d3

rgb(186,85,211)

mediumpurple

#9370db

rgb(147,112,219)

mediumseagreen

#3cb371

rgb(60,179,113)

mediumslateblue

#7b68ee

rgb(123,104,238)

mediumspringgreen

#00fa9a

rgb(0,250,154)

mediumturquoise

#48d1cc

rgb(72,209,204)

mediumvioletred

#c71585

rgb(199,21,133)

midnightblue

#191970

rgb(25,25,112)

mintcream

#f5fffa

rgb(245,255,250)

mistyrose

#ffe4e1

rgb(255,228,225)

moccasin

#ffe4b5

rgb(255,228,181)

navajowhite

#ffdead

rgb(255,222,173)

navy

#000080

rgb(0,0,128)

oldlace

#fdf5e6

rgb(253,245,230)

olive

#808000

rgb(128,128,0)

olivedrab

#6b8e23

rgb(107,142,35)

orange

#ffa500

rgb(255,165,0)

orangered

#ff4500

rgb(255,69,0)

orchid

#da70d6

rgb(218,112,214)

palegoldenrod

#eee8aa

rgb(238,232,170)

palegreen

#98fb98

rgb(152,251,152)

paleturquoise

#afeeee

rgb(175,238,238)

palevioletred

#db7093

rgb(219,112,147)

papayawhip

#ffefd5

rgb(255,239,213)

peachpuff

#ffdab9

rgb(255,218,185)

peru

#cd853f

rgb(205,133,63)

pink

#ffc0cb

rgb(255,192,203)

plum

#dda0dd

rgb(221,160,221)

powderblue

#b0e0e6

rgb(176,224,230)

purple

#800080

rgb(128,0,128)

red

#ff0000

rgb(255,0,0)

rosybrown

#bc8f8f

rgb(188,143,143)

royalblue

#4169e1

rgb(65,105,225)

saddlebrown

#8b4513

rgb(139,69,19)

salmon

#fa8072

rgb(250,128,114)

sandybrown

#f4a460

rgb(244,164,96)

seagreen

#2e8b57

rgb(46,139,87)

seashell

#fff5ee

rgb(255,245,238)

sienna

#a0522d

rgb(160,82,45)

silver

#c0c0c0

rgb(192,192,192)

skyblue

#87ceeb

rgb(135,206,235)

slateblue

#6a5acd

rgb(106,90,205)

slategray

#708090

rgb(112,128,144)

slategrey

#708090

rgb(112,128,144)

snow

#fffafa

rgb(255,250,250)

springgreen

#00ff7f

rgb(0,255,127)

steelblue

#4682b4

rgb(70,130,180)

tan

#d2b48c

rgb(210,180,140)

teal

#008080

rgb(0,128,128)

thistle

#d8bfd8

rgb(216,191,216)

tomato

#ff6347

rgb(255,99,71)

turquoise

#40e0d0

rgb(64,224,208)

violet

#ee82ee

rgb(238,130,238)

wheat

#f5deb3

rgb(245,222,179)

white

#ffffff

rgb(255,255,255)

whitesmoke

#f5f5f5

rgb(245,245,245)

yellow

#ffff00

rgb(255,255,0)

yellowgreen

#9acd32

rgb(154,205,50)

What Semantics Means in HTML and Why You Should Care

Tue, 09 Sep 2014 21:20:21 +0000

Once you’ve been writing HTML for a while, you may come across the term “semantic HTML.” But what does that really mean?

What is Semantics?

You may have heard the phrase “that’s just semantics” used as a way to dismiss an argument or otherwise minimize the importance of something someone says, but semantics can be important to your website. Understanding semantics as it applies to HTML can save you time and money in the long run.

In web design, semantics is concerned with the meaning of the tags and attributes that you use to build your web pages. In other words, semantic HTML is HTML that contains meaning in and of itself, beyond any content that it might be marking up. Semantic HTML lets the browser understand what the tag contains, and so will you.

Here is a hypothetical example of HTML if it were written with all the tags differentiated by numbers:

<!tag1>
<tag2>
  <tag3>
    <tag4>Now is the Time</tag4>
  </tag3>
  <tag5>
    <tag6>Now is the Time</tag6>
    <tag7>For all good people…</tag7>
  </tag5>
</tag2>

This is pretty difficult to understand, right? Web browsers could have been programmed to read the above faux HTML just as easily as they read real HTML.

Here’s the same web page written in real HTML:

<!doctype html>
<html>
  <head>
    <title>Now is the Time</title>
  </head>
  <body>
    <h1>Now is the Time</h1>
    <p>For all good people…</p>
  </body>
</html>

This is much easier to read and understand, even if you don’t know HTML. You can make guesses about what the content is because of the HTML tags surrounding it. Let’s look at it line by line:

Line 1: <!doctype html> You may not know what the word “doctype” means, but if you were to guess, you might think it meant “document type” and this is followed by HTML. So this line probably means that the document is an HTML document.

Line 2: <html> Even if you didn’t understand the first line, this line confirms that we’re working with an HTML document.

Line 3: <head> This may not be clear immediately, but it obviously means something to do with the “head” of the document, perhaps the brains.

Line 4: <title>Now is the Time</title> This is the first really semantic tag you see in the document, even though the above tags are reasonably understandable. It’s clear that the title of the document is “Now is the Time.” This line also gives you a clue as to how HTML is structured, as you can see the closing tag right there.

Line 5: </head> We learned about closing tags in line 4, so it’s clear that this is the end of the head information for the page.

Line 6: <body> This is probably the beginning of the main focus or body of the web page.

Line 7: <h1>Now is the Time</h1> This is a repetition of the title, but the tags surrounding the text aren’t terribly clear. Once you understand HTML you’ll recognize this as a level 1 headline, but the semantics are poor on this tag.

Line 8: <p>For all good people…</p> This is another tag that you will recognize as semantic once you know HTML better. And it might be more obvious what it is in a longer page with more of them. This is a paragraph tag. It might have been more semantic if it was written <paragraph>.

Line 9: </body> Here we have the end of the body of the page.

Line 10: </html> And finally the end of the document itself.

As you can see, a tag like <body> has a lot more meaning in and of itself than <tag5>.

This is semantic HTML. Semantic HTML is HTML that provides meaning to the content it contains.

Why is Semantics Important for HTML?

Semantic HTML makes your web pages easier to read and understand. While most of your customers won’t ever see the HTML tags, the browsers will and they can make adjustments based on the tags to make the content display more effectively.

For example, in HTML 4, you could only embed video and audio using non-semantic <object> tags. The browser knew that the element was an object of some type, but not what it was.

An object could be almost anything, and the browser wouldn’t know until it started to try and display it. But with the new semantic <video> and <audio> tags the browser will know immediately what it has to download. If the browser doesn’t support video, it knows before it starts to download the file, which saves the customer time.

But semantics can also save you money. Web pages need to change to stay current. When a page is marked up semantically the next web designer to edit it can tell almost at a glance what the page has on it, without needing to read any of the content. This saves time, and gets the designs built more quickly, which saves money.

Plus, just like browsers, web designers can use semantic HTML to design their pages better. If you have code samples in your documents, you can add line numbers to them automatically if you use the <code> tag around them. You can put gorgeous graphical quotation marks around <blockquote> elements.

And there will probably be additional features that come out in the future for semantic elements. For instance, a tag like <address type="skype"> might allow for direct video calls embedded in web pages. Using semantic HTML tags future-proof your web designs and ensure that your meaning is understood.

Semantic HTML Tags in HTML5

The following table shows the semantic tags in HTML5.

<abbr>

Abbreviation

<address>

Address of the authors of the document

<article>

Article

<aside>

Tangential or content that is loosely related to the main content

Audio or sound file

Long quotation

Body of the document

Button or input tag

Canvas for animation or scripted content

<cite>

Citation

<code>

Code reference

<col>

Column in a table

<colgroup>

Group of columns

<datalist>

List of data for use in forms

Deleted text

Definition

Emphasis

Figure

Footer

First level headline

Second level headline

<h3>

Third level headline

<h4>

Fourth level headline

Fifth level headline

Sixth level headline

Head of the document

Header

Thematic break

HTML

Inserted text

Text to be entered by the user

<label>

Label

<legend>

Legend

<mark>

Content that has been marked in some way

<menu>

<meter>

A scalar measure

Form output

Paragraph

Pre-formatted text

Progress bar

Short inline quotation

Ruby annotation

Strikethrough

Sample output

Section

Small text

Strongly emphasized text

Subscript

Summary

Superscript

Title

Variable or user defined text

<video>

Video

Comments:

Atish - Sep 4, 2014

very well explained. I didn’t know some of the tags, thanks for providing the list.

Jennifer Kyrnin - Sep 4, 2014

You’re welcome. I’m glad you found it useful.

What Kind of Web Designer Are You?

Fri, 05 Sep 2014 23:32:09 +0000

Comments:

Earl - Sep 6, 2014

Says I am a Technologist. I do prefer simple designs that work well.

Johnb144 - Sep 1, 2014

It’s very straightforward to find out any topic on net as compared to textbooks, as I found this article at this site.

Using the CSS Float Property

Fri, 05 Sep 2014 01:21:18 +0000

Web Page Layouts are Easy with the CSS Float Property

There are many ways to create great layouts on a web page, but one of my favorite methods is to use the float CSS style property. But in order to lay out your pages with float you need to understand the float property.

CSS `float` Syntax

This property defines whether and how a box element should float.

Default: none

Inherited: no

Applies to: all elements

CSS level: CSS1

float: none | inherit | left | right | initial ;

Value

Description

none

The element is not floated. It will display on the page where it occurs in the HTML. This is the default value.

inherit

The element inherits the float property from its parent element.

left

The element floats to the left.

right

The element floats to the right.

initial

The element is set to its initial default value for float.

What Can You Float and How Do They float?

While you can apply the float property to all elements, it only really affects block-level elements. These are elements that create blocks of text or other content. These are elements like: <p>, <blockquote>, and <table>. The one inline element that you can reliably float is the <img> element.

When you build an HTML document, the elements are displayed in what is called the normal flow. This means that they are placed in the web browser in the order they appear in the HTML. If they have no defined dimensions, like a paragraph of text, then the element takes up the full width of the browser and as much height as it needs. Elements with dimensions, like images, are placed in the flow beside the preceding element if there is enough room. If not, they are placed below. Browsers, by default, avoid adding horizontal scroll bars unless there is no other way to get the content on the web page.

When you place the float property around an element, it is removed from the normal flow and positioned to the far right (float: right;) or far left (float: left;) of the containing element. All content after the floated element is still in normal flow and flows around the floated element.

How to Float an Image

To float an image to the left, add the following CSS to your style sheet:

img.left {
  float: left;
}

And then add the class left to the image:

<img src="mypicture.png" alt="my picture" class="left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

To float an image to the right, add the following CSS:

img.right {
  float: right;
}

And then add the class right to the image:

<img src="mypicture.png" alt="my picture" class="right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

Turn Off CSS `float` With the `clear` Property

The clear propery works with the float property to turn off the float. Once you clear a float on an element following the floated element, the content will start in normal flow directly below the floated element.

For example, above you see a bubble image with two paragraphs of text beside them. If you add the clear: both; style to the second paragraph, that will move that paragraph to below the image, rather than beside it.

<p>
<img src="mypicture.png" alt="my picture" class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.
</p>
<p style="clear: both;">
Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin. 
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

Using `float` for Layout

It’s easy to use the float property for your layouts with the following steps:

Design the layout—I prefer to draw out my layouts on paper, but you can use a graphics program or just do it in your head.
Draw boxes around the main areas of your page. Consider things like your header, footer, main content, and aside content.
Write your HTML using sectioning elements like <section>, <article>, and <header> to define the different areas.
Give every element a width, in either percentages or pixels.
Add CSS float properties and clear properties to put the elements in the correct spaces.

If you want to create two columns, you simply float the first column to the left and the second to the right. If you want to create three columns, you should surround the first two columns in another <div> element. Then treat those two columns as a two column layout, and the <div> and the third column as another two column layout. For example:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three Column Layout</title>
    <style>
      #cols1and2 { float: left; width: 75%; }
      #col1 { float: left; width: 80%; 
      #col2 { float: right; }
      #col3 { float: right; width: 20%; }
    </style>
  </head>
  <body>
    <div id="cols1and2">
      <article id="col1">&nbsp;</article>
      <aside id="col2">&nbsp;</aside>
    </div>
    <section id="col3">&nbsp;</section>
  </body>
</html>

Don’t Be Afraid of the CSS `float` Property

The CSS float property is a very useful property. The best way to get comfortable with using it is to try it out. You can use it in most blog software by simply adding style="float: right;" to your images (in HTML view). Then all your text will flow around that image on the left side. Once you’re comfortable adding it to images, try adding it to blocks of text or other elements and see what happens.

What's new in HTML5 from HTML4? Make the Switch!

Wed, 13 Aug 2014 12:00:39 +0000

One of the most common questions I get asked about HTML, and HTML5 in particular, is “Should I use HTML5 or not?” Find out why you should make the switch from HTML4 to HTML5.

My answer to the question “Should I use HTML5 or not?” is always “Yes!” HTML5 is the current standard for web page designs, and all modern web browsers and editors support it. In fact, even if you’re using an older editor like FrontPage, you can modify your designs to use HTML5 by changing the doctype.

What are the Advantages to Using HTML5?

HTML5 is the standard, having replaced HTML 4.01. And many modern devices like iPhones and iPads are optimized for HTML5. Some of the differences from HTML4 include:

new elements or tags
changes to a few existing tags
addition of a tag removed from in HTML 4
a new doctype

But the number one thing you should remember about HTML5 is: it’s backwards compatible. In fact, if all you do is add the <!doctype html> to the top of your HTML 4.01 document (removing any old <!doctype> tags), you’ll be fine. Your HTML will have been switched to HTML5. It’s that easy!

The New HTML5 Elements

There are a bunch of new elements (often called tags) in HTML5:

[<article>](http://webdesign.about.com/od/html5tags/p/bltags_article.htm)
[<aside>](http://webdesign.about.com/od/html5tags/p/bltags_aside.htm)
[<audio>](http://webdesign.about.com/od/html5tags/p/bltags_audio.htm)
<bdi>
[<canvas>](http://webdesign.about.com/od/html5tags/p/bltags_canvas.htm)
[<datalist>](http://webdesign.about.com/od/html5tags/p/bltags_datalist.htm)
[<details>](http://webdesign.about.com/od/html5tags/p/bltags_details.htm)
[<dialog>](http://webdesign.about.com/od/html5tags/p/bltags_dialog.htm)
<embed> (Note: this element was deprecated in HTML 4.01)
<figcaption>
[<figure>](http://webdesign.about.com/od/html5tags/p/bltags_figure.htm)
[<footer>](http://webdesign.about.com/od/html5tags/p/bltags_footer.htm)
[<header>](http://webdesign.about.com/od/html5tags/p/bltags_header.htm)
[<hgroup>](http://webdesign.about.com/od/html5tags/p/bltags_hgroup.htm)
<keygen>
<main>
[<mark>](http://webdesign.about.com/od/html5tags/p/bltags_mark.htm)
<menuitem>
[<meter>](http://webdesign.about.com/od/html5tags/p/bltags_meter.htm)
[<nav>](http://webdesign.about.com/od/html5tags/p/bltags_nav.htm)
[<output>](http://webdesign.about.com/od/html5tags/p/bltags_output.htm)
[<progress>](http://webdesign.about.com/od/html5tags/p/bltags_progress.htm)
[<rp>](http://webdesign.about.com/od/html5tags/p/bltags_rp.htm)
[<rt>](http://webdesign.about.com/od/html5tags/p/bltags_rt.htm)
[<ruby>](http://webdesign.about.com/od/html5tags/p/bltags_ruby.htm)
[<section>](http://webdesign.about.com/od/html5tags/p/bltags_section.htm)
[<time>](http://webdesign.about.com/od/html5tags/p/bltags_time.htm)
<track>
[<video>](http://webdesign.about.com/od/html5tags/p/bltags_video.htm)
<wbr>

New HTML5 Attributes

Along with all the new elements there are a bunch of new attributes.

The HTML <input type="text" /> element has a bunch of new attributes to define different input types. I strongly recommend you start using these immediately.

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

There are now a bunch of global attributes that can be added to every element:

accesskey
aria-*
class
contenteditable
contextmenu
data-*
dir
draggable
dropzone
hidden
id
inert
lang
on_event_ (these are various event handlers like on_mouseover_ and on_play_)
role
spellcheck
style
tabindex
title
translate

There are also a bunch of new attributes added to specific elements to make them more functional.

Element(s)

New Attribute

<a> <area>

download ping

<area>

hreflang type rel

<base>

target

<meta>

charset

<table>

sortable

<th>

sorted

<input> <select> <textarea> <button>

autofocus

<input> <textarea>

dirname inputmode placeholder

<input> <output> <select> <textarea> <button> <label> <object> <fieldset>

required

<fieldset>

disabled

<input>

autocomplete height list min max multiple pattern step width

<textarea>

maxlength wrap

<form>

novalidate

<input> <button>

formaction formenctype formmethod formnovalidate formtarget

<menu>

type label

<button>

<style>

scoped

<script>

async crossorigin

<html>

manifest

<link>

crossorigin sizes

<ol>

reversed

<iframe>

sandbox seamless srcdoc

<object>

typemustmatch

<img>

crossorigin srcset

Obsolete Elements

One new feature of HTML5 is when elements are no longer used, they are marked obsolete. That means that browser makers can continue to support any of these elements and web designers who use them don’t need to go through their code to remove them. But best practices recommend that you should stop using these obsolete elements as there are better choices available in HTML5.

Obsolete Element

Replaced By

<basefont> <big> <center> <font> <strike> <tt>

CSS

<frame> <frameset> <noframes>

Nothing, they damage usability and accessibility. Use <iframe> if you must have frames.

<acronym>

<abbr>

<appet>

<object>

<isindex>

form controls

<dir>

<ul>

<noscript>

Only conforming in HTML5, not XHTML5

New APIs in HTML5

One of the best parts of HTML5 are the new application programming interfaces or APIs. These are commands and scripts that give you more control over your HTML5 documents and let them look and act like an application and not just a web page.

The new APIs are:

Media APIs for video and audio playback
Constraint validation
User commands
Offline web applications
Web application registration for media types
Contenteditable
Drag and drop
URL History and location
Base64 conversion
Timer-based callbacks
Prompts
Printing
Handling search providers
A defined Window object
Microdata
Bitmap graphics
Cross-document and channel messaging
Run scripts in the background
Client-side storage
Bidirectional client-server communication
Server-to-client data push

HTML5 is Better for Web Pages

As you can see, while there are a lot of exciting new features to HTML5, there are none that are required in order to use it. In fact, it’s easy to just get started today with the doctype and then add new features as you learn them and become more comfortable with them.

It’s a good idea to start using HTML5, if you haven’t already, because it gives you more features and controls for your web designs. Plus with more and more people using mobile devices that are optimized for HTML5, you can ensure you aren’t losing your audience.

All the CSS You Need to Know (not as much as you think) - Infographic

Tue, 05 Aug 2014 05:04:47 +0000

All the CSS You Need to Know
(not as much as you think!)

Don’t worry if you don’t feel confident with CSS. There are really only a few properties you need to know out of the more than 200 that are available. The first 23 properties are all the CSS you need to know to style most web designs. The second group of 24 properties gives you the more advanced CSS you need to know to get fancier.

Comments:

Cecily - Aug 2, 2014

Please sign me up for your newsletter

Jennifer Kyrnin - Aug 2, 2014

Thanks Cecily, I don’t feel comfortable signing up people for my newsletter because I want it to be completely your own choice whether you subscribe (although I hope everyone who does enjoys the free chapter!). You can fill out the form in the right column of any page on my site to be signed up. Or you can go to the sign up page here: https://www.html5in24hours.com/rwd-free/ either way will get you the free chapter for help planning your website and access to my newsletter. I hope that helps!

HTML5 Learning Lab Available

Wed, 30 Jul 2014 00:22:18 +0000

HTML5 Mobile Application Development in 24 Hours Learning Lab

I’m pleased to announce that the latest version of my book Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours is available in a Learning Lab format from Pearson.

The Learning Lab takes the entire book and adds interactive quizzes, videos, step-by-step lessons, and live code editing right in the book. If you’ve wanted to do more practice while learning HTML5, this is an excellent version of the book to get.

Three Free Chapters

The first three chapters are available online for free for you to try out and see if this version will work for you.

I worked hard on these videos and on the quizzes as well as writing the entire body of text, so I hope that you enjoy the HTML5 Learning Lab.

How to Secure WordPress After You've Been Hacked (or Before!)

Tue, 29 Jul 2014 12:00:51 +0000

[caption id=“attachment_796” align=“alignleft” width=“244”] Do you have 2-factor authentication?

Getting hacked is a nightmare. After a hacker attacks your site, you can spend days, weeks, or even months worrying about when it’s going to happen again, how it happened in the first place, and what you can do about it to prevent future hacks.

Secure WordPress Starts with You

The first thing you should do after you discover your site was hacked is to take a deep breath. You are not the first person to get hacked and you won’t be the last. In many ways the fight against hackers is a constant battle with the hackers tools getting better and the security tools getting better to fight them. Security companies like McAfee and Symantec have been hacked! Don’t feel too bad if your website gets hacked. Just learn from what happened and do your best to fix things.

Once you’re a bit calmer, look over your basic security measures. Things like:

What is your admin password?
- A secure password is long—more than 10-15 characters.
- It has upper and lowercase letters, numbers, and special characters (! # $ % etc.).
- You should never use the same password for your WordPress admin account as on any other site. If that other site gets hacked, your WordPress installation is then compromised too.
- It should not be a word—even changing the letters to numbers like “p@5sW0rd” won’t work, as most hackers have those in their files as well. If you can read the word, then so can the hackers!
If you don’t think you can remember a password like “brg3@4u{o8pet#NHL?r2HuiFf,” and believe me most people can’t, then you should consider getting a password safe. This is an application that stores your passwords in an encrypted safe that you can use to look them up when you need them. Some options include: LastPass, KeePass, 1Password, or even the built-in managers in your web browsers and operating system. A password safe or password manager will help keep your passwords secure while not forcing you to remember hundreds of crazy, random passwords.
What is your administrator user name?If you’re like most WordPress users, it’s “admin.” I’m not a hacker, but I know that this is a common username. And if I know it, then the hackers know it. And that’s just one less thing they have to figure out before they can hack into your site.The challenge is, once you’ve got a WordPress admin password, and WordPress makes it very difficult to change it. While changing your username on Wordpress.com is just a matter of adjusting your personal settings, changing a self-hosted WordPress blog is a lot more difficult. The easiest way is like this:
1. Create a new user in WordPress by clicking Add New in the Users menu
2. Give that new user admin access
3. Login with the new username
4. Change the access of the old admin account to the lowest access role available (usually “Subscriber”)
5. If the old admin account has no posts associated with it, you can delete it rather than changing the role. But if you delete an account with posts, you may end up deleting the posts as well.
What security plugins do you have on WordPress?In order to keep WordPress secure, it’s a good idea to use a couple of security plugins. Some of the ones I use include:
- Acunetix WP Security This is a comprehensive tool that attempts to make it harder for hackers to know a lot about your site. It removes information like the WordPress version, when WordPress needs updates, and so on. Plus, it gives you a list of items you should look at to know where your site is vulnerable.
- Bad Behavior Bad Behavior attempts to block automated bots from using your site. It is primarily for preventing spam. I find that it helps keep the spam manageable. However, this can sometimes block things you want to get through.
- Google Authenticator for WordPressThis allows you to enable (and require if you wish) 2-factor authentication on your WordPress site. This requires that people logging into your site have both a username/password and a code that your phone generates. If they’ve stolen your phone as well, you probably have more problems than just whether they are breaking into your WordPress site.
- Limit Login AttemptsI find this tool invaluable. Today alone it blocked over 50 hack attempts on one site. Because you need access to the site, this tool doesn’t block IPs until they’ve reached a threshold number of attempts. You can set both the number of tries and how long the lock out is for. On one site I manage, we set the lockout to 5 days because of the number of hacking attempts we were getting.
- LionScripts: IP Blocker LiteI use this to block the IPs that come back again and again to try to hack my sites. Limit Login Attempts blocks IPs for a period of time, but if a hacker is really determined they will just come back later and try again. So I use this IP blocker to block them completely.
- WordPress Database BackupWhile some people might not see this as a security plugin, I feel that regular backups are critical to any security system. That way if your site gets hacked, you can reinstall and not lose too much. I like this plugin because it’s automatic. I have it email me backups of all my sites.

Be Ruthless When Trying to Secure WordPress

Many people are reluctant to block IPs and limit access to customers because of just that—they are customers! But the reality is that anyone that you didn’t authorize who would try to login to your site using an admin account is not a customer. They are a hacker. They aren’t going to read your articles, they aren’t going to comment on your site, and they certainly aren’t going to buy anything from you. You don’t need them. Be ruthless. If a hacker gets access, he won’t be gentle.

Start with your own access. One thing that can really help your security, besides a strong password, is two-factor authentication. I use the Google Authenticator with my mobile devices to prove that I’m me and I should have access to my site. This means that I have to provide both something I know—my username and password—and something I have—my phone. If I can’t provide both those things then I can’t get into my account. Two-factor authentication can seem tedious at first, but it does improve your security, and most people keep their phones with them all the time.

Then be ruthless with your subscribers. You should periodically check out your WordPress users (in the Users tab) to make sure there aren’t any surprises. Look for any accounts that have higher access than you gave them. In general, “Subscriber” is the lowest level of access, and anyone who has more access than that should have been given those permissions by you. If you find any strange ones, delete them.

What to Do After You’ve Been Hacked

All of the above security measures are good, but what about after a hacking? If you discover your WordPress site has been hacked, you need to secure it as well as you can, but there are also a few things you need to do to help make sure that you get rid of the hackers.

The problem is, once you’ve been hacked, the hackers could have put in back doors in many places on your site without you realizing it. So you have to do more than add security—closing the barn door after the horse is gone, so to speak.

Here are the steps I recommend you follow after you discover a hack.

Find or make a clean backup of your site data. I recommend getting a backup of your database, and all files in your wp-content directory. It’s best to choose backups dated before you know the hack occurred, which is why regular backups are critical. If you’re not sure when it happened, get a backup that’s at least one month old. Yes, your site will be out-of-date, but the hacker will be gone! Here’s information on the WordPress Codex about backing up your site.
Then delete everything on the site except the database. Yes, this means your site will be down. People will get a 404 or other error. If you can leave it down for at least 24-48 hours, that would be best as this encourages the hackers to go somewhere else. If there’s nothing to hack, they will hack someone else.
After your down time, re-download WordPress from the wordpress.org site. This is critical. You must not use any old files from when you were hacked. You need to make sure that you have a clean install, and that means starting over from scratch. Don’t forget to download your plugins and themes as well.
Turn on all the security plugins you’ve installed immediately. And if they recommend taking action, do this before you do anything else.
If you haven’t already, change your administrator username to something other than “admin.”
Take a deep breath—you’ve survived a hacking!

As I mentioned above, maintaining a secure WordPress site is difficult. And no security is foolproof. But if you’re careful and ruthless you can keep your site as secure as possible. No one likes being hacked, but it doesn’t have to be the end of your site. I have personally survived being hacked (including one major site I was running) as well as other disasters (including completely deleting my entire web directory without any backups). It’s not fun, but it’s not the end of the world.

Comments:

Denise - Jul 2, 2014

Great piece, Jen! Thanks so much for your well thought out advice, I appreciate it. I think I will look into one of those password lockers, too.

Jennifer Kyrnin - Jul 2, 2014

Great! The password lockers are definitely a good and important start. I find mine invaluable.

How can I help you?

Tue, 15 Jul 2014 21:59:36 +0000

I’m trying to determine what I should work on next. I have a number of opportunities and ideas, but I’d love to know what you want. Some of you may have noticed a new survey on my sidebar last week, and I’ve already replaced it with an even simpler, 2-question survey.

I would love to know how I can help you. What do you want to know? If you don’t want to fill in the survey, you can comment on this blog post. If you could have 15 minutes of my time, what would you ask me?

Please fill out this simple survey - it will take less than 5 minutes of your time.

Create your free online surveys with SurveyMonkey , the world’s leading questionnaire tool.

Comments:

Linn Kier - Jul 3, 2014

The website is not up yet but I wanted to say that I always love your information and have learned a lot from reading your articles. They are always very clear and I can understand it all, even if sometimes I can’t make things work. (: Thanks so much for your contribution.

Jerome Biggins - Jul 3, 2014

Thank you for doing this. I just need a help on getting started. I have a webpage that I’ve started on, but I can use the extra push to get where I need to go with my HTML and CSS skills.

Jennifer Kyrnin - Jul 3, 2014

Thanks! I’m glad I can help. And if there’s something I post here that you can’t get to work, please reach out to me, and I’ll figure out what’s going on.

Jennifer Kyrnin - Jul 3, 2014

Great! It would help me a lot if you could post this in the survey itself, as that way I’ll have it in my records. But if you can’t or don’t want to that’s fine too.

Ulrich von Bek - Jul 3, 2014

Thank you for your work. I have filled your survey. Even if the survey is anonymous I find the response about phone call with only “yes” or “no” a bit rude. I want to say that people for whom English is not their mother tongue can’t answer “yes” especially if they are shy and not fluent in English.

Jennifer Kyrnin - Jul 6, 2014

I’m sorry, I did not, by any means, mean to offend anyone with that question. Some people have replied with an email address rather than a phone number. I should also clarify that leaving a phone number is not a guarantee that I will call you, only that you’re saying that you are okay with me doing so if I need to follow up. If you’re not comfortable speaking English on the phone, then I have no problems with you saying no.

Ulrich von Bek - Jul 6, 2014

No offense! It’s rude to you from the writer. At least in my language (french). The polite form is “No, my planning is overbooked” or something of that style… the verbosity of french people. ;-)

Jennifer Kyrnin - Jul 0, 2014

Oh, good, I was worried that I’d missed a cultural clue I didn’t know about. I’ll bear your comment in mind (I don’t think I can change the survey now that it’s got answers) for future surveys. But I’m never going to be offended by an answer I baked into my own survey. Thanks for your concern, but I’m reasonably difficult to offend. :-)

Do you want me to evaluate your website?

Fri, 11 Jul 2014 13:00:25 +0000

[caption id=“attachment_762” align=“alignleft” width=“283”] Make your website as successful as it should be!

Get a Free Website Evaluation

I have been working as a professional web designer since 1995 and have been writing about it and teaching others to do it since 1997. I would love to evaluate your website.

I will examine:

The home page
The color scheme
Images and graphics
Search engine optimization
And any other specific things you’d like me to look at

Once I’ve examined your website, I’ll provide you with a personalized report giving you suggestions for how to make more money with your website, how to attract more readers, and how to fix the problems you have.

What’s the Catch?

I am happy to do this free consultation for you, but I ask just one thing in return: I will take a screen shot to go with your report, and I would like to post that screen shot along with general comments about the site here.

How to Get the Free Website Consultation

It’s easy, all you need to do is fill in this web form.

[contact-form subject=‘website evaluation’][contact-field label=‘Name’ type=‘name’ required=‘1’/][contact-field label=‘Email’ type=‘email’ required=‘1’/][contact-field label=‘Website’ type=‘url’ required=‘1’/][contact-field label=‘What concerns would you like me to focus on?’ type=‘textarea’ required=‘1’/][contact-field label=‘I agree that Jennifer Kyrnin may post a screen shot of my website (listed above) along with general comments about the site design. ’ type=‘checkbox’ required=‘1’/][/contact-form]

Comments:

Earl Moore - Jul 5, 2014

Much appreciated. I sent in my info and hope you use it. Looking forward to seeing what advice you have for me. Thanks, Earl

Is Calling It “Content” Offensive?

Tue, 08 Jul 2014 17:53:53 +0000

I’ve been working on the web since 1995, and I’ve been calling the text, images, and media on web pages “content” since around that same time. I consider myself a writer and web designer. And in both of those roles I have worked as a content provider. I created graphics for the Netcom personal web page customers to use. I wrote documentation that went online. Later on in my career I’ve created videos and podcasts for web pages as well as all of the many documents I’ve written for About.com and other websites. Also, as a web designer and CMS builder, I have worked with other content providers to get their words, images, and media on websites.

So it surprised me when I read in an article recently that calling web page writing, images, and media “content” was somehow offensive. And calling the photographers, writers, artists, etc. who created that content “content creators” was somehow trivializing their efforts.

What are we supposed to call it? Sure, I am happy to refer to an individual as a writer or photographer or graphic artist. But when I’m referring to the portions of the web page outside of the design, layout, typography and so on, “content” is the most general term. And when referring to the people who build that content, “content creators" seems most accurate. After all, I don’t consider myself a graphic artist even if I have created graphics for web pages. I’m also not a photographer, even though I’ve posted photos that I’ve taken. But if I were to get photos from Ansel Adams, I wouldn’t call him a writer, even if he wrote descriptive text about his photos.

Being a Creative is Hard

You spend hours, days, weeks, or even months on a project and then your customers come and look at it for just a few seconds before pronouncing it “good” (or “bad”). You will get lots of positive comments and feedback but when you ask for even a fraction of the amount you spent to create your content, your customers look at you incredulously and seem to feel that you’re being unreasonable that you want to feed your children and pay your mortgage.

It’s especially difficult online, as many online companies pay little or nothing for the content, whatever form it takes. And there are always more and more novice writers, photographers, and artists who are happy to give their work away for the chance at “exposure.”

But this has always been the case. And while I don’t recommend working for free, lots of people will want you to.

Does the Name of Your Creativity Really Matter?

The fact is that whether you like it or not, “content” is the term that companies and website owners use to describe the elements of their pages that go beyond the design. It is not intended to offend anyone or belittle their efforts. It is just a generic term.

And in the web industry, this term is here to stay. There was a time back around 2000-2005 when some companies were calling content “digital assets.” And they called the management tools “digital asset management” or DAM. But DAMs lost out to CMS (content management systems) and the items they were managing became “content.”

The trick is to keep enjoying creating whatever you create regardless of what it’s called. And hopefully you get paid for your content in more than just exposure.

What Do You Call Yourself or the People Who Create Content for Your Sites?

Is calling them “content creators” offensive to you? Let me know in the comments what you think. Personally, I call myself a writer and web designer as I mentioned, but I don’t mind being referred to as a content creator or creative when it comes up.

Comments:

Dave - Jul 2, 2014

Offensive? If you called some one an aardvark, that might be questionable. Calling someone a ‘content creator’ is innocuous. Taking offense could place the sensitive objector in a whole other category with pejorative meaning. Is it kind to call them ‘content creators’? Is it true? Is it helpful? I think yes to each question. No foul.

Amanda Morin - Jul 2, 2014

To some degree, it’s a matter of semantics. I think I may have read the same article you did about why calling it “content” diminishes our role as creators or artists or whatever we creative types call ourselves. As an author, I agree. I don’t want my books to be called “content,” because in my mind they’re not. As a web writer, I disagree, and some of that is simply because “content” is the word used to describe what we put into content management systems. In and of itself, the word is not meant to diminish what we write; it’s meant to identify how what we write fits as an element into the Web. I really believe it’s a matter of how it’s used. Some people call what we create “content” and us “content creators” as a way to deliberately diminish or trivialize what we do. In that sense, they’re speaking of our writing or art as something that merely fills space, so it doesn’t matter who makes it. It’s an attempt to justify using people who are not as highly qualified or willing to work for free. After all, if that content is there simply to fill space, does it really matter who makes it?

Charlie Zegers - Jul 2, 2014

Speaking as someone with a background fairly similar to your own… “Content” is about as innocuous a description as I can imagine… a catch-all term that can describe any sort of media. But “content creator” has a number of connotations that are pretty troubling depending on context. When I hear “content creator” I think “hack who posts articles for free on HuffPo or steals people’s online photos to gather into clickbait articles on Buzzfeed.” As such, it’s fairly offense to refer to, say, a network of vetted subject-matter experts as “content creators.” It’s an accurate descriptor, but it’s also a lowest common denominator.

Jennifer Kyrnin - Jul 2, 2014

Good point. I think that many larger content websites tend to want to generalize the people who create the content that they then sell into something less “expert” less “professional.” That way they can dump them at a drop of the hat. After all, there are always more where that cog came from.

Jennifer Kyrnin - Jul 2, 2014

Yes, yes YES! Any company that uses the term “content” as a deliberate way to marginalize the effort made by their writers, photographers, and artists is definitely using it in an offensive way. Unfortunately, I think the term “expert” is also gaining that stigma. More companies are referring to their writers as “experts” in an almost tongue-in-cheek fashion. And that is offensive as well.

Jennifer Kyrnin - Jul 2, 2014

Dave, if you want to call me an aardvark I’d be okay with that. :-) I do think that the term content creator is innocuous, at least in the fashion I use it. I think that some corporations use it, as I mentioned in my reply to Charlie, as a way to de-humanize the people who are doing the creative work so that they don’t feel too bad when they dump them for the next cheap or free creator.

Amanda Morin - Jul 2, 2014

You make a great point in separating out the word “content” from “content creator.” Until you mentioned it, I hadn’t realized that the phrase “content creator” is what rankles me. I’m okay being a writer whose work is called content, but I’m not okay being called a “content creator.”

Jon - Jul 2, 2014

To me, the term content has no negative connotations. However, the term “content creator” does, and smacks of “user generated content” or “community created content”. Not that user generated content is necessarily poor, but I think the impression it gives is “unvetted”.

Charlie Zegers - Jul 2, 2014

Funny, we all seem to be talking about the same organization.

Jennifer Kyrnin - Jul 2, 2014

Yes, “content creator” really does sound like they’re looking for content farmers doesn’t it?

Jennifer Kyrnin - Jul 2, 2014

I’m sure that’s just a coincidence… ;-)

Amanda Morin - Jul 2, 2014

Well, yes and no. Unfortunately, more than one organization I’ve contracted with is looking for “content creators.” Note the past tense, as in “do not cuttingly contract with.” :)

Sam Curcio - Jul 3, 2014

Content, when meaning everything as a whole, without being specific to one asset, is fine. Content creator is a new designation to me. If someone is talking about a group of individuals that have a part in creating the assets, then he should use “content creators”. However, when talking about one member of that group, it is best to use the proper title (designer, artist, etc.)

Ferne Arfin - Jul 3, 2014

I disagree with those who don’t object at all to the term content. As someone who came into writing for the web as a writer - not as a technology expert, or a food expert or any one of a number of other areas in which people use their own expertise on the internet - I think it’s belittling. It trivializes the expertise required to translate one’s professional expertise into words by suggesting that writing is not also a professional expertise. I know there is nothing I can do about it but as someone who: – has worked as a writer and journalist since we used manual typewriters to make newspapers – has two professional degrees in writing – and has seen the bad grammar and misspellings that pass for “content creation” on many websites I can’t help thinking that calling any writing online “content” trivializes it and by extention trivializes those of us who create it. So, yes, I’m offended but I consider it all part of the revenge of the nerds I’m afraid.

Jennifer Kyrnin - Jul 3, 2014

That would be ideal. I think that what happens, especially in large companies, is that the managers get in the habit of calling the group “content creators” and then generalize even when talking to individual writers, designers, etc.

Jennifer Kyrnin - Jul 3, 2014

True, and I understand you, but then what would you call the entire group of stuff posted on websites? I mean the writing, photography, art, etc. If calling all that content is offensive, then what should it be called?

Ferne Arfin - Jul 4, 2014

What we always called it in the days of journalism. The generalized term for all the stuff that was not advertising was simply called “editorial” - it was a general term that applied to opinion, fact, features, sports, recipes, how-tos, the lot. It was different from “the editorial” or “an editorial” which were ways to distinguish opinion pieces - the voice of the publication or of a contributor. And what are now referred to as content creators were, as you see, contributors. I think these older terms respect the individual who actually contributes the material rather than turning everything into a commodity.

Jennifer Kyrnin - Jul 4, 2014

Editorial. Interesting. I wonder if we could bring that back? I’ve been called a contributor before, but editorial always brings to mind “opinion” to me. I see your distinction, but that’s the connotation I get anyway.

Sam Curcio - Jul 4, 2014

What do managers know? Their job is managing people, not content.

Jennifer Kyrnin - Jul 4, 2014

lol - sometimes it’s managing both. ;-)

Basics of HTML5

Mon, 07 Jul 2014 13:00:15 +0000

HTML5 is no more difficult to learn than any other version of HTML. But there are a few things you can do to make it easier and more cost-effective to using it.

Start with the Doctype

The easiest way to start using HTML5 is to change the doctype you use in your documents. You can do this by simply making the first line of your HTML documents read:

<doctype html>

But if you use a WYSIWYG editor, you can also change it there. For example, in Dreamweaver CC, in the “New Document” window, you can choose HTML5 as the DocType from one of several choices. How to add the HTML5 doctype to a new Dreamweaver document In the CoffeeCup Web Editor, you use the template “HTML 5” when you’re opening a new document to create a new HTML5 document. How to add the HTML5 doctype to a CoffeeCup Web Editor page And many web editors these days default to HTML5. If you’re using an editor like Tummult Hype, Macaw, or CoffeeCup Responsive Design Layout Maker Pro you don’t have to worry about the doctype, as these editors use HTML5 automatically. Many modern web editors use HTML5 automatically.

Your First HTML5 Document

As I said above, all you need to have an HTML5 document is the correct doctype. But there are a few other tags that can help. Here’s a really basic HTML5 template that I start all my web pages with:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      My Title
    </title>
  </head>
  <body>
    Content goes here
  </body>
</html>

Change the highlighted lines to your own content

HTML5 is an Improvement to HTML 4.01

One question I get asked all the time is how difficult is it to learn HTML5 if you already know HTML 4.01 or any other version of HTML. The great news is that HTML5 isn’t really all that different from HTML 4.01. In fact, if all you do is add the doctype listed above and then writing your pages exactly as you did before, you will have joined the millions of designers using HTML5.

But one of the reasons to use HTML5 is because of all the improvements there are in it. There are dozens of new tags that add more functionality to your pages. None of the new tags are absolutely critical to any web page, but they add useful features that can enhance your pages and make them more useful to your customers.

Some of the tags I find most useful include:

The sectioning tags: <article>, <nav>, <footer>, etc.
Text semantics tags like <data> and <time>
Embedded content: <canvas>, <video>, and <audio>
The new forms tags and attributes

Learn about all the new HTML5 tags.

Scripting APIs Give You So Much More to Do On Your Sites

HTML5 offers a bunch of new APIs or application programming interfaces to help designers and developers offer more features on your websites.

Web Application APIs—these let your web pages act more like applications on a computer or tablet. There is support for error handling and events and can make your pages more interactive and useful.
Video and audio APIs—with more than just the <video> and <audio> tags, the new APIs help you to play back video and audio that are embedded directly in your web pages.
Offline web applications—this API helps you store information so that a customer using your web application on a mobile device doesn’t have to be connected to the internet to use the application.
Contenteditable—While Internet Explorer has supported this attribute for a few years, HTML5 has added an API to support it more widely.
Drag and Drop—This is a functionality that desktop applications have had for years, but until recently, web designers were stuck fiddling and futzing with different scripts to get drag and drop to work.
History API—Most people don’t understand the value of the History API because it’s not a visible functionality. But this API can make your web applications work more effectively by giving URIs to dynamic pages that don’t have URLs and changing the visible URL or any URIs in the history of the browser.

Where to Learn More About HTML5

There are lots of places online to learn HTML5, these are some of my favorite resources:

And of course, you can learn all about HTML5 from my book: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours.

Type on Screen - Book Review

Wed, 02 Jul 2014 19:17:22 +0000

Buy Now:

Amazon / Barnes & Noble

My Review

When I was offered the boo Type on Screen (edited by Ellen Lupton) to review I jumped at the chance. This is a follow-up to the book Thinking with Type (Buy on Amazon) which is an excellent primer on using type visually. So when I saw that she was editing a book on type for the screen, I was really excited. And this book does not disappoint.

The first chapter is by Christopher Clark. He provides a quick overview of web fonts and how they have changed over the years. But this chapter is more than a history of type online. In fact if that’s all it were I would have skimmed it or ignored it. No, this chapter teaches you how screens render type, details of type taxonomy and anatomy, and best of all, it gives you a survey of 14 of the best fonts for online use: five sans-serif, four serif, and five slab serif fonts. You will see all these fonts rated by legibility, readability, flexibility, showmanship, classiness, and amphibiousness (how well does it work on screen as well as print and on PCs as well as Macs).

And that’s just part of the first chapter!

Chapter two (by Young Sun Compton) starts looking at what you can do with the fonts you’ve chosen to use. This is not a chapter on how to use web fonts. You can learn about the mechanics to do that in chapter 11 (Hour 11: Fonts and Typography in HTML5) of my HTML5 book (Buy on Amazon). Instead, in this chapter you will learn about the design and layout of your screens so that you can place your type in ways that are most readable and legible for your customers. This chapter covers: grid systems, responsive typography, columns, leading, and even how to define a visual hierarchy using text. It even has details on specific HTML tags for type along with special characters you can use to keep your type effective.

Chapter three (also by Young Sun Compton) is where it gets interesting. This chapter acknowledges the fact that many web designers want to forget—type online is more than just web pages. There are now ebooks that read and display HTML as well as other devices. In many ways the digital landscape now is as wide open with possibilities as it was when I started writing about HTML and web design in 1997. And it’s great to see a book take that into account. One thing that I really like about this chapter is the reminder that not only do people consume digital content, but software programs and digital devices do too. And if those devices can’t read your type, then you’re missing out on an audience.

Chapter four, by Javier Lopez and Alice Hom, is all about type and interface. This chapter seemed dry at first, but as I dove deeper I realized how exciting it really is. It goes into wireframes, interaction elements, and even type as navigation. I love that it acknowledges that the vocabulary surrounding type is expanding as we use new and different devices and approaches to visual design and interactivity. There are also discussions of fun things in this chapter like drop shadows, gradients, and making your text disappear and reappear. One part I really like are the examples for visualizing data. Infographics are really fun to make and read these days and often they are primarily type, so knowing how to display that data well visually with your type is critical.

Chapters five and six go into the same amount of detail around type used in logos and icons and in animation and code. What I especially like about these chapters are the case studies that show you exactly what they mean and make it easy to visualize what you should do with your own logos, icons, and animations.

The Book Isn’t Perfect

Because this book is an edited collection of articles, sometimes the flow was a bit choppy between sections. It might have felt more cohesive if only one person had written it, but I think ultimately having the multiple authors helped the book. It made it more authoritative because it is difficult for one person to know everything there is to know about some of these complicated subjects.

My other issue was that while the title is Type on Screen there was very little discussion of how type on screen is different from type on the printed page. Most of us can make out the differences, but for design purposes it helps to know so that you don’t do something on a screen that works better in print and vice versa.

Finally, there is not a lot of actual code in the book. As I mentioned, chapter two discusses web fonts, but there is no explanation of how to do it using HTML or CSS. Since this book is a guide for design, not a how-to instruction manual, this didn’t bother me. But if you’re looking for the nuts and bolts of how to use and manipulate typography on screens, this is not the book for you.

Inspiring Responsive Web Designs

Fri, 30 May 2014 23:25:06 +0000

There are so many inspiring sites out there and I love the responsive ones the best. Here are some great inspirational sites that I’ll be featuring in my responsive web design book. Check these out on your mobile phone, tablet, and desktop. Most of them have at least three breakpoints, and they all look good.

Possibly the First Responsive Web Page

Andersson-Wise

Design Week Portland

Snohomish Aquatic Center

Mr. Simon Collison

About Family Crafts

Food Sense

Internet Images

BBC News

City of Snohomish Washington

Comments:

Tom Hagerty - May 5, 2015

I just finished reading Responsive Web Design and am enthusiastic about getting to work making my two sites responsive. Your suggestion of using just two breakpoints with small, medium, and large makes me feel optimistic. If I had to use a dozen breakpoints I’d be overwhelmed. I hope I can do what I have to on Expression Web 4 since I’m used to the program. But maybe I’ll have to try some of the other editors you mentioned.

Jennifer Kyrnin - Jun 4, 2015

Good luck Tom! I hope that you can use your familiar editor. If you can edit the HTML and CSS code directly, then you should be able to.

Not all design testing tools are created equal

Fri, 16 May 2014 19:45:01 +0000

I’ve noticed lately a proliferation of websites like Responsive Design Testing Tool which claim to offer a way to test your responsive web designs in different browser or device widths. I happily began testing some of the pages I design and noticed that they didn’t look right—the designs weren’t responding to the width. After checking my CSS @media queries for errors I had an idea. Check the page on my iPhone.

Do you notice anything interesting about these four renderings?

If you go to the Responsive Design Testing Tool and put in a web page you know is responsive, you might notice something like what I saw in the screen shot above. What you’re seeing is the About.com home page rendered in four iframes at the four listed dimensions. If you look closely, you’ll notice that all four images in the frames are exactly the same size. This is because while the iframes loading the page are set to the width and height of the devices, the pages are rendering based on the browser window itself, not the iframe widths.

When I viewed the page on my iPhone the responsive features kicked in as they were supposed to and I saw the page as it was supposed to look.

Here’s what the page looks like on a real iPhone

As you can see, on a real iPhone the About.com logo is smaller and on the black background. The navigation has been reduced down to the icon. The headline and image are both fully visible. And there is no horizontal scrolling required. In other words, About.com modified the layout responsively based on the viewport of the iPhone.

Be Wary of Online Emulators

There are a number of sites like the Responsive Design Testing Tool that claim to be RWD testing tools, but in reality they are just iframe page loaders. And because most pages take their cue from the device window rather than a width set on an HTML element like an iframe, they just show the page as it would look on the browser it’s in.

I decided for the hell of it to see how About.com’s page would render in the iframes of the Responsive Testing Tool on my iPhone. Below is the result:

The Responsive Design Testing Tool on an iPhone

The immediate red flag for me when viewing this site on my iPhone was that the testing tool page itself made no effort to be responsive. You could argue that that’s because it really needs to be viewed on a desktop browser, but it was very difficult to scroll horizontally to see any of the iframes other than the 240x320 (small phone) frame. Other things I noticed were that the URL field did not use the URL input field, which made it slightly tougher to type in on my iPhone and it cut off the iframe completely on the right as you can see in the screen shot on the left.

All in all I wouldn’t trust this tool to do any testing on my websites. I’d be better off doing only testing on my browser and not worrying about mobile devices.

What Can You Use?

While online emulators might not be the best solution for testing responsive websites, you can use them to test non-responsive sites to see how your pages might render on a smaller screen device.

Another option you have for testing is to use an emulator. You can get an iPhone emulator from Apple and an Android emulator from Android.

Want to Learn more about Responsive Web Design?

Available Oct 2014

I am writing a book on responsive web design Responsive Web Design with HTML5 and CSS3 in 24 Hours, Sams Teach Yourself. It is available now for pre-order on Amazon and other places where books are sold.

Comments:

David W - May 4, 2014

Thank you. I have been saying this for months. the problem seems to be the difference between max-width and max-device-width. If the latter is set, then the page will not render correctly in an iFrame set to a pixel size. I’m not sure it’s possible to fool the browser engine to accept a different screen size, the way you can fake a User Agent String. Great article Thanks David

Jennifer Kyrnin - May 5, 2014

Thanks! I was starting to wonder if I was the only person noticing this issue. :-) As so many of the testing sites use iframes and then all have this problem.

My New Book Available for Pre-Order

Thu, 24 Apr 2014 16:15:09 +0000

I’m excited to tell you that my next book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours is available for pre-order on Amazon.

Comments:

Johnf938 - May 4, 2014

Hey, thanks for the blog article.Really looking forward to read more. Much obliged.

My favorite RWD navigation articles

Wed, 02 Apr 2014 19:14:10 +0000

Navigation is a critical part of any website design, but it’s amazing how many web designers simply “set it and forget it.” In other words, it’s tempting to create a navigation menu once and then just leave it the same for every device size. But navigation is important, and building one version and hoping it’ll work for all is very risky.

I’ve been researching how to design navigation for responsive websites and I’ve discovered a lot of great article and information. Here are my favorites:

Usabilla - 10 Tips How To Handle Responsive Navigation Menus Successfully

I think what I like best about this article is that it’s less about the HTML, CSS, and JavaScript of the navigation and more about the strategy behind the navigation changes.

Palantir - Scalable Navigation Patterns in Responsive Web Design

This is a great case study in how Palantir created a series of templates for a large university. One thing they did that I really admire is they collected edge cases. These are the places where the design falls apart, such as text scrolls out of a box or images float strangely or whatever. Navigation is a place where these edge cases can break a design.

Responsive Nav

I am very excited by this tiny JavaScript plugin. It includes things like CSS transitions and touch events And they claim it works in all major browsers including Internet Explorer 6.

CSS Tricks: Convert a Menu to a Dropdown for Small Screens

This tutorial shows you how to create a responsive navigation that converts to a select menu when the screen is small enough. But what’s cool is that Chris shows you how to set it up automatically with jQuery so you don’t have to have more than one menu.

Comments:

Jeff Smith - Apr 4, 2014

Thanks Jennifer, I have always found your articles to be thoughtful and beneficial to adding to my knowledge base of web design.

Jennifer Kyrnin - Apr 1, 2014

Thanks Jeff!

увеличить губы гиалуроновой кислотой - Feb 2, 2023

I really like it when people come together and share views. Great blog, keep it up!

Responsive Web Design Book is Moving Right Along

Fri, 21 Mar 2014 23:00:34 +0000

[caption id=“attachment_591” align=“alignright” width=“200”] This tree is halfway done too!

As of today I am about half way through the writing of my next book sSams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours. If you’d like to be one of the first to know when it’s available for purchase you can sign up here or subscribe to the HTML5 blog.

After the break is the current table of contents. You should be aware that this is not the final version, I have changed it with every chapter I write, but this will give you an idea of what I’m planning. Let me know if you think there is something missing or you’d like to see something different. There is still time to make changes!

Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours Table of Contents

Part 1: Introduction to Responsive Design

1 What is Responsive Design?

History of Responsive Web Design
- Web Pages Started with Little Design
- CSS Gave Designers More Control
- Designers Started Adapting Layouts to Customers
- Mobile Browsers Made Things Harder to Design
- Responsive Design Finally Entered the Picture
Why We Need Responsive Web Design

2 Alternatives to Responsive Design

Table-Based Layouts
CSS Layouts
- CSS Positioning
- CSS Floats
- Modern CSS Layouts
Detection Scripts
- Browser Detection
- Mobile Detection
- Object Detection

3 The Growth of Mobile

Basic Cell Phones
- How to Support Basic Cell Phones
Smartphones
- How to Support Smartphones
Tablets
- How to Support Tablets
Retina Devices
- Why Build Retina-Ready Websites
- How to Build Retina-Ready Websites
Why Responsive Design is Important

4 Progressive Enhancement

What is Progressive Enhancement?
How to Use Progressive Enhancement on a Website
- Separation of Content from Presentation and Functionality
- Start with the Content Layer
- The Adjust How the Content Looks
- Finally Add Interactivity
Benefits of Progressive Enhancement

5 HTML for Responsive Design

Use HTML5
- Tags Every Page Should Contain
- Basic Tags for Web Content
- HTML for Layout
- Some Useful Attributes
Clean Code
Don’t Forget Semantic Elements
- Standard Semantic HTML Elements
- New HTML5 Semantic Elements
- Consider Microformats
Validate your HTML

6 Basic CSS

How to Write CSS Rules
- CSS Syntax
- Embedded and External Style Sheets
  - Embedded Style Sheets
  - External Style Sheets
Styling Fonts and Colors
Creating Layout with CSS
Understanding the Cascade and Specificity
- What is the Cascade?
- What is Specificity?

7 Unobtrusive JavaScript

What is Unobtrusive JavaScript?
- Separating Structure from Behavior
- Supporting Usability
- Writing Clean and Semantic HTML
How to Implement Unobtrusive JavaScript

Part 2: Building a Responsive Website

8 Planning a Responsive Website

Should You Make Your Website Responsive?
How to Plan for a Responsive Website
- Check Site Analytics
- Evaluate Existing Content
- Make Decisions About the Content
- Write the Site Plan

9 Mobile First

Why Design for Mobile First?
- Mobile First Changes the Focus to Content
- Mobile First Lets You Experiment with New Technologies
- Why Mobile First Works
What Makes a Site Mobile Friendly?
- Give Your Readers Options
- Your Readers Can Affect the Display Too
What About Mobile Only?

10 CSS Media Queries

What is a Media Query
- Media Types
- Media Features
Media Query Expressions

11 Breakpoints

What is a breakpoint?
How to Define Breakpoints in Your CSS
- First Define the Styles that Remain the Same for Every Device
- Then Add in Specific Styles for Small Screens
- Finally Add Media Queries for Larger Screens
Optimal Breakpoints
- Best Practices For Breakpoints
- Breakpoints for Retina Devices
My Recommended Breakpoints

12 Layout

What is Web Layout?
Types of Layouts
- Fixed Width Layouts
- Fluid or Liquid Layouts
- Elastic and Hybrid Layouts
Columns
- Old Style Columns
- CSS3 Columns

13 Navigation

Comparing Mobile to Desktop Navigation Design
Use Progressive Enhancement to Add More to Desktop Designs

14 Fonts and Typography

Using Web Fonts
Sizing Fonts
Pixels vs. Ems vs. Percentages
Rem sizes

15 Images

Creating Responsive Images
Sizing Responsive Images
Creating Retina-Ready Images

16 Videos and Other Media

Most Videos are Fixed-Width
How to Make Videos Responsive
How Other Media is Affected by Responsive Design

17 Tables

Tables on Small Devices
Can Tables be Responsive?
How to use Tables with Responsive Design

18 Responsive Forms

HTML5 Forms
Important Form Features for Mobile
Adjusting Form Design

19 Using RESS with RWD

What is RESS
Responsive Design Plus Server Components
Benefits of RESS
How to Install RESS

20 Testing

Start by Testing in Your Browser
Test in a Device for All Your Breakpoints
What to do if you don’t have the devices to test with

Part 3: Improving on Responsive Design

21 Tools for Creating Responsive Designs

Responsive Frameworks
- Foundation
- Bootstrap
- Fluid 960
- Gridless
Font Tools
- IcoMoon
- Lettering.js
Images and Media
- Foresight.js
- Compressive Images
- ImgSizer.js
- FitVids
Software
- Adobe Edge Inspect
- Dreamweaver
Websites and Newsletters
- This is Responsive
Responsive Templates
- Templates for WordPress
- Templates for Drupal
- Web Page Templates and Where to Find Them

22 Problems with Responsive Web Design

Speed of pages
Extra work for designers
Customer dissatisfaction
Advertising

23 Device and Feature Detection

Why Use Detection Scripts
WURFL
Modernizr

24 RWD Best Practices

Give Everyone the Best Experience
Breakpoints
Images
Content
Keep Costs In Line
Examples of Amazing Responsive Design

Happy Birthday World Wide Web #web25

Thu, 13 Mar 2014 04:12:37 +0000

The web has been around for 25 years now, which is really amazing when you think about it. I was in the Peace Corps when I first heard of the World Wide Web and I was one of like three volunteers who found a way to get email while we were there. I had to go to someone’s house and he’d sign into his account and then we could piggyback from there to an email account. By the time I was getting ready to leave (2 years later) the Peace Corps office was setting up email for all the volunteers, but we still didn’t have web access.

In 1995, I returned home and got a job at a local business–NETCOM. It turned out I was working for a company that gave people access to the internet, and I barely knew what that was. I was working as a phone technical support representative, and it was challenging to say the least. I put people on hold a lot as I asked questions and repeated what the customers on the phone were asking me. I’d say I’ve come a long way since then.

When I started working on the web, it was black and white (or green and black, on the terminal screen I used) and all text. I spent a lot of time doing things like cleaning up Gopher, chatting on IRC, and reading alt.netcom.sucks. None of these things were the web, but I used them a lot more than I used the web, because there really weren’t many pages out there. When Mosaic started being able to support images and NetCruiser was developed it was incredibly exciting for all of us in tech support. Although, honestly, NetCruiser was more like bad news for us in tech support. One of the common info files we used for answering customers was called sales.lied, which isn’t very reassuring, but was our only honest reply to some questions.

In 1995, my roommate and I would search akebono.stanford.edu to find interesting facts on the few websites that were out there, and then quiz each other. The goal was to find the weirdest fact of the day. What made me laugh was the day several years later when I won an internet trivia quiz for knowing that that URL was the original URL of Yahoo!. For fun we would flood internet polls nominating Ender’s Game as the best book of all time. I wrote a bot to vote for that book (yes, the book, not the movie) 100 times a minute until the website went down. At first I thought I’d broken the Internet!

Things are a lot easier now, but also a lot more corporate. I sometimes long for the crazy, heady days of the early web, but I think it’s grown up pretty well. Happy Birthday, WWW!

Working on a Book on Responsive Web Design

Mon, 03 Mar 2014 20:23:15 +0000

Tentative cover for my next book - Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours

I’m close to half way through the initial writing of my next book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours. The full title is quite possibly the longest title in the history of the universe. Okay maybe not, there was that movie The Englishman Who Went Up a Hill But Came Down a Mountain. That looks longer, shoot, no that’s only 58 characters long!

But regardless of the length, the book is coming out soon, and I’m pretty excited. I hope you are too.

Over the next few weeks I’ll start posting more about that book as well as about HTML5 information. I’ve got some big plans for this site, and I hope you enjoy them. As always, if you have any questions about HTML, CSS, or even responsive web design, don’t hesitate to ask.

Macaw - A Visual Responsive Web Page Editor

Tue, 07 Jan 2014 23:10:18 +0000

Macaw is a new web editor for web designers and developers. It was one of the first visual RWD (responsive web design) editors available. It came out to Kickstarter backers on December 31, 2013 and debuted to the public in 2014. It is based on the same style of design as graphics tools like Photoshop to help you “draw the web” rather than code it. This should make it easier for web designers to use to create decent HTML, CSS, and even JavaScript to pass on to developers or post directly to the web.

About Macaw

Operating Systems: Macintosh and Windows
Publisher: Macaw, LLC
Price: $79

Best Things About Macaw

It is very easy to create responsive designs with multiple breakpoints.
There is a shortcut to add placeholder text that is really easy to use. (type “lorem_#_p” where the # is the number of paragraphs you want, then hit the tab key and that number of paragraphs of placeholder text will appear in your document).
Macaw generates decent looking HTML, better than you might expect for a WYSIWYG editor.
Macaw allows you to choose what elements, classes, and IDs to use.
It is reminiscent of image editors like Photoshop, making it more familiar to designers.

But There are Some Drawbacks

It can be slow to respond at times.
Extra container elements were added that I didn’t expect.

I enjoyed using Macaw. I built a 3-breakpoint simple responsive design website faster than I ever have in the past, and that includes the time it took me to figure out how to use the tool. This, in itself, is pretty amazing to me.

Some of the Features I Really Enjoyed

Resizing elements based on the grids was easy.
Grouping elements and then giving the resulting container a name like HEADER resulted in HTML5 semantic code much more easily and quickly than I thought possible.
I was able to create a responsive design with three breakpoints in very little time.
I loved the outline view. Like with Photoshop layers,it was really nice to be able to show and hide elements just by clicking the eye icon. This also helped me see how the code would be written.
I chose a random font from the list that was included, and they automatically added the web font code from Google for me. I could also use my own fonts, but there were a lot of choices (even if most of them seemed to be sans serif…).
I love that they have a shortcut to add multiple paragraphs of placeholder text right in their text tool.
The CSS and HTML it generates can still be a bit more DIV heavy than I would write, but with the outline tool, it’s possible to see that and get rid of some of the extraneous tags.

Get Macaw!

It’s a cool web editor.

Another great HTML5 book

Tue, 07 Jan 2014 20:10:05 +0000

[caption id=“attachment_574” align=“alignleft” width=“150”] A great book to get started with HTML and CSS.

I was the technical editor for this book. So all the errors you find that are technical in nature are my fault. :-) Of course, if you do find errors, there isn’t much I can do about them now.

Seriously, I read this book cover to cover and it’s got a lot of information well packaged in a way that you will be familiar with if you’ve read my HTML5 book.

Julie Meloni has an easy style of writing and makes it fun to learn about HTML and CSS. You should pick up a copy for your friends who want to get into web design

Comments:

Tessie - Mar 0, 2014

how do i go about building mobile apps? what do i need to get started? where can i find or get the possible requirements. Thank you.

Jennifer Kyrnin - Mar 4, 2014

Hi @Tessie: your questions don’t really have a simple answer, at least not one I can condense into a blog comment. :-) But here’s my attempt. Perhaps others might have other answers: building mobile apps - well, first of all, I cover that in the book in great detail. So buying a copy or checking it out of your local library is a good step. But my book only covers creating web applications. You can also learn Objective C and build native iOS apps or Java and build native Android apps. Both of which will probably take a while. what do you need to get started? the minimum you need is a computer and the will to try things out. I have a lot of information on my About.com website that can help you learn how to build mobile web applications. And there are tons of other resources online as well. Beyond that, learning to program as I mentioned above is a good start or you can work on creating dynamic web applications with HTML, CSS, and JavaScript. I hope that helps, Jennifer

Tessie - Apr 2, 2014

Thank you… it helps but a little i will try your recommendations out

I'm working on a book proposal, and I need your help

Thu, 19 Dec 2013 17:24:29 +0000

[caption id=“attachment_569” align=“aligncenter” width=“300”] Sass or RWD?

I am working on a book proposal for my next book, but I need your help. I can’t decide what I want to write about. I’m considering:

Responsive web design - where I would explain what it is, how to do it, tools that can help, and problems with the design This would be a book for advanced beginners and intermediate web designers who know HTML and some CSS but want to get more familiar with media queries and responsive design.
SASS - where I would explain how you can turn your CSS into something dynamic and exciting using SASS SASS is a CSS extension and this book would be for people who are already familiar with CSS and want to create more dynamic and interesting sites using SASS.

What do you think I should write my next book about? If you’d rather I write about something else, please let me know in the comments.

[poll id=“4”]

Comments:

Wayne Martin - Dec 4, 2013

want to see the book about: Responsive web design thanks, wayne.

No more HGROUP

Tue, 14 May 2013 18:39:14 +0000

The HGROUP element in HTML5 has been in and out a couple of times. It’s now out. It’s officially obsolete in the HTML5 specification which means that you should not use it.

sigh

So what do we do to create sub-headings that are not part of the HTML outline? Well, here are some suggestions from the W3C HTML5 spec:

First, don’t use H1-H6 elements, unless of course, they head up a new section.
You can use paragraph tags inside the HEADER element. Then you can style those elements with CSS child selectors (or however else you’d like to) to denote that they are subtitles. <header> <h1>Lord of the Rings</h1> <p>Return of the King</p> </header>
Another option is to separate the sub-title from the title with a colon. For example: <h1>Lord of the Rings: Return of the King</h1>
You could also use the SPAN element around your sub-title, but keep it all within the same heading tag: <h1>Lord of the Rings <span>Return of the King</span></h1>

For most people this change probably won’t matter too much. After all, the HGROUP element wasn’t used very often. But I found it useful and intuitive, and while I realize the specification is still in draft, I wish that this element had stuck around.

The arguments against it center around:

It doesn’t indicate which heading is the sub-heading I think this is obvious from the H1, H2, H3 structure. H2 is a sub-heading of H1, etc.
Heading semantics are still apparent even without the element. But with the above methods this is no longer true. Especially when you take into account that the W3C recommends against using heading elements unless they are starting a new section.
The specification concatenated all headings anyway for accessibility I’m not sure why this matters. They still are headings and sub-headings.
The HGROUP element acted as a DIV by another name This is the most coherent argument against the HGROUP element.
Almost no one uses it Perhaps true, but not everyone uses HTML5 either.

Ultimately, it doesn’t really matter.

I may have used HGROUP all the time, but now that it’s gone I’ll simply stop using it. It really doesn’t impact my sites a lot, and if I leave it in some pages until I get around to updating them, it won’t matter as the browsers that recognize the element (for style calls, and so on) will continue to do so.

Yes, I’m a tad disappointed, but I won’t lose any sleep over this. Goodbye HGROUP, it was fun while it lasted.

HTML5 vs native apps

Tue, 12 Feb 2013 16:45:13 +0000

I have believed that for most situations, HTML5 apps are going to be the new normal over native apps because they are much more flexible. It is more possible to create an HTML5 app to “run everywhere” than a native. Why? Well for starters Android apps are written in Java and iOS apps are written in Objective C.

Apparently Business Insider feels the same: HTML5 vs. Apps: Here’s Why The Debate Matters, And Who Will Win

Comments:

bijaya - Feb 1, 2013

i like your link

Jennifer Kyrnin - Mar 3, 2013

Thank you

Still Here, but Busy

Fri, 25 Jan 2013 20:11:38 +0000

Some people have wondered if I’m still around or maintaining this site (and the book) and I am, I’ve just been fairly busy. I hope to announce some exciting new things in the coming months, but in the meantime I can’t post as often.

If you want to learn HTML, my book is a great place to start, and you can also get help on my site at About.com: Web Design / HTML.

Latest Zeen issue is now live

Fri, 14 Sep 2012 17:30:12 +0000

Teach Yourself HTML5 Zeen - Issue #2

I’ve posted the second issue of my HTML5 Zeen today. There are a few things that are wonky with the issue, most notably that Zeen says it’s “Issue #3” when it’s #2. But whatever.

In this issue I show you some ways to get started with HTML5 if you haven’t already. Including the cover image which shows you the basics for what you need to write to create an HTML5 document.

Writing HTML5 is Really Easy

All it takes is a DOCYTPE:

<!doctype html>

And you’ve got an HTML5 document. One thing that most people forget is that HTML5 is not a new language. It’s evolved from HTML 4.01 and HTML 3.2 and all the versions before. So if you’re writing HTML 4.01 today, you can start writing HTML5 by just changing one line of your HTML. Don’t worry about changing anything else.

The Zeen issue goes into more detail about dealing with older browsers like IE8 and using editors like Dreamweaver to write your HTML5, but at the end of the day, just putting up the new doctype is all it takes. Poof! You are using the most up-to-date specification. That didn’t hurt a bit!

Comments:

Sunday Ayodele - Sep 6, 2012

Hi,with simple and straightforword instruction given by you here,then i can say HTML5 is easy to learn.but to me i only stop or stay on HTML3.2.With this level,if i jump to Html5 can i still cope?

Jennifer Kyrnin - Sep 5, 2012

@Sunday Ayodele: You can switch to HTML5 gradually. Nearly every element in HTML3.2 is valid in HTML5, so you can start by simply changing your doctype to the HTML5 doctype. Here’s a good article to check out: 8 Ways to Get Started with HTML5 Today

Sorry for the delay — I didn't forget the giveaway

Thu, 13 Sep 2012 17:34:25 +0000

Life just got the better of me for a while there. I’m happy to say that I’m nearly caught up. Now that school has started I might have a little more time. :-) But you don’t care about that, you want to know who won!

[caption id="" align=“alignleft” width=“132”] Adobe Dreamweaver CS6 on Demand by Perspection Inc. and Steve Johnson

The following people won a copy of the book Adobe Dreamweaver CS6 on Demand:

Leigh C-M
Janet
Sunday ayodele
Lisa Vincent
Karen

and…

[caption id="" align=“alignleft” width=“113”] Adobe Muse on Demand by Ted LoCascio

The following people won a copy of the book Adobe Muse on Demand:

Aggrey
Yussuf Olawale Afeez
Sudheer Marath
Kenny SILVA
Deb Tilton

I’ll be contacting you directly to get your mailing address and get it off to my editor. If you don’t hear from me within 10 hours, please contact me directly.

Comments:

Sunday Ayodele - Sep 5, 2012

I am so much thank Mrs Jennifer Kyrnin for her faithfulness to the said giveaway in which i am fortunate to be one of the winners.Enormous vote of thanks to you.

Sudheer Marath - Jul 1, 2013

I am so much thankful to Mrs Jennifer Kyrnin for her faithfulness to the said giveaway in which i am fortunate to be one of the winners.Enormous vote of thanks to you.

Sudheer Marath - Jul 3, 2013

Please send my book to the following mailing address below: Sudheer Marath Adityabirla Minacs, 3rd Floor, Millennium Towers, ITPL Road, Bangalore - 560 037, India Mobile: +91 89046 52459

Playing with Zeen - I created an HTML5 magazine

Thu, 30 Aug 2012 03:38:28 +0000

[caption id=“attachment_490” align=“aligncenter” width=“757”] Latest issue of HTML5 Zine

I’ve been playing with the new webzine creation tool: Zeen. I’ve linked to several of my articles about HTML5 from About.com. I hope you enjoy my first issue.

Tools to Write HTML5 and Another Giveaway

Sun, 12 Aug 2012 20:58:48 +0000

I’ve been building web pages since 1995 or 1996, and as such I am very comfortable inside the HTML. And when I started building pages, at first there were no editors dedicated to writing HTML, and then when they came along, they were text editors. Writing web pages visually, like in a word processor, was unheard of.

When visual web editors came on the market, they produced HTML that was a tangled mess of tags and characters, and they were very difficult to decipher. Plus, they would often not work as well outside the editor (i.e. inside a customer’s web browser) as they did in. So, I, like most designers of that time, quickly learned to distrust WYSIWYG (what you see is what you get) editors.

But, if you do the math, that was over 15 years ago. And the market is starting to catch up. In fact, Adobe has two products that create great HTML5 web pages without any or with very little interaction with the HTML code: Adobe Muse and Adobe Dreamweaver. I have tried out both of these products, and while they are definitely aimed at different markets, they are both great.

These two books will help you get started with these tools:

Adobe Dreamweaver CS6 On Demand and Adobe Muse On Demand

Before you decide if these books are useful to you, you should check out a free chapter:

[Adobe Dreamweaver CS6 on Demand Chapter 2: “Getting Started with Dreamweaver CS6”](https://www.html5in24hours.com/chapters/Adobe Dreamweaver CS6 on Demand chapter 2.pdf “Adobe Dreamweaver CS6 on Demand Chapter 2”)
[Adobe Muse On Demand Chapter 6: “Working with Graphic Styles and Effects”](https://www.html5in24hours.com/chapters/Adobe Muse On Demand Chapter 6.pdf “Adobe Muse on Demand Chapter 6”)

Another Giveaway!

Comments:

Karen - Aug 0, 2012

Dear Jennifer Thank you so much for this article, and for the giveaways. I am a stay-at-home mom and I’d like to learn how to create websites as a way to make a little extra income. I’d love to receive a copy of Adobe Dreamweaver CS6 On Demand. I have been trying to get on a course to learn to use Dreamweaver for about a year now without any success. The course nearby keeps getting cancelled as there are not enough students who enrol each time, and so the course gets postponed. As I say, it’s been almost a year that I have been enrolling and being put off until the next time. If I could have a copy of the book, I could start training myself instead. Thank you so much!

Deb Tilton - Aug 1, 2012

I would like to learn desktop publishing. there are a lot of things you can use it for and I would like to get started.

Duane Spurlock - Aug 1, 2012

I like how each of these chapters is organized according to a step-by-step principle, suitable for novices: no prerequisite knowledge need be brought to these books by the reader. In a world filled with ever-more-complex applications and upgrades, finding the right book for dipping one’s toes into the water (to mix a metaphor) is increasingly difficult. That said, I prefer the Dreamweaver book. I come from a cut-and-paste publishing background, and I can fumble my way through designing a document with InDesign, but web design still eludes me. This chapter on Dreamweaver looks like an excellent introduction for my skill level (which, to be honest, is somewhere in a sub-basement). Thanks for sharing!

Sudheer Marath - Aug 1, 2012

Thanks Jennifer for your good work.I read both Adobe Dreamweaver CS6 On Demand and Adobe Muse On Demand free chapters. It was one of the best ever book i have read in my entire life. Now a days it is very difficult to get such kind of books with it’s simplicity, professional style and presentation of each topic. Firstly I want to have the Dreamweaver CS6 book. I’ll be lucky if i get a chance to get both of these books. I will surely recommend these books to my friends. Thank you.

Yussuf Olawale Afeez - Aug 1, 2012

I like Adobe CS6 very because i’ve been using CS for a long time so i like to know what’s latest in CS6, though will like to know what adobe muse is all about

Aggrey - Aug 1, 2012

Hi, There are many tools which have sprung up especially in the area of designing websites using code. I have been working with HTML and at the moment trying out PHP. This means that I really need to study and practice using code because at the moment I am a graphic designer with good graphic design skills. Regards Aggrey

Barbara Fay - Aug 2, 2012

Dear Jennifer, •Adobe Dreamweaver CS6 on Demand Chapter 2: “Getting Started with Dreamweaver CS6” is a treasure! I and six of my gal pals, ages 68-84, have dabbled with creating websites to post our blogs and sell unique greeting cards. We collaborate on line to edit each other’s work. This book would be of great value to our group. I am confident that this program could help us upgrade our skills and launch more effective website pages. What I appreciate about chapter two is the format. The directions, hints, options and examples are all provided in well written english on pages with plenty of white space. That is a welcome contrast to other titles with long paragraphs of dense tecnical language.

Densie - Aug 2, 2012

Thanks for your articles and for the giveaways. I would love a copy of Dreamweaver CS6 as I have just taken a position in our ecommerce department and while I learned HTML some time ago, I never used dreamweaver and I’m playing catch up. I think the book would come in handy.

Omar Owens - Aug 2, 2012

Hello Miss Kyrnin, I would love the Dreamweaver book to futher my knowlegde with the software. I also may be taking the class in the near future so i would olove the chance to read ahead. Thank you in advance! Omar

gabriela avina - Aug 2, 2012

Hi Jenifer, I would like a copy of the book. Graphic designer and I’m very interested in what the interent page design. Every time I read your page and learn something new. Here is a page that I’m doing to my husband …… I have still much to learn. The practice is the key but I need a good guide as your website and a good book. thanks

Jennifer Kyrnin - Aug 2, 2012

@gabriela avina Which book did you want? Thanks!

Jennifer Kyrnin - Aug 2, 2012

@Densie to be clear: this is a BOOK giveaway, not the Dreamweaver software.

Leigh C-M - Aug 3, 2012

Hello Jennifer, Have just finished reading the chapter from Adobe Dreamweaver CS6 On Demand. This sounds like my kind of book. I love the way the pages are set out, including two columns of text to a page. However, I do prefer text to be formatted to the right as well as left. It just looks neater in my opinion! All the little extra tips, how to do (and what not to do)items really make this book. I am about to design a website from scratch for a not-for-profit community family history group, and the book may be my saving grace, as I have very little experience in this field. As a volunteer for this project, I shall keep my fingers crossed that I am lucky enough to win one of the books. Keep up the good work!

R. Gary Rasmussen - Aug 3, 2012

Hi Jennifer, Web development is not a part of my job description. I work for the American Meteorological Society (a nonprofit organization) and my main responsibility is to help get the three main sectors of our community (academic, for-profit, and government) to stop squabbling with one another and work together for the common good of the community, and the nation. One way to do this is to hold face-to-face meetings where people can discuss common issues and problems. To facilitate networking among the attendees before, during, and after these meetings I have created a web site that provides photos, business cards, and bios of the people attending the meetings. I don’t use either of these expensive Adobe products (yet) but would like to study the books to see if investing in one or both would be a good use of our scarce resources. Thanks for your blog, and your About.com articles. They are a huge help! gary

Lisa Vincent - Aug 3, 2012

Hi Jennifer, I have learned so much from your “About Web Design” emails (articles) and I enjoy receiving them. I would be thrilled to be selected to receive a copy of the book Adobe Dreamweaver CS6 On Demand.

William - Aug 3, 2012

Hi Jennifer, I’ve been reading your articles for a few years now, and I’ve even taken your xhtml and css courses. I’ve learned a lot and have been inspired to start a freelance web design company. I plan to open for business before the end of the year. I own Dreamweaver, but I still have much to learn. No doubt, the Dreamweaver book will be a major help. I would love to have a free copy of the Dreamweaver book. William

alice Loddigs - Aug 4, 2012

Thanks so much for all your helpful articles. Both of these books look interesting, I want them both! but I would definitely start with the book on Dreamweaver, because it is the software I have and use. The improvements look interesting and encouraging, and the book very readable and useful.

Sunday ayodele - Aug 4, 2012

Hello jennifer,i’ll be so much happy to get the DreamWeaver cs6 or to get the both because i can’t afford to let your potential books pass me by without my landmark on them.i am also a young web designer following the great strides of achievers like jennifer kyrnin & other local professionals in my locality.i had also messaged you in your facebook message box.pls try & check it.i and my classmates have made you as our super model.i gave my coursemates your website address,even lecturers respect me for my ardent research when i recommended it for them.they feedback me with awesome testimonies.pls i seriously need the both books.the simplicity of the book is amazing.thank

Enrique - Aug 4, 2012

Hi Jennifer, I have seen both free chapters and they were really good. But I’d like the Adobe Dreamweaver CS6 on Demand. I think that the explanation how to use that software is very clear and it’s a good way to learn it. Does the books are e-books? Thanks for the oportunity to participate. Enrique

Janet - Aug 6, 2012

Thanks for the giveaway. I wish to get Adobe Dreamweaver CS6 on Demand because I just quited my flash designer job and wish to look for web designing job. I Would like to take this break to refresh & brush up my Dreamweaver skill and builds portfolio before start to find job. The last time I learnt was using Dreamweaver Cs2. So I hope I will have this book to startup. =)

Kenny SILVA - Sep 2, 2012

Seems that is a bit late but I am one of those dreamers that never give up! I would love to have a copy of those books since I started a small business that (God willing) will become a franchise. My designer went back to his country and still looking for a responsible one. I realized that I cannot depend on them and need to learn ASAP. Please have me in consideration for your giveaway. Thank you for your work and congratulations Kenny Silva Producer

Five Book Winners Plus A Consolation Prize

Fri, 03 Aug 2012 04:55:22 +0000

I am happy to announce the five winners of my book. I’ll contact each of you directly to get your mailing address so that my publisher can send you your free copy. I’d really appreciate it if you could post a review on Amazon.com about it when you’ve read it, but that is, of course, not a requirement.

The winners are:

Debbie
Holly
V. Berry
Ellen Picard
Peggy Shields

Thanks to everyone who participated. As a consolation prize, I have posted another chapter free for you to download (via PDF): Hour 12: Audio and Video in HTML5.

Comments:

Ellen - Aug 3, 2012

Thanks Jennifer. I look forward to receiving my copy. Will be a treat to learn some new HTML tricks with HTML 5. Ellen

Read a chapter and enter to win a copy of the book

Tue, 24 Jul 2012 19:11:16 +0000

If you haven’t gotten your copy of the book yet, now is your chance to check it out in advance. I have posted a PDF copy of Hour 10: Drawing with the HTML5 CANVAS Element for you to download and read. This is a full-color PDF copy of the chapter exactly as it appears in print. If you want to learn how to build HTML5 CANVAS images, this free chapter is a great place to start.

I am pleased to announce that I have five copies of my book — Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours to give away to readers of this site or the Facebook page. To enter, simply comment on this post how you think you would use this book or why you want to learn HTML5. Winners will be chosen at random on August 1st, 2012. You can also get additional entries by liking my Facebook page and subscribing to the newsletter.

I will announce the winners here on August 2nd. Good luck!

Comments:

Mary | A-List Blogging - Jul 2, 2012

Your books sounds awesome, Jennifer. Congratulations on writing something that is so valuable for your readers

Jennifer Kyrnin - Jul 2, 2012

Thanks Mary!

Bobbi Emel - Jul 2, 2012

Wow, Jennifer, this is an exciting giveaway! Congratulations on your book - I know it’s a lot of hard work. Looking forward to reading the free chapter.

Amanda - Jul 2, 2012

I would love to read your new book! (I’d even re-read Hour 10.) I’m very interested in what code is being deprecated and how to keep up with the new standards. My husband and I have been tossing around creating mobile apps, so I’m really curious to see how HTML5 helps promote programming for this ever-gaining technology.

Karen Padua - Jul 2, 2012

How exciting to find a book as simple as this one. I already subscribe to most of your newsletters, if not all. I am currently trying to learn HTML, and I find your information to be very straightforward and helpful! Thank you!

Peggy Shields - Jul 2, 2012

I appreciate the opportunity to learn from About.com Web Design - I’m sure this book is going to rock! Looks like a lot of fun. Now if I can just find that 24 hours to do it! Thanks, Jennifer.

Ellen Picard - Jul 2, 2012

Jennifer, I started following you about 7 years ago when I decided it was time I learned CSS, and update my HTML skills. Now that I have read so much from you and others about HTML5, it’s time I knuckle down and learn it!

TJ Sims - Jul 2, 2012

I just finished the chapter ten pdf and I am excited to learn more. I have used Sam’s Teach Yourself in 24 Hrs books before and the format is fantastic. Jennifer, I like your easy to follow, streight to the point style. Thanks!

Suku - Jul 3, 2012

That’s great!.. I’m new to HTML5. I think this book will help me to have a great experience over the same. Thanks Jennifer…

Anne - Jul 3, 2012

How timely! I am trying to get my daughters interested in web programming and have recently proposed a cooperative project of creating our very own HTML 5 game. It’s the first time they’ve been stoked about the idea of creating ( both are avid gamers). While I know quite a bit about HTML CSS and am taking a course in JavaScript, I know nothing about using canvas in HTML 5. this book would go a long way in introducing us to it!

Scott O - Jul 3, 2012

I love these books, and really need to get my head wrapped around HTML 5. Thanks for the opportunity!

Stacey - Jul 3, 2012

I would like to get your book as I am new to all this but am interested In checking this out as a career tool! thanks!

Jeannette Lewis - Jul 3, 2012

Having learned Flash, it looks like this would be easier to use. I am very interested in reading more.

George - Jul 4, 2012

That’s a well written chapter ! Every feature is presented thoroughly, yet in a way it makes it easy to it grasp at once. I want the whole book ! :D

Tim - Jul 4, 2012

Very nice chapter! I’ve tried a few times to understand and it never took hold. Your explanation, especially starting without assuming the reader already knows something about it, was great. Looking forward to reading the whole book… For FREE! :)

Debbie - Jul 4, 2012

Would absolutely LOVE a copy of your book! I need to re-learn HTML (or at least a big update). I got away from it when I retired, but I am now volunteering with an animal rescue group and could do great things :-) with an updated understanding of HTML. Thanks for the opportunity to win it!

Terrance - Jul 4, 2012

I’m a web student currently upset with my schools web program. I’m spending money for nothing. Majority of my learning comes from online resources instead of the school. Sometimes it’s hard to find reputable and knowledgeable sources, but you are definitely one in my opinion. Keep doing what you do, thanks a bunch!

Karin - Jul 4, 2012

Getting up to speed after several years away from web development. From the sample, it looks like this book will be a good resource.

Rob Smith - Jul 4, 2012

As a photographer, you need an “and”. Something that complements photography that helps earn enough to live on. Web design is a great “and” to have, and HTML 5 is the future compatible of web design and Sams are a great way to learn it. Rob

V. Berry - Jul 4, 2012

You and Sam’s do a great job making the most complicated things easy to understand! I need to make my sites mobile and iOS friendly and HTML5 is the way to do it. Hour 10 rocked, and I’m really looking forward to reading the entire book and learning how to get my web sites on smartphones and iPads around the world. Thanks Jennifer!

Sue - Jul 5, 2012

Congrats on your book! I’ve been working on improving my mobile design and code, and your book will be just the ticket.

Suleiman - Jul 5, 2012

Your good work had given me the courage to have more interest in web designing which i tought it to be a difficult task initially. But with your simple and strieght to the point explanation, i hope to win a copy of your give away book and to be one of the good web designers. I enjoy reading your post on the net. You are a good teacher, keep it up please and God bless you Jennifer. Suleiman .A

Cynthia Woods - Jul 5, 2012

Wow! I like the chapter I’ve read. It’s easy to follow. I’m in a Graphic Communications program at my Community College. I will be doing more web design classes also. I know that I will need HTML 5 soon and your book would be a great help! I feel that as a good Graphic Designer I will need to know all that I can about web programming.

Robin - Jul 5, 2012

I would like this book to enhance my graphic design education. I’m a college student and I think it would be a great addition. =-)

Aggrey Chunguli - Jul 0, 2012

Hi, I am a trained graphic designer and a self taught Web designer. At the moment I am very good with Dreamweaver - wether using frames, tables or AP DIVs. What I am really struggling with is HTML or basically code, which I am pulling all the stops to learn as I know it is vital. Your book will be a big boost to my skills Reagrds Aggrey

Holly - Jul 1, 2012

I’ve been subscribed to your Desktop Publishing tips and classes for more than a few years now & still look forward to each email I get. I can’t wait to read your book, having it all in one will be a invaluable resource.

Aneesh - Jul 2, 2012

When I stuck with some stuffs, your writings and your root cause knowledge helped me to sort out those. Looking forward for your nice tips and all the very best.

Arnold Williams - Jul 2, 2012

I am a photographer and community college teacher. I need to progress to HTML5.

Riady Bakri - Jul 2, 2012

I have been planning to have my own design website to put all my photography works. Your coming book certainly will help to get the web realized ..looking forward to see them soon.

Naheem - Aug 3, 2012

I Would absolutely like in your new kind of book…this is nice effort, thank you for sharing……….

Stuart Barkley - Aug 3, 2012

Jennifer, I completely rewrote the standupworld site after having found a few of your CSS tricks (especially DIV alignment and floating everything) on about.com. I would be very interested in your HTML5 book as I find your way of explaining things suits me perfectly. Clear, to the point, understandable and demonstrated with examples. Thank you for helping your average guy like me to build better sites. Regards, Stuart

Lynnie Riley - Aug 3, 2012

I teach Wep Page Design to juniors and seniors in a high school. These students elect to take my class and they absolutely LOVE coding. I have been trying to motivate myself this summer to update my lessons to include HTML 5 and your book is the perfect venue? Great work!

Jennifer Kyrnin - Aug 3, 2012

I think you might be thinking of Jacci Bear for desktop publishing. I send newsletters out on Web Design from About.com not DTP. But I’m glad you’re enjoying the emails.

I'm loving SVG

Tue, 03 Jul 2012 19:48:31 +0000

One of the great things about HTML5 is that there is a proposal in the W3C to allow HTML5 and XHTML to include SVG inline in the documents. But what’s especially great is that if you’re using a modern browser (IE 9+, Firefox, Safari, Chrome, or Opera) you can embed SVG graphics in your HTML5 documents quickly and painlessly.

I am loving SVG because I don’t have to learn anything new. I can simply create vector graphics in Adobe Illustrator and then embed the SVG code into my HTML like I would any other image or embedded element. I don’t even have to use any special tags to call it out, I just paste everything from the starting <svg> tag to the closing </svg> tag.

Here’s an example. Note, I have added a <switch> tag to call a fallback image if your browser doesn’t support inline SVG. This might result in you seeing the image twice, but I hope not. :-) If, when you right-click on this graph, you see a PNG image, then you’re seeing the fallback image.

[iframe_loader src=“https://www.html5in24hours.com/examples/inline-svg.html" height=“310”]

If you look at the HTML for that image, you’ll see a lot of <g> and <path fill="#FED7B8" d="M149.878,150.489l52.584,112.768c-62.28,29.041-136.311,2.097-165.353-60.184 c-14.521-31.14-15.905-62.854-4.154-95.141L149.878,150.489z"/> and other stuff that might look like gobbledygook, but it’s all SVG, and I didn’t have to come up with any of it. My program, Illustrator, did all the heavy lifting.

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

Comments:

Beth - Jul 4, 2012

Love getting your helpful hints.

Stan - Jul 0, 2012

Just starting to learn into this Canvas/HTML5 & need more patience for better understanding. Sounds very positive & looks good! Thanks for this kick-start help. God bless! Stan from Windhoek

Bob - Sep 2, 2012

Stan, Canvas/HTML5 and SVG are different. Canvas is a raster image while SVG is a scalable image.

What is ugly HTML?

Thu, 28 Jun 2012 00:02:11 +0000

Yesterday, someone asked me the question:

“What is ugly HTML?”

And I realized that this isn’t necessarily an obvious thing. HTML is often ugly simply because of how it looks, this mostly centers around readability for me:

All one line and/or minified This is very popular with minimalists and people who are very concerned with the speed of their pages. Minifying the code is a technique to remove all extraneous spaces, new lines, and characters to keep the HTML as small and streamlined as possible. Yes, this does speed up the pages, and I even recommend that you do it, but I really hate looking at it. It’s ugly.
Too little formatting (and too much) By formatting, I mean the tabs and new lines that make the HTML easier to read. This is similar to the first item in this list, but I think we should take this further and include too much formatting as well. I have seen pages where there are two or three nested tables, and every single table row and column is indented from the container. This can get insanely hard to read after a while. e.g.

<table> <tr> <td> <table> <tr> <td> <table> <tr> <td> …

All caps HTML Yes, this is valid in HTML5 (and HTML 4), but it’s ugly and hard to read. I think some people do it so that they can see the tags more quickly, but although you can see the tags, it’s hard to differentiate them at times. I recommend avoiding all caps for headlines because they are hard to read, and the same goes for HTML tags. If you need to edit the HTML later, it can be that much harder to find the problem if they are all in capital letters.
Invalid HTML This is the ugliest HTML of all because it can make a page show up incorrectly at the most inopportune times. It’s not a difficult thing to validate your HTML (I like the W3C validator, myself) and this can save you so much time in the future.

Then there is the ugly HTML because it’s using old-fashioned methods:

Too many DIVs It’s like when people learned CSS for layout they only learned to put the CSS on one tag – the DIV element. So every block of text, every image, everything on the page is surrounded by one or more DIVs. Yes, this is technically correct. Yes, it works. But man, it’s ugly. It provides no extra information about the content beyond that it’s a block that might have some styles applied to it. I particularly hate when they add the styles to a DIV that is surrounding another, perfectly functional block-level element like a UL element. Why not style the UL? Save yourself a few characters!
I hate it when people add spaces using Just like the above, it works, and it makes the page look like you want, but really, that’s what CSS is for. There is this wonderful property: margin, that you can use to set the margins around any element – and rather than relying on the space set by a paragraph tag, you can define it to exactly the size you want.
I hate it even more when people use tons of <BR> elements in a row

Yes, it shoves things down, but just like the above item, the margin property works better and takes up less download time.
Hiding content in strange places One site I visited once used the title attribute as a way to hide content. When you moused over certain sections of the page, the title content would show up. But the browser I was using showed the title content in a little yellow box as well, often covering the very content that the designer was trying to place. Use JavaScript and place the content in the page. HTML5 even offers a hidden attribute that you can toggle on and off if you want the content to appear and disappear.

What do you think makes ugly HTML? Or does the HTML not matter as long as the page looks good?

Comments:

Sofia Khatoon - Oct 5, 2012

Thanks for a wonderful book on this topic. Just noticed spelling “Reset Default Foont Size” in companion web site on Hour 6. Also wanted to ask if you can share samples of styles-320.css which makes the puzzle page appear in two column in the book.

Jennifer Kyrnin - Jan 5, 2013

I’ll look for these and get them up on the site. Thanks for the compliment.

8 Ways to Get Started with HTML5 Today

Fri, 22 Jun 2012 04:40:22 +0000

HTML5 has been around for a few years now, and yet there are still a lot of people who are resistant to using it. But there are a number of aspects of HTML5 that you can start using today without any worries about compatibility whatsoever:

The DOCTYPE <!doctype html> This is required in order to write HTML5, but it also won’t hurt your site even in older browsers. Browsers that don’t necessarily recognize the doctype will still display the page correctly — they’ll just use quirks mode.

The shortened meta character set <meta charset="utf-8"> This was implemented in HTML5 because every browser out there defines the character set from this tag. And the browsers implemented it because web designers were doing it by mistake.

Remove the type from SCRIPT and STYLE elements <script src=""></script> <style></style> In HTML 4 it was required that you use the type attribute to define scripts and styles. But as long as your style sheets are using CSS and your scripts are using JavaScript (ECMAScript), you can leave off the type designation and they will work without any issues.

Sectioning elements <section>, <article>, <aside>, <header>, <footer>, <nav>, and so on You can add the sectioning elements into your existing HTML and they won’t change the way the page looks at all. Browsers that don’t recognize them will ignore them, and browsers that do will add that semantic information to the site.

Other semantic elements <mark> and <time> Like sectioning elements, these add semantic information to the content, but browsers that don’t recognize these elements will simply ignore them.

Use the id attribute instead of name While both attributes are valid in certain situations, you can use the id attribute to create anchors within your text. This isn’t an HTML5 specific change, but all modern browsers support linking to an ID with the pound-sign (#), for example: <h1 id="headline1"> <a href="#headline1">

Use placeholder links <a>placeholder link</a> A placeholder link is just a link that doesn’t have an href attribute. They are another item that most web designers have used at one time or another, and now with HTML5 they are valid.

Use the new INPUT types in your forms When you use an input type of email on your email input fields, browsers that support it will validate that the data looks like an email address. And browsers that don’t support it will simply ignore the type and treat it as a text box.

HTML5 WebSocket now available on Amazon EC2

Mon, 23 Apr 2012 14:00:00 +0000

Kaazing announced today that they will be releasing their WebSockets solution on Amazon EC2. As you learned in Hour 19 of my book, WebSockets are a way to open a full-duplex connection between your web server and your customer. This helps you build applications and games that are faster and give real-time information to your customers. WebSockets applications are great for games but they also are a good choice for stock tickers, news tickers, and chat or IM applications. In fact, Kaazing is offering a free webinar on how to Build On-Demand Messaging as a Service Platforms on Tuesday, May 15, 2012 from 9:00am–9:30am PT.

By making their solution available on the Amazon EC2 cloud service, Kaazing and Amazon are making it even easier for small and large businesses to add the value of WebSockets to their sites.

Comments:

Sebastian - Nov 0, 2013

Hi Jennifer, is it possible to make this AMI highly available? I have to make my WebSockets as solid as possible. What happens, if one node goes down and my client (Browser) tries to reconnect? Normally, in this case a load balancer (like ELB) recognize that and redirects following requests to the instance which is still alive. On WebSockets, this is a problem. Thank you, Sebastian

Learn the HTML Elements Removed from HTML5

Tue, 17 Apr 2012 20:45:17 +0000

There are several HTML 4 elements that have been removed from HTML5. In order to use HTML5 correctly, you should stop using these elements.

In HTML 4 elements that removed from the specification are “deprecated,” but in HTML5 they are “obsolete.” The difference is that in HTML 4, deprecated elements should be removed from support by browsers. While in HTML5 obsolete elements are ones that may still be supported by browsers, but it that designers use other technology instead.

HTML Elements Removed from HTML5

acronym You should use the abbr element instead.
applet Instead of this tag, you should use the embed element or the video and audio elements.
basefont You should set font properties with CSS.
big This tag has no semantic value, and so you should define the styles in the CSS.
center You should center with CSS.
dir You should use the appropriate unordered or ordered list instead.
font You should set font properties with CSS.
frame Replace frames with iframe or converted to non-framed sites.
frameset Replace frames with iframe or converted to non-framed sites.
noframes Replace frames with iframe or converted to non-framed sites.
strike Replace this tag with either the s element if the text is no longer accurate, with the del element if the text has been removed, or with CSS if the line through the text is just stylistic in nature.
tt Define the font styles with CSS.

Learn the New HTML5 Elements

Tue, 17 Apr 2012 17:57:12 +0000

One of the first things you want to learn when you start learning HTML5 are the new elements. There are several new HTML5 elements to add new features and functionality to HTML5.

New HTML5 Elements

Document Metadata

meta charset
This is a new, shortened form of the character set meta data. It was added to the specification because web designers were writing the original character set meta tag incorrectly and browsers were supporting it.

Sections

section
A discrete section of the document.
nav
Navigation.
article
An article or page section that could be syndicated.
aside
A page section that is tangentially related to either the current page or the site as a whole.
hgroup
A group of headings.
header
The header information for a section or page.
footer
The footer information for a section or page.

Grouping Content

figure
Content that is self-contained and referenced as a single unit within the flow of the page.
figcaption
A caption for a figure.

Text-level Semantics

data
Contents that have a machine-readable format that is defined in the value attribute.
time
A date or time with a machine-readable format defined in the datetime attribute.
mark
A block of text that is highlighted for some purpose beyond the context of the current page.
ruby
Ruby annotation used in some double-byte languages.
rt
Ruby text.
rp
Ruby parenthesis.
bdi
A span of text separate from the page contents for bi-directional formatting.
wbr
A line break opportunity.

Embedded Content

embed
The insertion point for embedded content.
video
An embedded video with it’s associated source files and language tracks.
audio
An embedded audio file with it’s associated source files.
source
Source file for embedded video or audio.
track
Supplementary tracks for captioning or secondary audio tracks on videos.
canvas
A scriptable bitmap area for creating images and animations on a web page.

Forms

input type=search
A search box text field.
input type=tel
A telephone number input field.
input type=url
A URL input field.
input type=email
An email address input field.
input type=datetime
A date and time input field.
input type=date
A date input field.
input type=month
A month input field.
input type=week
A week of the year input field.
input type=time
A time input field.
input type=datetime-local
A local date and time input field.
input type=number
A number input field.
input type=range
An inexact number input field.
input type=color
A color input field.
datalist
A list of pre-defined options for an input field.
keygen
A key pair generator control.
output
Scripted form output.
progress
The completed progress of a task.
meter
A scalar value within a known range.

Interactive Elements

details
An element where the user can get additional information.
summary
A caption or legend explaining the parent details element.
command
A command that the user can invoke.
menu
A list of commands.
dialog
A part of an application that the user interacts with such as a dialog box.

HTML5 can increase mobile usage

Tue, 10 Apr 2012 17:01:23 +0000

If you’ve been wondering whether or not to convert your site (or create a new site) using HTML5, then the news from Usablenet (via TechCrunch) is welcome. Apparently, just adding a few interactive elements with HTML5 you can increase the engagement on your website and this makes mobile users especially want to stick around, up to 28% more in fact. One thing the headline doesn’t say is that it also decreases bounce rates by 15%—in other words, 15% fewer people are leaving right after showing up.

Now this isn’t just a matter of adding an HTML5 doctype to the top of your pages and calling it good. No, you need to do more with the HTML5 specification before you can look forward to those 11% more pageviews, lower bounce rates, and higher engagement. Doing things like:

Adding an interactive gallery or slideshow
Including location services
Expandable and collapsible boxes (to show and hide content)
Using shopping cart overlays (instead of dragging them off to yet another page)

All of these things make your site more interesting and interactive. And when you add HTML5 features like location services that are well suited to mobile phone use, well, of course mobile phone customers are going to appreciate that.

Remember to always test your new designs and interactivity as much as possible. You don’t want to see a gain in mobile users of 28% while losing 50% of your desktop users. But the outlook is great for HTML5, and as mobile use grows in popularity, HTML5 websites will be the beneficiaries.

Does Facebook buying Instagram mean anything to HTML5 development?

Mon, 09 Apr 2012 20:21:25 +0000

I just read an article on SF Gate via Business Insider that said that because Facebook is buying Instagram for $1 billion they are backing away from HTML5.

Yes, Instagram is a native app, not an HTML5 web application. But I don’t see that as a signal that I should give up on HTML5 applications in favor of native apps. I see that as a signal that Facebook thinks they can recoup over a billion dollars from the Instagram app because they think it will add that much value to their other offerings.

The same article states that web applications can be slower than native applications. Sure, this is true. But it’s also true that web applications can be faster. And yes, Facebook’s application could be slow, but I suspect that was more due to a somewhat rushed dev cycle and not enough time to optimize things rather than simply because HTML5 apps are slower. By buying Instagram they can add those features into their Facebook app without having to reinvent the wheel.

The article also states that the reason that the Facebook app was so slow to load was that “every screen in the app had to load like a Web page.” And as proof, they linked to a Business Insider article that says “With the Facebook iPhone app, there are 6 screens a user has to go through before a user can actually take a picture.” I suspect that Nicholas Carlson may have been confused when he read that. I don’t read that as meaning that every page has to load like a web page, but rather that there are 6 screens or steps to go through before you can take a picture, compared to Instagram’s 1.

I honestly think that this is a good, if expensive, move on Facebook’s part. They get a photo app that is already very popular, and I’m sure we will see Instagram style features in the Facebook app in the future because of this acquisition. But I think it says a lot more about how Nicholas Carlson feels about HTML5 (negatively) than it does about how Facebook feels.

Drag and Drop upload–the final step

Mon, 09 Apr 2012 13:00:45 +0000

Many tutorials on drag and drop with HTML5 do everything but the actual upload step. This is because that step requires server interaction and scripting–you can’t just use JavaScript. But the HTML5 Doctors have a way to use XHR2 (xmlHttpRequest) to get the upload done too! Drag and Drop and Automatically Send to Server

HTML5 Video Codec Wars

Sat, 17 Mar 2012 14:50:02 +0000

One of the reasons many people dislike HTML5 video is because you have to encode the video in multiple codecs to work on multiple browsers. In fact, in an article I just read that was one of the reasons to hate HTML5. He said, if you have to encode it in flash to support IE why bother doing anything else.

Well I’m on an iPad and my answer to that is, if you don’t encode it in something other than flash, I won’t be able to view it. And whether you like it or not, the iPad and other mobile devices are becoming more important.

But that’s not what I want to talk about today. The reason people don’t like HTML5 video is because there are so many codecs. Which wouldn’t be so bad except that you have to encode your video in all of them, to support the majority of browsers. That means webM, ogg Theora, H.264 and flash. And then the Mozilla organization announced they would be supporting H.264.

Does this bother you? Many people see it as Mozilla caving in. After all H.264 still has a patent surrounding it and so Mozilla is no longer supporting their goal of an open web.

I applaud Mozilla for trying to keep that goal of an open web. But ultimately I think they need to change and go with the codec that most people are using, H.264. Because without a video codec that most people use Mozilla and their browser Firefox become less viable in the marketplace. And with fewer browser manufacturers, the remaining ones will feel less and less pressure to go along with consumer needs for the browsers.

In fact, I believe if Firefox had not added support for H.264 they would not succeed on the mobile browsers as a viable alternative.

Adobe Shadow a great new tool for HTML5 app development on mobile

Wed, 07 Mar 2012 18:17:22 +0000

I have seen a lot of software come and go in the past 20+ years. And most of the time, while the innovation is interesting and fun, I haven’t seen anything that really made me think “this will really help me in my work,” but Shadow is the happy exception.

I only downloaded Shadow about an hour ago, and I’m already very impressed. I have connected my iPad, iPod touch, and Galaxy Tab to it and can see, immediately, how my pages, both on a local server and live on the web, look on those devices. I’m loving this product.

HTML5 is well suited for mobile and if you’ve seen the news from ZD Net, it is even faster on iOS than Android. And now you can test and fix problems so much faster than you ever could before.

Have fun testing your mobile pages, because it just got a lot easier. Go Get Adobe Shadow

I feel compelled to mention that I’m watching the Apple Liveblog on Engadget now. Which wouldn’t have a lot to do with this post except that I’m watching it on Shadow on my iPad. :-)

Slashdot review

Thu, 12 Jan 2012 18:42:27 +0000

I was very pleased to see this review on Slashdot yesterday. Michael J. Ross did a great job finding the problems and explaining what the book is about. He even commented on some things that I found annoying, and I wrote the book! :-) But of course, my favorite part is the last paragraph:

“Despite the aforementioned blemishes, this book is definitely worth a look, because it is currently one of the most complete tutorials for learning how to use HTML5 for creating mobile apps and web sites.”

I have already addressed some of his concerns, such as getting the code samples and errata linked from the site navigation (oops!). And I’ll be making notes of the errors he found to correct for a future printing.

Linking to the code samples would help…

Thu, 12 Jan 2012 01:53:50 +0000

Sometimes I am really blind.

The code samples are both up and linked to in the navigation above. I admit, it’s hard to find them when the link isn’t showing up.

I am still working on getting all the exercises added. And I will have all the full-color images live by the end of the week. Thanks for all your patience!

Comments:

Rich Collins - Jan 1, 2013

Hi Jennifer, love your book, excellent tool for learning HTML5 & Mobile. Just 1 query - some of the text in the code samples appears to be in Spanish !. Is this intended ? Regards, Rich

Jennifer Kyrnin - Jan 5, 2013

@Rich No, the code samples are not supposed to be in Spanish. In a few places, I used placeholder text rather than actual words, but I didn’t write anything in Spanish. :-) Do you have a page number or URL I can look at?

Examples have been indexed

Mon, 09 Jan 2012 21:12:29 +0000

All of the examples mentioned in the book have been live since July 2011, but now they are finally indexed. You can now find the examples by hour to see how they work online.

I will be working on getting the code samples, figures, and exercises up as well. Thanks for your patience!

The Book is Here!

Mon, 12 Dec 2011 22:20:20 +0000

The Book is Here! Do you have your copy yet?

I got back from my vacation and the box was on my porch. Happy Birthday to me!

Comments:

Will - Jan 3, 2017

I have the book, Sams Teach Yourself HTML, CSS and JavaScript Web Publishing (7th edition). I registered the book but found NO SOURCE CODE on web. I wrote to the publisher, and replied there was no source code. Can you help me how to locate!

Jennifer Kyrnin - Feb 3, 2017

The source code is hosted on this website here

Will - Feb 6, 2017

No, sorry. It is not that book. The book I have is “Sams Teach Yourself HTML, CSS and JavaScript Web Publishing (7th edition). Your site is for the book “Teach Yourself HTML5 in 24 hours” it is different!!!

Jennifer Kyrnin - May 6, 2017

Sorry. I don’t have the code samples for that book - you need to get them from InformIT. If they don’t have them, then they probably never were created beyond what is in the book files themselves.

The Galleys are Here—The Book is Nearly Ready!

Thu, 17 Nov 2011 18:54:21 +0000

I am now working on reading through the book again in paper format. I’m pleased to say that so far, it looks great! This is the exciting part as it means that the book is nearly ready and will soon be in your hands. It is available for pre-order from Amazon.com right now. And don’t worry, if you want to read it on your Kindle or as an eBook it you will be able to get it in that format as well.

Seeing the galleys is a great feeling as it means that all my hard work is nearly ready for you to see. I hope you like it and find it useful.

The TIME Element Has Been Removed in Favor of DATA

Thu, 03 Nov 2011 00:03:32 +0000

As of October 29th there is a new element in HTML5: DATA. The DATA element is for defining content that has both human- and computer-readable data. Some examples of this are:

Dates and times
Numbers
Colors
Money

Each of these can be written in a way that a human will understand, while a computer might not. For example, a date can be written December 16th, Dec 16, 12/16/11, 16 December, and many other ways. While it is possible to teach computers to know that all those things are dates and what they meant. So you can set the value of a date on a data element with a standard format that computers can read.

<data value=“2011-12-16”>December 16th</data>

With the DATA element and its required attribute value you can define data for microformats and microdata as well as for scripts on your web page. The content displays in a format that humans appreciate and the value attribute has the content in a format that computers can read and use.

The `DATA` Element Replaces the `TIME` Element

In the same revision to the HTML5 specification that brought us the DATA element, it also removed the TIME element from the specification. While you might be disappointed, this is really a good thing. The TIME element was limited only to date and time formats and as such had a limited scope. With the DATA element you can mark up all sorts of things that can be defined in both human- and computer-readable formats, you are not just limited to dates and times.

How This Affects the Book

I submitted my final revision of the book on October 25, 2011—four days before this change went into effect. The book covers the TIME element, but does not include the DATA element.

Save 35% off HTML5 for Mobile Web Applications

Tue, 01 Nov 2011 01:51:14 +0000

There is a new resource center on Informit.com to help you learn about HTML5: Informit.com/html5. This page includes articles, chapter excerpts, and books to help you learn HTML5. My book is there, as well as a bunch of other great titles. Use the coupon code HTML52011 to get 35% of all book titles that you purchase from that site. The book will be available soon. I’m excited. I hope you are too!

Using HTML5 Video and Audio

Fri, 21 Oct 2011 19:10:03 +0000

On my About.com site I wrote an 11-page article explaining how to add video using HTML5 with fallback options for Internet Explorer. I also have a similar (although a lot shorter) article on how to add sound with HTML5. And I get a lot of emails about them saying “I tried this in _____ browser and it didn’t work.” And I’m expecting to get the same type of feedback from chapter 12 when the book comes out.

Now, I admit, I am human. I make mistakes and things get munged in publishing and so on. I tested both the articles on About and the chapter code extensively, as did my technical editors. And I’m confident that it works in modern web browsers, even Internet Explorer.

Follow the Steps Precisely

The video article is especially tough because it’s so long. Who wants to wade through 11 pages of stuff just to post a video? Wouldn’t we all rather be shooting our films instead? But none of the pages are in there as fluff. If you want your video to work in modern HTML5 compliant browsers as well as Internet Explorer 8, then you need to read and do them all. And I can tell by my statistics that people aren’t doing that. In fact, while the first most popular page is page 1, the next most popular is page 5. Page 9 (where you make it compliant with IE) is only 1/2 as popular as page 5.

The thing is—this stuff is very picky. You have to follow the steps exactly, or it won’t work. In fact, it took me a long time and many trials and lots of errors before I could get it working well enough to write the articles and chapter. This means that it can be very frustrating.

In my opinion, the frustration is made up for by the benefits you get from using HTML5 for video and audio. You may disagree.

And if You Do Find an Error…

Please let me know. As I said above, I’m human, and I do make mistakes. But I can’t fix them if I don’t know about them, and since I tested it I think it works as I wrote it. So I don’t know about any errors. Please don’t hesitate to let me know about problems with the articles or the book when you find them. I’d really appreciate it and it might even help you get your video and audio working!

Who is the HTML5 in 24 Hours Book for?

Thu, 20 Oct 2011 18:19:40 +0000

I’ve been working on editing the proof copies of the book for the last several weeks and one thing that keeps popping to mind is the audience. I wrote the book intending it for a beginner audience, but I should clarify this. When I say that it’s for beginners, I mean beginners to mobile and web application development, not beginners to HTML.

I wrote the book to teach people who already have some knowledge of HTML and web development how to use HTML5 to create mobile web applications. The book is not intended to teach someone who has never built a web page before how to write HTML. There are lots of books available that you can use to learn HTML. These are some of my favorites:

I hope that designers and developers interested in learning how to build mobile web applications will find my book useful. And if you’re still learning HTML, there’s always my site on About.com to help you get started. I have tons of resources there to help beginners learn HTML and web design.

Dive Into HTML5 is Back

Tue, 18 Oct 2011 17:02:53 +0000

You may have noticed that one of the best websites for learning HTML5 suddenly went dark a little while ago. Apparently the author, Mark Pilgrim, decided to exit the internet and took all his writing with him. And this meant that he marked the site Dive into HTML5 as 401-Gone. I was disappointed both because it removed a valuable resource and because I loved his “The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything” Which made it easy to quickly detect whatever HTML5 thing I wanted to detect, without having to memorize it myself. I wasn’t terribly upset, as I bought a copy of the book version, HTML5 Up and Running in eBook format long before I even knew of the website. But it was still a loss for anyone else wanting to learn HTML5.

So when some html5homies put it back up at http://diveintohtml5.info/ I was very happy. This is very good news. And what’s even better is that they are going to continue to add to it to keep it up-to-date and accurate.

Starting to get the code samples up

Sun, 09 Oct 2011 04:58:56 +0000

I’m starting to get the code samples and figures up on the site. I’ll be adding links to them in the Table of Contents so that you can see them in the context of their chapters. I’m also adding links to the figures in the book, in full color. And eventually all the examples will be linked as well. As we all know, doing the maintenance of a website is the tedious part. ☺ Which means that I tend to be slow about it. But I’ll be posting these as fast as I can. And as always, you can see all of code, figures, and examples in the book itself, right now on Safari Rough Cuts.

Comments:

Sean Leiba - Jul 5, 2016

Hi Jennifer can you direct me to where I can see the examples, view and download the source code for Responsive Web Design in 24 Hours. Thanks

Jennifer Kyrnin - Aug 3, 2016

Hi Sean, All the files are located on this site here: https://www.html5in24hours.com/books/rwd-book/ Note: the examples aren’t currently online and the source code is copy paste, not available by download.

Available for Preorder

Sat, 08 Oct 2011 04:44:59 +0000

I’m pleased to let you know that the book is now available for pre-order on Amazon: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours. Plus the Safari Rough Cuts version has all the chapters now. And if you buy the Rough Cuts version, I’m told you’ll be automatically converted to the final version when that is posted on Safari.

Right now, I’m working on editing the proofs, which is a hard part of the book writing process. It’s especially hard because something in the transfer process munged some of my chapter sub-heads. So I’m going through each chapter with a fine-toothed comb. Slow going.

After that’s done, I’ll be working on the videos for the extended eBook edition. I’m having a lot of fun with this.

First 20 Chapters Available for Reading

Wed, 27 Jul 2011 20:17:51 +0000

You can now get the first 20 chapters on Safari Rough cuts! Here is a preview link.

Feel free to subscribe, add comments to the book, and let me know what you think.

GeoLocation versus "personalized advertising"

Sat, 09 Jul 2011 04:33:21 +0000

I’m writing about GeoLocation right now, and what interests me is that the specification requires that the browser ask permission before getting location data. That’s great.

But what I find interesting is that to use GeoLocation, we web designers have to ask permission. But when it comes to serving “personalized” advertising, apparently no permission is needed.

The only saving grace is that the ads tend to use IP addresses that puts my location as “Bothell, WA” which is 10-15 miles away from where I really am located.

Do you want to solve an HTML5 puzzle?

Mon, 06 Jun 2011 01:59:58 +0000

I’ve been working on HTML5 drag and drop this week, and I’ve created a simple puzzle that you can play with in any HTML5 browser: HTML5 Drag and Drop Puzzle

Yes, it’s a pretty easy puzzle, but I do like this photo of my dogs. And it shows you how you can implement HTML5 drag and drop. The full instructions will be in Hour 16 of the book

The start of a simple online HTML editor with HTML5

Sat, 28 May 2011 04:16:16 +0000

I’ve been playing with contenteditable all day today, and let me tell you it’s been fun.

I now have the workings of a simple HTML editor using contenteditable. Just type in your text in the left side, format it with the buttons and see the HTML on the right.

This editor is still in progress, but I was pleased by how its coming along, so I thought I’d share it with you.

If you’re wondering, this editor will be included in Hour 14 of the book.

Comments:

Sandy Brown - Nov 0, 2012

I will be teaching a course ,“Mobile Application Programming” in the spring, using this book. Does anyone have a list of software needed to use this book effectively in a lab? I need to let my IT staff know ahead of time what needs to be downloaded and installed, so the lab can be ready to go by the end of January.

Jennifer Kyrnin - Jan 5, 2013

The first chapter should list the software you need. I may have put that in the preface too. I forget (and the book isn’t handy right now).

Nearly half way!

Wed, 18 May 2011 21:44:37 +0000

I just posted Hour 11 to my editors last night. Today I start working on either video/audio or forms. I can’t decide which I want to tackle first. Hopefully soon I’ll have some information on the Safari Rough Cuts version of the chapters. So that anyone who wants to see them early can sign up.

Working on the book, but I need your help

Fri, 29 Apr 2011 16:58:02 +0000

I’ve submitted four chapters to the publisher for review and editing. 1/6th down! Yay!

I also took the time to update the Table of Contents.

One of the parts of each chapter that I struggle with is the Q&A section at the end. I would love it if you could look over the contents and if you have questions, please let me know. The more actual reader questions I can answer the better the book will be.

HTML5 Speech Input Added to Chrome

Thu, 28 Apr 2011 01:51:07 +0000

The latest version of Chrome now adds support for speech input. This gives you the opportunity to let your readers actually talk to your applications and web pages, rather than be forced to type.

While this might not seem terribly useful, there are very useful applications, such as:

speak words to translate or get a definition
ask for directions of a map
hands-free browsing
zooming and panning with voice commands

I don’t know about you, but I have a vision of an HTML5 application where I could upload a photo, and then just say “zoom” and “enhance” and zoom in on the photo, like all those TV shows do.

And to do it, you just add a speech attribute to the <input> tag. For example:

<input type=text speech id=spoken-input>

Of course, to get it to work in Chrome you have to use the Webkit extension as well:

<input type=text x-webkit-speech=x-webkit-speech speech id="spoken-input>

I’ve got a simple working (if you’re on Chrome) example here.

Bruce Lawson's list of HTML5 gurus on Twitter

Fri, 22 Apr 2011 18:34:27 +0000

If you’re looking for people to follow on Twitter, a great list of HTML5 people are listed on Bruce’s blog.

Who do you follow for HTML5 updates?

Borders on tables now ok in HTML5

Fri, 22 Apr 2011 16:05:05 +0000

If you use tables (not for layout, of course) it can be very tedious to get the borders to surround every cell using CSS. You need to set the border on the table and on every th and td, and then collapse the borders with border-collapse. I don’t know about you, but I would often just add the border attribute to the table, just to get it done quickly.

Well, this week the HTML5 working group decided to make that okay again. They agreed that many tables need to have borders to define the cells. The proposal pointed out that putting CSS on a table to define the borders would not be carried over when the table was moved between implementations. In other words, if you wrote a table in an HTML document, and then ported that document into XML, the borders in CSS would stay with the CSS, not with the table.

Now it is legal to write `<table border>` to add borders around your table and table cells. I, for one, am pleased!

Comments:

Steven K. Mariner - Mar 5, 2015

This is good news and a welcome relief. I was starting to wonder if the fine folks who worked on the HTML5 standard even used HTML anymore. The insane amount of overhead required by the use of CSS to do everything suggested they have forgotten that sometimes *people* make web sites, and mobile devices have to load them *slowly*. Mandatory content increase is a bad idea, and HTML5 is littered with it.

YouTube delivers WebM video

Wed, 20 Apr 2011 20:42:40 +0000

The YouTube blog announced yesterday that they are now serving videos in the WebM format. They will continue to support H.264, and they are committed to continuing to develop their HTML5 player. You can join the HTML5 player trial at their site.

I’m curious, what video format would you like to see win? [poll id=“2”]

HTML5 last call now has a date

Tue, 19 Apr 2011 16:29:57 +0000

According to IT Pro, the W3C has set a deadline of May 24, 2011 for the last issues to be delivered about the HTML5 specification.

This is exciting news for the standard, as it means that browser makers will start building to it in earnest, web designers can be more confident that the sites they build won’t need hacks, and HTML5 will grow in popularity and importance.

How about this table of contents?

Tue, 19 Apr 2011 05:41:22 +0000

I’ve uploaded the book’s table of contents. It’s still being written, so it may change.

I would love your feedback. What do you think of the topics I’m going to cover? Is there something about HTML5 that I don’t appear to be covering from that list? Let me know in the comments either here or on the TOC page itself. Thanks!

Picking the Right Video Player for Your HTML5 Video

Sun, 17 Apr 2011 19:24:57 +0000

Unfortunately, while HTML5 brings us a much easier way to embed videos into your web pages, but because of many factors, it still(!) isn’t possible to just drag your video into the video tag and then slap it up on the web. By using a player you can get your HTML5 video up and running quickly.

But which player should you choose?

Philip Bräunlich has you covered! He’s created a chart of (currently) 20 different HTML5 video players, along with details like: what license they are released under, if they have a Flash fallback for non-HTML5 compliant browsers (darn you IE8!), and other features. I especially like that he evaluates how easy or hard they are to implement (for example, OSM Player is “hell no” not easy to integrate).

Right now, none of the players support every feature he’s evaluating, but it certainly is a lot easier to use these players with the features you need or want than it is to roll your own.

What’s your favorite HTML5 video player? Let us know in the comments!

Welcome to my new blog about HTML5

Fri, 15 Apr 2011 06:11:34 +0000

I am excited to start working on this blog about HTML5. In it I’ll provide sample sites written in HTML5, links to tutorials on other sites, references that I use to learn HTML5 and lots more. I hope you enjoy learning about HTML5 as much as I enjoy writing about it.

Articles on HTML5 in 24 Hours

What's New in 2023

Books to Learn HTML, CSS, JavaScript, or Web Design

Videos to Learn HTML, CSS, JavaScript, or Web Design

Articles to Learn HTML, CSS, JavaScript, or Web Design

Force a Download with HTML5

Forcing Downloads is Easy—HTML5 to the Rescue!

Do Hackers Care About Your Meta CharSet?

Cross-Site Scripting (XSS) Attacks

The UTF-7 Attack and How to Protect Your Site

Why Define the Character Set?

Do I Have to Use UTF-8 in the Meta Charset?

This is Not the Final Word on XSS Protection

Clip Your Images with CSS clip-path

Watch My CSS Clip-Path Video

So Excited about image-set() Notation!

What is Image-Set()?

How to Use Image-Set()

Image-Set() Best Practices

Example of Image-Set()

Images for Download in Chapter 5

Try It Yourself 5.2

Try It Yourself 5.3

Moving Code Samples to GitHub

Friday Favorites 2/19/2016 - late start

Link of the Week: CanIUse

Thought of the Week: Is It Bad that HTML5 is No Longer Ahead of Its Time?

The 5 Key Design Ingredients

Color is the Best Known Design Ingredient

Additive color mixing.

Adobe Color CC generating a palette from an image

Shape is the Design Ingredient that Defines the Layout

Texture is More Than Just Tactile

These zebras make excellent texture

Space or Form Defines the Dimensions of the Design

The Veil Nebula

Flow Defines a Sense of Movement in a Design

Water flows downhill

Consider the Design Ingredients Before You Design Your Pages

Friday Favorites 2/12/2016 - Typography Edition

Added Code Samples to GitHub

What is your favorite design ingredient?

Why Do You Like That Ingredient?

Typography Tips for Web Designers

Basic Typography–Change the Font Family

Spacing Typography with Leading, Tracking, and Kerning

This is Just the Tip of the Typography Iceberg

Friday Favorites: 2/5/2016 - Infomagical

Getting Infomagical

Single-task

De-Clutter

Focus on What’s Important

Make a Connection

Pick a Long-term Information Goal or Mantra

My Mantra for Now…

Have you taken any design classes?

Design Classes are Useful

Have You Taken any Design Classes?

[poll id=13]

Comments:

10 Web Design Trends You Should Learn in 2016

1. Responsive Web Design is here to stay.

2. Content should tell a story.

3. Single-page cards are gaining in popularity.

4. You should learn web typography.

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

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

7. Web pages will be more interactive.

8. Videos will gain even more in popularity.

9. Don’t forget animation.

10. Colors are going to get brighter in 2016.

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

Friday Favorites: 1/29/2016

Most Interesting Article I Read This Week

Tips for Designers Who Don’t Code by SpeckyBoy.

Quote of the Week

Questions about web editors

What Questions About Web Editors Do You Have?

Two Important Web Editor Features

Most Important Feature: HTML

What is `Image-Set()`?

How to Use `Image-Set()`

`Image-Set()` Best Practices

Example of `Image-Set()`