HTML5 Tip: Placeholder atttribute

The HTML5 placeholder attribute lets you provide a short hint that helps people enter the right information into a form field.

The hint might be an example of the required information, or a description of the expected format. The placeholder hint or description is displayed inside the empty form field, and is removed as soon as the field is given focus.

Placeholder Uses

The trouble is that once the field is given focus and the placeholder text disappears, there’s nothing left to explain what kind of information should be entered. It’s also inconvenient for keyboard users. Instead of tabbing onto a field and reading the label, they need to look ahead to read the placeholder before moving focus to the field itself

http://www.nngroup.com/articles/form-design-placeholders/
Read more ›

Preserve Font-size with Landscape orientation

In apple mobile devices, the font-size rescales when the viewport changes to increase readability.

So the font-size will zoom larger from portrait to landscape orientation. To prevent this but to not restrict desktop uses from being able to make the font-size larger (zoom in), you can put this CSS property -webkit-text-size-adjust in a media query:

By setting this property to 100%, you are telling WebKit to disable the automatic behavior, but still allow user-initiated zoom.

PPK Presentation on Mobile Viewports

Peter-Paul Koch(ppk) of QuirksMode.org gave a very interesting presentation at this years HTML5 Dev Conference about mobile viewports.

CSS Tip: Float example

Using CSS floats is very commonplace for web pages layouts and designs and here is just another example.

I needed a layout for an interior page that would display information in a pseudo calendar format with dates on one side and the event description on the other. I wanted it to be easy to read and would look fine on smaller devices without making any style changes.

So this is what I came up with:

Demo: http://jsfiddle.net/QS3sA/1/

Formatting Tables Quickly

tablesWhen you have lots of data tables on a website and need to quickly format them so they are readable look at least somewhat not too boring a little CSS and jQuery can go a long way.

As we all know tables should be only used for tabular spreadsheet-like data but even then there are considerations to me made when trying to design them in a way that matches the rest of your site. So every situation will be unique but here is a sample that can be used as a starting point.

These styles add a thin border around all cells, put content vertically spaced, unique header background color, and consistent text alignment to the left. Read more ›

jQuery Tips: :contains() selector

I’ve used the :contains() selector in a recently web project and was reminded just how useful it was.

If you need a quick way to  modify an HTML element based on the text it contains, it’s a great little method.

jQuery Tip: Another Simple Image Slideshow

Here is another image slideshow that is slightly different from the last one I reviewed  as it has the images  surrounded by a DIV so you can add text to each if you wish.

We just wrap each image with a DIV with the appropriate styling:

Read more ›



Page 2 of 18123...10...Last »