Freelance Web Designer » HTML

25 HTML5 Features, Tips, and Techniques you Must Know | NETTUTS

Vel — Tue, 03 Aug 2010 05:49:11 +0000

This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.

In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

Visit Source

CSS Three — Connecting The Dots

Vel — Wed, 09 Jun 2010 13:19:40 +0000

As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

Visit Source

A JavaScript Content Switcher That Works Without JavaScript | impressivewebs

Vel — Tue, 09 Mar 2010 13:24:04 +0000

Recently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).

At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

Visit Source

CSS bar charts—styling data with CSS3 and progressive enhancement

Vel — Sat, 06 Mar 2010 09:40:50 +0000

Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.

Visit Source

Button Height and a Broken Box Model

Vel — Sat, 06 Mar 2010 08:32:01 +0000

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Visit Source

Adaptable view – how do they do it?

Vel — Sat, 27 Feb 2010 11:42:47 +0000

Adaptable view is a user interface design pattern which you can use to allow users to manually change visual appearance of content in order to fit their needs. This is usually done by switching styles (in web sites and applications). This way you provide your users with more control over the appearance of content which improves user experience.

Adaptable view can be used to enable users to increase/decrease font size, change background color, darken background for higher contrast, switch between different site versions or to change the layout of the site or any part of it. To learn more about this pattern check out Adaptable View design pattern on UI Patterns. You will find a strange implementation of this pattern where complete header is being hidden – including the logo.

In this tutorial, I will focus on explaining how to manually change the layout and show you two great examples and “how did they do it”.

Visit Source

Ordered lists and the “START” attribute | maxdesign

Vel — Sat, 28 Nov 2009 18:11:37 +0000

The Scenario

You have an HTML document that includes ordered lists interspersed with other content. The ordered list items must be numbered continuously throughout the document (not restarting at number 1 each time an ordered list is used).

The simplest way to achieve this is using the “start” attribute:

Problem

The “start” and “type” attributes are not allowed in XHTML1.0 Strict or HTML4.0 Strict documents. These attributes ARE allowed if XHTML1.0 Transitional or HTML4.01 Transitional are used.

Visit Source

15+22 jQuery Image Slideshow/Slider Tutorials and Plugins for Your Next Projects

Vel — Sat, 28 Nov 2009 15:55:20 +0000

Nowadays, using jQuery effects is getting increasingly popular within web templates and if you check some of new designed themes on themeforest , you probably can’t find a popular theme without any kind of jQuery effects. One of those effects that designers use it widely is jQuery image slideshow or image gallery which can be implemented easily by lots of free jQuery slideshow plugins and tutorials featured here.

Visit Source

15 Useful Resources to Get Clued Up on HTML5 | line25

Vel — Mon, 23 Nov 2009 09:25:44 +0000

HTML5 this, HTML5 that! There’s been plenty of HTML5 talk around the blogging world recently. It’s no longer a tiny spec on the horizon, it’s due to arrive soon! Some have already embraced it and are using it on their latest sites. Want to join in on all the fun? Check out this collection of some of the best resources from various blogs and websites in the industry. Each one gives an interesting insight into what’s in store with detailed write-ups, tutorials and handy cheat sheets to help you along your way.

Visit Source

Coding Clean and Semantic Templates | webdesignerwall

Vel — Sat, 21 Nov 2009 15:45:27 +0000

“If you are the guy who uses

tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of

tag. Have you ever edited someone’s templates, don’t those messy tags drive you crazy? Not only writing clean templates can benefit yourself, but your team as well. It will save you time when you have to debug and edit (particularly the large projects).”

Visit Source