About

HTML5 Design Gallery - BeerBlogging

2012-05-16T08:00:43Z

Be sure to mouse near the top of the “beer” to see what happens. But if you're using Internet Explorer, you'll need to check it out in a different browser. All versions of IE are sent to their Feedburner page instead. There are some interesting choices for the sectioning tags in this document. For example, the dates in the posts are listed as ASIDE and they might better be defined as DATA elements with machine readable dates in an attribute. The images are also enclosed in a SECTION element which appears to be there primarily for the CSS styles—he should use a DIV instead. But it is a fun site design.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

HTML5 Design Gallery - BeerBlogging originally appeared on About.com Web Design / HTML on Wednesday, May 16th, 2012 at 08:00:43.

Permalink | Comment | Email this

Don't Click the Shiny, Red, Candy-like Button�CSS3 Buttons

2012-05-15T13:18:18Z

Buttons are a fun feature of web pages, but up until just recently, if you wanted your buttons to have any interesting features at all, you needed to use images. In fact, if you search the web for ”web buttons” you will find hundreds if not thousands of examples of buttons you can use for your web pages. But now, with CSS3 you can create buttons that have cool effects but don't use any images at all.

Read the full article to learn how: CSS3 Buttons (Note: there are four pages to the article, and page two shows you how to create the above buttons.)

Other Fun Things to Do With CSS

Don't Click the Shiny, Red, Candy-like Button�CSS3 Buttons originally appeared on About.com Web Design / HTML on Tuesday, May 15th, 2012 at 13:18:18.

Permalink | Comment | Email this

Do you know when to use GET vs. POST in an HTML form?

2012-05-14T08:00:31Z

There are two methods you can use to transfer data in HTML forms. But it's one thing to know the two methods, it's another to know which is appropriate to use. This article will help explain when to use GET or POST in your HTML forms.

Read the full article: GET versus POST Requests on HTML Forms

Did you know you can validate for accessibility?

2012-05-11T08:00:56Z

Most web designers, when they work on websites think very little about how accessibile the site is. But this is an important part of web design. Accessible pages don't have to be ugly or boring. In fact, great design takes that into account and accounts for as many custoemrs as possible. I think making accessible sites makes sense, as why drive away customers if you don't have to? And it's easier than you think. By validating your pages, you can find out what problems your site might have.

Learn how to Validate for Accessibility

More Help with Accessibility

Did you know you can validate for accessibility? originally appeared on About.com Web Design / HTML on Friday, May 11th, 2012 at 08:00:56.

Permalink | Comment | Email this

Poll: What's your favorite layout method? (2012)

2012-05-10T08:00:08Z

I asked this same question a couple years ago (see results from that poll), and I'm curious if the results have changed much in the intervening time. Layout on web pages can be accomplished in many ways, and most designers have methods that they prefer. For example, I tend to lean towards elastic layouts with a max-width for large screens, but when I'm pressed for time I will often move to absolute positioning just to get things where I want them quickly. What's your favorite layout method?

Absolute positioning uses the CSS position property and properties like top and left to place elements on the screen based on a grid with 0,0 in the upper left.
A fixed width layout sets the layout as a specific size and then places the elements within that width.
Liquid layouts are set based on a percentage of the current width of the browser window.
An elastic layout is similar to a liquid layout, but sets maximum widths on either the entire page or sections of the page (such as the main content) to improve readability.
Tables for layout uses HTML tables to define how the page should look. Don't forget to use the border="0" attribute or the role="presentation" attribute so that computers know that the table is not data but layout (presentation).

Poll: What's your favorite layout method? (2012) originally appeared on About.com Web Design / HTML on Thursday, May 10th, 2012 at 08:00:08.

Permalink | Comment | Email this

Web Design Inspiration - Luxor Mag

2012-05-09T08:00:56Z

This is a Flash website and as such is very interactive and pretty. But of course if you're on an iPad you get an obnoxious message telling you to get an Android tablet, because Flash doesn't work on the iPad (or iPhone or iPod). There are so many reasons why displaying that kind of message is a bad idea. But suggesting that someone who has already spent several hundred dollars on a tablet should go out and buy another tablet just to view your website is an extreme display of hubris. Keep in mind that the iPad has the dominant market share in the tablet market, so that message states that you don't want 50+% of tablet viewers to view your site.

Get your favorite website featured on About.com: Show Off Your Favorite Design.

More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook

Web Design Inspiration - Luxor Mag originally appeared on About.com Web Design / HTML on Wednesday, May 9th, 2012 at 08:00:56.

Permalink | Comment | Email this

Do You Use CSS Vendor Prefixes?

2012-05-08T08:00:41Z

If you don’t, you should be. They let you add more cutting-edge features to your web pages and be sure that they will work even in browsers that don’t yet support the standards version of the property. Vendor prefixes are not a hack, they are a tool for browser makers and web designers to make sure that new features can be added without breaking a page in older or other browsers. Yes, you have to type a little more to use them. But stop being lazy and just do it. It’ll only hurt for a second.

Read the full article: CSS Vendor Prefixes

CSS Properties

Do You Use CSS Vendor Prefixes? originally appeared on About.com Web Design / HTML on Tuesday, May 8th, 2012 at 08:00:41.

Permalink | Comment | Email this

Don�t Drive Away Tablet Users in a New Browser War

2012-05-07T08:00:38Z

I was working on my design inspiration article for this week (Wednesday), and I chose to promote a Flash website for a magazine that was very nice looking and fun to view on my iMac. But for the heck of it, I decided to see what fallback options they had chosen to use for iOS visitors. I didn't expect to see the site recreated in HTML5 (although I admit, I was hoping…). But I was surprised to see the above image as a new version of the tired and old browser wars. Only, as you can see, instead of being told to get a new browser (and there are apps that run Flash sites on iOS), you are told to get a new tablet device. Seriously? Do any of you really believe that someone will like a single website so much that they will say “What the heck! I'm going to go drop another couple hundred dollars on a new tablet, because this website is sooooooo cool!” and go out and buy another tablet? Personally, I wouldn't do it. But my brother tells me I'm an Apple zealot, so maybe I'm biased.

Read the full article: Flash Websites Need Fallback Options for iOS Users

Getting More Customers Rather Than Driving Them Away

Don�t Drive Away Tablet Users in a New Browser War originally appeared on About.com Web Design / HTML on Monday, May 7th, 2012 at 08:00:38.

Permalink | Comment | Email this

If you do nothing else with your page

2012-05-04T08:00:28Z

Do these things…

These simple steps will help you keep your page loading smoothly for your customers and make it easy for them to read and use your website. I recommend these tips to my web team, and I think you should know about them as well.

If you do nothing else with your page originally appeared on About.com Web Design / HTML on Friday, May 4th, 2012 at 08:00:28.

Permalink | Comment | Email this

Poll: How do you set up checkboxes on your forms?

2012-05-03T08:00:42Z

At first glance this may seem like a silly question, but it makes a difference in how you manage your web forms. The INPUT CHECKBOX form control (written: ≪input type="checkbox" name="myCheckbox">) is easy to add to web forms, but how you handle the identification of that control can make it hard or easy to manage when the form is submitted.

If you have only one checkbox, this is unimportant, but with a group of checkboxes—such as in a survey question “Select all that apply...” These are the two ways you can handle a group of check boxes on your forms:

Give each checkbox the name name, to keep them all in the same group. Doing this is similar to how you set up a group of INPUT RADIO buttons. Only instead of selecting only one, with checkboxes you can select as many as you need to answer the question.
Give each checkbox a unique name or id. Then you can rely on other elements like LABEL to define the group of check boxes.

Many people build their form check boxes using both methods. How do you build your check boxes? Have you thought about why you do it that way? There are a few things you should think about regarding these methods:

Using the name attribute is obsolete in HTML5 and deprecated in HTML 4.
Of course, if you want to group your checkboxes using the first method (all checkboxes get the same name), you can use the id attribute, but if you use the same id attribute for multiple check boxes you are using it incorrectly. As the id attribute is for unique identifiers for each element.
Also, grouping your check boxes with one ID or name, your form or script has to grab them as one block and process them, most likely, as an array. This can be challenging to set up.
Of course, giving each check box a separate name or ID makes it harder to remember which go together when you get the form data. I often solve this by giving grouped elements the same prefix in the ID, such as computer-apple and computer-pc. When I look at the data I can tell at a glance that both of those values go with the question about what computer they use.

Poll: How do you set up checkboxes on your forms? originally appeared on About.com Web Design / HTML on Thursday, May 3rd, 2012 at 08:00:42.

Permalink | Comment | Email this

About

HTML5 Design Gallery - BeerBlogging

Don't Click the Shiny, Red, Candy-like Button�CSS3 Buttons

Other Fun Things to Do With CSS

Do you know when to use GET vs. POST in an HTML form?

Other HTML Forms Articles

Did you know you can validate for accessibility?

More Help with Accessibility

Poll: What's your favorite layout method? (2012)

Web Design Inspiration - Luxor Mag

Do You Use CSS Vendor Prefixes?

CSS Properties

Don�t Drive Away Tablet Users in a New Browser War

Getting More Customers Rather Than Driving Them Away

If you do nothing else with your page

Poll: How do you set up checkboxes on your forms?