The most beautiful HTML yet !

Sat, 21 Nov 2009 13:37:00 +0530

We write HTML for every web page that we create for a web service or application. Unlike other development companies, we follow strict guidelines for every html page such that it is well advanced in format and performance. Since we use Javascript libraries like YUI, jQuery etc. , we ensure a very high standard for every line of HTML code that we write.

In this post we are sharing the HTML standards that we follow while creating web pages , to give an idea about how well we work to ensure good quality for your web service / application.

HTML5 – HTML5 and it’s new elements make for the most beautiful HTML yet.
DOCTYPE – HTML5 has the best DOCTYPE ever
Indentation – Code is indented to show parent/child relationships and emphasize hierarchy.
Charset – Declared as first thing in the head, before any content.
Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.
CSS – Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.
Body – ID applied to body to allow for unique page styling without any additional markup.
JavaScript – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.
Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.
Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.
Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old.
Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.
Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.
Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)
Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”)
Classes – Are used any time similar styling needs to be applied to multiple elements.
IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.
Dynamic Elements – Things that need to be dynamic, are dynamic.
Characters Encoded – If it’s a special character, it’s encoded.
Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.
Comments – Comments are included for things that may not be immediately obvious upon reviewing the code.
Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.

We write less code !

Sun, 01 Nov 2009 19:19:00 +0530

How to save the resource in our application code ? Should we repeat writing the same code in every page/file ? We can save a lot of our time and resource by putting the same code or lines into a function or procedure.

That’s what we exactly do to save coding effort. We use jQeury to write less code and do more !

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. We use jQuery extensively for our services to write less code and do more with less code.

With jQuery, you can get to just about anything on a Web page. Its syntax makes it easy to quickly locate HTML DOM elements. While this is readily available with standard JavaScript, jQuery presents a streamlined syntax that allows you to reduce coding tasks with less code and less time.

Today, we will have a look at few creative uses of jQuery in modern day websites and applications; sure to inspire you for your next project. Let us know if you want any of these inspirations to be part of your web application design. We can do it for you.

Try our demo jQuery page here - CoWave- Playback comments using jQuery

Dragon Interactives jQuery Navigation

These guys are pretty much Gods of web design, and their site really proves it. Just have a look at the custom jQuery navigation they used on their homepage. Have you ever seen such a sexy navigation in your life?

Visit Site
FamSpams FaceBox

FamFamFam needed a custom lightbox like script for FamSpam (whew, say that three times). They ended up building what is now know as FaceBox, which replicates the effects of lightbox, but goes above and beyond by allowing you to load in static html pages, contact forms, anything you wish really! FaceBox is now a jQuery plugin after all the demand for their script.

Visit Site
Grooveshark Widget Creator

Instead of going with a typical flash menu/control menu, Grooveshark mixed it up a bit and built a custom jQuery script to allow you to make your own music widgets; pretty nifty indeed.

Visit Site
CSS-Tricks Fade-In Navigation

CSS-Tricks, by Chris Coyier, is next up on the list with a wonderfully simple and creative jQuery navigation. When the links are hovered over, instead of immediately changing colors, jQuery is used to help the color fade slowly to the desired color.

Visit Site
David Walsh Link Nudge

Developer David Walsh of DavidWalsh.name implements an extremely simple to use script to give your links a little nudge on hover. The script utilizes the strong animation capabilities of jQuery triggered on hover. Check out the links in the sidebar and in the footer to see the effect in action.

Visit Site
CarrotCreative-Custom Sites Lightbox

If you check out the CarrotCreative website, you will actually notice two really unique jQuery effects. Firstly, if you click on sites in the upper left, you will see a unique application of a ‘lightbox’ like effect listing their sites and icons. Secondly, if you click on any navigation links, you will notice there is no refresh, but that the new page just slides in from the right. Cool stuff!

Visit Site
BrightCreative Portfolio

Another “two for one” special, Bright Creative uses an extremely subtle glow effect in their navigation that is very calming and warm. In addition, all of their portfolio pages have a tabbing effect, so their is no need for the user to refresh the page every time - thanks to AJAX and jQuery.

Visit Site
Incredible Login Form

Not too long ago, Connor Zwick wrote us a nice tutorial that demonstrates exactly how to build an amazing drop-down login form.

Visit Site
Application Scroller by Aviary

It would be an insult to call this a type of ‘marquee’ (shivers uttering that word). Instead, Aviary came up with a very nice looking and functioning ‘scroller’ to showcase a lot of text in a small amount of space. Even better is that the scroller will degrade gracefully is javascript is disabled.

Visit Site
Featured Fade Effect by DesignFlavr

DesignFlavr, known for their great sources of design inspiration, put together a simple fadeIn/fadeOut script to showcase their featured artwork and corresponding descriptions. Also, they’ve used the lavalamp plugin quite well on their main navigation.

Visit Site
Hv-Designs Fade In RSS Icon

On the Hv-Designs homepage, you will notice the the RSS icon starts off as an outline/sketch of the actual image. Then, when hovered, the rss icons ‘glows’ into place.

Visit Site
- Codas Entire Website
  
  Coda is well known for its amazing UI and site design. It set a fire under the jQuery plugin community by inspiring many developers to re create their page tabbing effect. In addition, they have a wonderful on hover effect on the links located in the header.
  
  Visit Site
- Clark Lab Fading Effect
  
  ClarkLab is a well known and very successful author on ThemeForest. If you visit his portfolio below, you will notice the large header images eventually fade to the next, showcasing all of his latest work. The fade effect is so well done and subtle, you barely notice the new image showing up.
  
  Visit Site
- Rob Young | E is for Effort
  
  Designer and Art Director Rob Young used a unique idea of displaying his artwork on a simulated Mac screen. Then using jQuery scrolling effects, each new page slides into the page view as if it is being loaded on a computer.
  
  Visit Site
- Web Designer Wall
  
  Besides being a visually stunning website, WDW features some unique custom jQuery scripting to add classes to certain elements on hover. Check out the effects when the rss and navigation items are hovered over.
  
  Visit Site
- Junaid W. Hanif
  
  Another really cool tabbing effect - instead of arrows however, pagination and AJAX is used to create a sleek and clean user experience. Plus, the navigation has a very nice albeit simple effect.
  
  Visit Site
- KomodoMedia
  
  We’ve saved our absolute favorite site for last. First, just look at that design, it’s wonderfully unique and comforting. Using one of the most creative jQuery scripts we have ever seen, KM has a ‘foliage-o-meter’ slider where sliding it either increases or decreases the foliage and design of the theme, depending on the direction the slider is moved.
  
  Visit Site

Keep in mind that jQuery is simply a tool and is only limited by your creativity and skill level. Get unique with your designs and development process and you might be surprised to see great results occur.

roovno.blog

The most beautiful HTML yet !

We write less code !

Dragon Interactives jQuery Navigation

FamSpams FaceBox

Grooveshark Widget Creator

CSS-Tricks Fade-In Navigation

David Walsh Link Nudge

CarrotCreative-Custom Sites Lightbox

BrightCreative Portfolio

Incredible Login Form

Application Scroller by Aviary

Featured Fade Effect by DesignFlavr

Hv-Designs Fade In RSS Icon

Codas Entire Website

Clark Lab Fading Effect

Rob Young | E is for Effort

Web Designer Wall

Junaid W. Hanif

KomodoMedia