BlogmyQuery – BMQ

Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Typography Examples

Denise Chandler
When we look at the portfolio of Denise Chandler, right away the typography begins talking. The original hand drawn sans-serif offers a personal, artistic yet professional feel at the same time. Denise focuses on the most important information and presents it in a relatively simple one page layout. The hover effects offer a great element of interactivity to the site for sure, while the large, bold caps type along with the intricate ampersand for the header works well to playfully complement the page.

The only critique really would be in the contact area. A slightly larger font and line-height, along with some extra spacing between the paragraph and the social media links would have made the area feel as open as the rest of the site. Also, it’s a pity that the “Submit”-button in the contact form doesn’t change on click — a nice :hover and :active-effect could make the experience even more pleasant.

Jessica Hische
Using a good type that doesn’t detract from the content is imperative. Jessica does a tremendous job with this, opting for a simple thin sans-serif font. Even in its simplest form, the italic type adds a flourish to the design. Perhaps for readability, though, the designer could have broken from the italics for the description of the featured pieces. Also, the type could stand to be a bit larger, and not only because the headers appear to blur a bit at that size.

MCQ
The portfolio of Mike McQuade has a truly remarkable interactive page change effect that really grabs your attention. The site is set up as a grid with each square changing position and/or size to accommodate the content that opens with each selection. Also, because the layout is fluid, content squares appear on different positions when you resize the window and hence ensure the proper alignment of the content. It is a very clean, minimalist design that uses a unique combination of a thin and quirky serif and a clean and bold sans-serif to complete the tone and attitude of the portfolio.

The classic color scheme, a monochrome black and cream with just a splash of mint green thrown about, give the site a very attractive overall look. Though the contrast between the gray text and the dark gray background could be brought up by making the text just a tad bit lighter for sharper text.

Cooper Type
The large illustrated ampersand on Cooper Type is a perfect mascot for this typography website, and it works well with the big bold header. A bit more space between the illustration and the rest of the content would make it feel less cluttered. Some of the body type is too small to be readable, and a few of the paragraphs could use a wider letter spacing. Larger type or an alternate font would improve this greatly. The navigation looks a bit misaligned as well; it might work better aligned to the right over the main content.

Hype Nation
Hype Nation uses a stylized font in the header which works really well for the funky feeling of the site, as does the bright orange and gray color scheme. And given that they went with such an unusual header font, the follow-up choice of a simple sans-serif for the rest of the site was a wise one. Though the header is certainly complementary to the site feel, it might have benefited from the contrast of the footer rather than the black on orange that they went with.

The footer is beautiful and perhaps working the header to match the footer a bit more would have been very beneficial to the overall look of the site. The ‘Projects’ section is a bit confusing to use: there is no separate, detailed portfolio or project pages which isn’t good for what is essentially a simple portfolio site. Though overall, the page has excellent type spacing and a good use of white space.

Wing Cheng
Wing Cheng is a uniquely styled portfolio that uses hand drawn effects along with a script font on an accordion sketchbook background to bring together the entire presentation. Using the wireframes look to preview each project instead of the finished product is a very interesting choice, and it certainly adds to the uniqueness of the portfolio. The classy serif font used in the sidebar contrasts well to the hand drawn effect of the rest of the site, and plays into the finished designs you receive when you click on the wireframe of a project.

Though the handwritten, cursive font used to describe each of the projects is a little bit hard to read, and it could stand some tweaking. Also, because the whole website feels a bit more like illustration, it’s a bit difficult to see what elements are clickable, partly also because various elements are underlined. This problem is particularly apparent in the footer of the page where a contact form is displayed. Tooltips or striking button-like appearance of some elements could improve the user experience a bit.

Stephen Caver
Stephen Caver’s portfolio is another site where the typographical presentation strongly stands out as soon as you arrive. The layout of the site is truly remarkable: the font size of the main header and position of elements change when you resize the browser window. The big, bold header with a very subtle letterpress effect, as well as the combination of thin and bold type, creates a great look.

However, the main site navigation on the top is far too small, especially for the font used, and as a result, has some readability issues. The same goes for the vast majority of the body text. Also, the large part of the ‘Vitals’ section has some really low contrast to deal with that creates some issues too. The overall layout of the site is really good with a really strong focus on the work which is great for a portfolio, but so much of the site is hard to read which could end up just driving visitors away.

Kaleidoscope
This web app website has an appealing combination of circular script and squared-off sans-serif font. The typographic choices really add versatility to this single-page website, a testament to the imagination of the designer. The type sets off each distinctly styled section, making the page easily scannable. The contrast could stand to be a bit stronger in a few places on the website (e.g. the section “Complete your workflow” and “Details”), to keep things readable and flowing.

Trent Walton
Trent Walton has a minimalist black and white website with heavy typography. Each article on the website has an original design that features a number of typefaces, but always as large blocks of sharp text, thus maintaining consistency. The most recent article is always the landing page for the website, which gives the recent article a prominent position on the site. The “Articles” page has generous white space and solid alignment, although post illustration do appear to be position a bit too far away from the excerpts. The typography carries the page, filling in the white space and fleshing out the design quite nicely.

Barley’s
This bar website combines serif headers with sans-serif body type well, a combination that tends to be used quite often on the Web. The entire home page could use a bit more white space; the elements feel a bit stacked on top of one another. The type and content need room to breathe. The “News & Events” and “Contact” pages are a much better example of how spacing for the whole website could have been handled.

They feel much less compressed, which only makes the other pages feel that much more confined. One can argue if it is necessary to employ the letterpress effect for navigation items, as it does not quite match the rest of the website. A hidden highlight: the food menu page is a pleasure to look at, but it is not clear what the column “Beer pairings” stands for, especially because it’s always empty.

New Deal Festival
Right off the bat, the header on the home page for New Deal Festival really grabs attention. The script, combined with the block-style sans-serif, gives a clean sharp look. For some reason, though, the company changes the header on interior pages, and these headers are squished together and distorted, making the rest of the website feel a bit unfinished and unpolished.

New Deal Festival could have kept the home page header throughout the website. Also, the typography would benefit from a wider letter spacing. And the main content area would look better with more padding between the edge and the type; 40 pixels would probably do it.

Futu
The clean classic look created by the big bold type stands out right away on the Futu website. There is a bit too much animation, distracting you from the text. A better approach might have been to make the header ad either different or static and then just scroll the featured content. Also, the leading on the body type could stand some work. Some of the paragraphs have an uneven rag, which could rub some users the wrong way. As it stands, the website has a bit confusing hierarchy, and the reader could have difficulty figuring out what to focus on.

Design 977
The sans-serif type works really well for this website, which is clean, minimalist and to the point. Only the most important information is presented, and it’s done straightforwardly. At first glance, the letter spacing might seem a bit small, but in this case it complements the overall design. The website has a sharp angular look, and the tightness of the type sets this off. But while the social media link area is original, the constant animation in the corner is distracting. The text on the profile page could use more leading, and so does the contact form.

Robots Are Friends
Here, the texture works quite well behind the bold serif font, although the type could use a wider letter spacing. Sans-serif fonts seem to work wonderfully for these kinds of minimal websites with big bold typography. However, the sudden solid-gray footer feels a bit out of place here, and the black and gray text on the “About” page has a low contrast against the dark blue, making it a bit difficult to read. Also, the font size in the “Design” section on the front page is way too small, and we are not quite sure if the choice of type for the body copy is optimal.

Louise Fili Ltd.
The script and sans-serif type that Louise Fili Ltd. has selected for its website make for a classic and elegant look. The all-caps serif in the sidebar works well visually, but the sidebar would be more scannable if it were not in full-caps (although the full-caps everywhere else on the website do not detract from the design). The “About” page integrates a drop-cap beautifully into the typographical presentation, setting it apart from the other websites we’ve reviewed so far.

The flourishes between menu items really tie in with the logo script in a whimsical way. The main problem with the design is that the text is embedded into images almost throughout the site, making it impossible to copy. Also, on some pages the embedded text appears a bit blurry. Using plain text would be an improvement of this website.

Attack of Design
The font on Sacha Greif’s website blends really well with the retro feel of the rest of the website. And there is plenty of white space, making the content a pleasure to read. The subtle hover effects on headlines and icons make for a pleasant user experience. The headings in the sidebar are a bit difficult to read, though; perhaps a bigger font size or different font altogether would help. The navigation and hover effect for the different categories are clean and original.

Overall, another great example of type spacing: easy on the eyes and legible. The dates on the comments could use some extra padding around them to feel less constricted. Also, the “Read more” links could stand out a bit stronger. The highlight of the site is a beautiful comments design. The hover effect on the logo is a nice touch, too.

Process Type Foundry
Process Type Foundry uses a combination of serif and sans-serif type, which works really well. The clean minimalist design really highlights the big bold typography. The main body type could use higher contrast, and the relatively small light-gray type is not easy on the eyes. Still, the type throughout the website has a very good leading and letter width, making for a pleasant reading experience.

Also, the large bold headings combined with the thin, evenly kerned sub-heading make the website welcoming and engaging. The “About”-page is a beauty of simplicity and clean, sharp design with generous leading and whitespace.

Chipotle
This restaurant website has a grungy handwritten look for its font, which, combined with the other hand-drawn elements, fits well with the brand and the ‘industrial’ design of the restaurants. However, the typography on the website is almost completely embedded in images, to the point that the little bit of HTML type looks out of place because the other fonts are so distinct.

Also, the paragraph text (as seen on Chipotle’s story page) would look much better with a bit more attention paid to leading. As it is, it seems a bit squeezed together. Also, the main drawback of the site is the audio that starts playing automatically on page load. Notice: the footer contains some hidden treasures for typography lovers.

Worry Free Labs
Another fine example of a subtle texture working with the type instead of against it. As has been demonstrated a number of times, script and sans-serif fonts can complement each other well, especially on websites with the kind of retro look of Worry Free Labs. However, the letterpress effect on the type looks rough and unattractive, while the script font does look attractive and playful. If a font does not scale properly, then finding an alternative is better than forcing it into your design.

One site highlight that stands out, even though it is not necessarily type related, is in the portfolio section, the fluid scrolling through their work with the click of the ‘Next’ navigation button is — sorry for the wording — extremely awesome. We don’t really know why the company uses the German greeting “Willkommen” in the header of the page, though. But it is a nice touch for German visitors!

Made By Water
The first thing that jumps out at us from this website was the oversized type for “Running Water,” bold and eye-catching for sure. Spreading “Running” out some and bringing “Water” closer together could improve the introduction of the site. The uneven, almost sketchy, font establishes the website’s character well, and the background works well, too.

The gray and yellow color scheme works well with the font, and the minor yellow highlights stand out… except when you mouse over the header, the yellow is blindingly bright; a darker tone would work better. The contrast of the light-gray link and the subheading color could also use a bit of tweaking.

The Design Cubicle
TDC has a minimalist theme, with a heavy focus on typography. The squared-off sans-serif fonts complement the rest of the design, with their diversity of italic, bold and all-caps. A fine example of well thought out spacing in the body text, making for optimum readability; you can tell a lot of attention was paid to this aspect. Much of the text in the footer feels a bit small; the difference between 11 and 12 pixels may not seem much, but as you can see here, it can make a huge difference in readability. The beautiful drop-down menu in the top navigation is subtle, but looks great and even has nice hover effects.

Dubbed Creative
In the header, the thin red font of “Creative” gets lost next to the bold white of “Dubbed” and could use better balance. At first glance, the user is overloaded with information. An easy fix for this typographical barrage would be to move the description of the website from beside the header to under it. The site has a very promising structure, yet feels way too overwhelming because of the lack of whitespace. There are too many colors, too many icons, too much text, too much buttons. An example of a site where nice typography doesn’t necessarily lead to optimal results.

The Combine 2010
The designers of this website do a good job of establishing visual hierarchy by combining font types. Combining serif, sans-serif and script typefaces is no easy task, no matter how simple they make it look here. All of the calls to action are visible and attractive. The texture in (rather than behind) the heading type sets off the solid background well; this texture is different than most of the other ones we’ve seen.

It is pretty obvious that the designers know their typography. On the “Schedule” page, “2010″ would look better with a bit tighter letter spacing; also, the logos on the Sponsors page present so many different colors and fonts that it looks a bit sloppy.

Edgar Leijs
As soon as you land on Edgar Leijs’ portfolio website, you are met with a bold oversized typographic header. The mouse-over effect in the logo is certainly nice, but the light yellow on white in the “LeIJs” is visually grating. Perhaps the yellow could be replaced by a more muted color, or the white could be softened to more of a gray. The yellow text in the main content area looks really good there, but it is not compatible with the white behind it.

Also, increasing the contrast between the dark-gray background and light-gray text would improve readability. When you hover over a portfolio item, a clever text box pops up that offers details unobtrusively. The screenshots of the works in the portfolio don’t have to be greyed out though, making them clearer and more vibrant (at least on hover) would make them a bit more attractive. Very original, distinctive and interesting design.

Rouse
Rouse employs a letterpress effect for the sub header which looks great on the textured background, really carving out the letters sharply. The combination of the sans-serif headers with the serif body text plays well into the slight retro look of the site. Though the effect that was used on the word ‘Rouse’ looks a bit strange. It is easy to see that it is supposed to be a 3D-effect, however it is pretty poorly rendered. The line length and leading of the body copy are done beautifully.

A couple of negative remarks: the footer could use some extra top padding to balance it out and give the overall design a symmetry, and too much text is embedded in the images, making it impossible to copy and paste.

Related Posts

Below are a few related posts you might want to check out. Also leave your thoughts in the comments section below.

• 20 Fresh High-Quality Free Fonts
  A post from our archive that looks at 20 free top-shelf fonts for your designs.
• 50 Helpful Typography Tools And Resources
  Another post from Smashing’s past that collects useful type tools for your design arsenal.
• 25 New High-Quality Free Fonts
  Another post featuring a collection of 25 fantastic fonts for the community.

(al) (vf)

Tweet

© Fran Melo and Angie Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: designs, showcases, typography

By Thursday Bram

If you want to make a living as a web designer, there’s no option but to market your services. As much as you might hope clients will drop out of the sky, you have to take the steps necessary to make sure that those prospective clients know that you can help them and can easily find you.

But the options for marketing web design skills seem endless: you can network, blog, advertise, cold call and promote yourself until you’re blue in the face. You can spend hours trying to line up clients and be unable to tell if your efforts are having any effect at all. Are the majority of your clients finding you through a specific ad? Or maybe through an article you contributed to a magazine?


If you know what marketing methods are actually helping you to land design clients, you can often focus your efforts on those marketing projects that are the most effective. If something time-intensive, like a blog, isn’t actually bringing in new clients, wouldn’t it be nice to stop investing time in it?

All of that boils down to the fact that, if you’re marketing yourself as a web designer, you need to be calculating the ROI of the time you’re spending on your promotional efforts. ROI — or the return on investment — is a matter of determining if the work you’re bringing in is enough to cover the cost of the time you’re spending on marketing, at least for web designers. For certain organizations, it can get a lot more complicated, but for a small web design shop or a freelancer, that’s really the question that determines if your marketing is worth your while.

Your Business Website

For many web designers, your own website is central to your marketing plan. It may be a beautiful design that walks clients through every step of the process and showcases your portfolio, but you have to get traffic to your website in the first place. You can’t just take a ‘build it and they will come’ approach.

Considering that many web designers rely heavily on online marketing techniques, such as newsletters or social media, it is significantly easier to measure the effect your efforts are having online than off. It can be a matter of installing Google Analytics or another analytics package on your website and actually diving into the reports.

SEO and Traffic

The odds of optimizing your site for terms like ‘web designer’ and ending up on the first page of the search results are not good. But it’s certainly possible to rank well for more specific terms like ‘web designer’ and your town. Measuring the results of your SEO projects is just a matter of looking at those analytics reports and seeing which search terms are actually sending traffic to your site.

More complicated to track are in-bound links. In-bound links can provide targeted traffic that can include prospective clients actually interested in hiring you to design a website. Of course, it helps if you have links in the right place. When you’re looking through your analytics reports, take a look at what other websites are sending you traffic. If you’re using an analytics package that lets you do so, see if you can track conversions on your site (most likely contacting you to discuss a new project) and see if particular sites are sending you traffic that converts better than others.

There are a couple of categories the links sending traffic to your site can fall into, including the following:

• Past clients. You may be surprised how well a link in the footer of a client site can promote you as a web designer. But the fact of the matter is that someone who clicks that link is probably already impressed by your skills as a web designer.
• Giveaways and articles. Whether you offer up a free icon set or submit a guest post to a blog, you can establish your expertise as a web designer by promoting your work on other sites. However, it’s important to consider what kind of traffic these links send you. Depending on where you’re establishing your expertise, it may come more from other designers than from prospective clients.
• Professional links. It’s entirely possible that someone will mention you in a blog post that refers to you as a person, while linking to you as a designer. While that link might get some clicks, it’s generally not nearly as valuable as a link that refers to you as a professional.

Social Media

While you can track much of the usefulness of your efforts on social networking sites simply by looking at how much traffic Twitter, Facebook and all the rest are sending to your own website, but it’s also worthwhile to look at the conversations you hold on each site. Do particular sites help you connect with prospective clients in such a way that they send projects your way? It may not be easy to answer that question, but if you can, you can often focus your social media efforts on the one or two sites that are actually helping you land clients.

Similarly, with blogs and email newsletters, you’ll have access to plenty of numbers: how many of your emails have been opened, how many sites have linked to a blog post and so on. Translating those numbers can again require looking at conversations, however. If someone is engaging with you after you’ve posted to your blog, you can get a clearer idea of whether that post is winning over clients or whether prospective clients are even finding your blog.

Games and Apps

Offering a game or a web application or some other sort of project that showcases your design and development skills can bring your web design skills to the attention of a prospective client. The Langton Cherubino Group created Masterpiece Yourself as a way to showcase the firms interactive design skills and the extent of their capabilities. The app allows users to add their own photos to famous portraits, like the Mona Lisa, and then share the results through social media.

Since the launch of Masterpiece Yourself, the Langton Cherubino Group has seen traffic to its website increase by 61 percent. It hasn’t been easy to translate all of that traffic into new clients, though, says Langton. The firm is still working to decide how to best direct that traffic. But the app has proven to be an ideal way to showcase their skills, leading existing clients to ask for games of their own. The case study of how the app was created has also been useful in landing new clients.

Word of Mouth and Other Hard-to-Measure Marketing

John Wooton, of InspireMedia, found his first big client through a very close bit of networking: it was the website for his wife’s photography business. The ROI for the marketing that it took to land that particular client is impossible to measure.

Networking and other types of marketing can be tough to measure, at least in part because you often have to get your name in front of a prospective client several times before that client will actually hand you work. It may be a combination of seeing an ad, a recommendation from a friend and actually meeting you in person at a networking meeting that wins over a client. But that doesn’t mean that figuring out the effectiveness of your efforts is out of the question.

Ask Your Clients

It’s easy to over-complicate the measurement process, but there’s one simple step you can take: ask your clients how they found you. Many of your clients will happily tell you, especially if you ask as you’re getting ready to start the project.

Wooton’s mix of marketing methods have made asking his clients about where they heard of him crucial: in addition to networking, he uses social media and some local online advertising. Wooton has also added signage with his business information to the back and the side of his car. He asks each new he works with where they learned about him and track the responses so that he can tweak his marketing efforts.

Even an informal survey of your clients asking where they found you and, if possible, why they chose you over the competition can help you focus your marketing plans. Wooton puts an emphasis on networking to promote his design services, but he doesn’t go to every networking event out there. He focuses his efforts: “I’ve found it helpful to participate with business networks that engage with new businesses or with people who are looking to start their own business.”

That’s a fact that might not be readily apparent if Wooton wasn’t paying attention to what was driving clients to him. New business owners will almost certainly need a new web design, while attracting a prospective client with an existing web site on a re-design is a much tougher proposition.

Encourage Referrals

Off the different ways to market a web design business, word-of-mouth can seem like the toughest to track. But if you push for very targeted mentions of your web design skills, you can land new clients and track where they came from easily. The secret is promoting referrals. Offering a discount for existing clients who send a new client your way, you can get the best sort of word-of-mouth traffic.

Start Measuring Now

With marketing, it often seems hard enough to actually plan and complete marketing projects — especially when you have work you could be doing for your clients. Adding measurement on top of the work it takes to get your marketing efforts in motion can be tough. Just the same, it’s necessary. Having information about the effectiveness of your particular marketing strategies can help you decide what’s really working for you and what isn’t.

Once you’ve got some numbers in hand, you can focus on those marketing methods that you know are bringing you the most clients, letting you get the best return on the time you invest. You will likely even be able to save time and money on the process in the long-run, making calculating the ROI on your marketing efforts crucial to your web design business in the long run.

About the author

Thursday Bram is a full-time freelancer who has been working on her own for more than seven years. She writes about the business side of freelancing and maintains her own website at ThursdayBram.com.

CSS which stands for Cascading Style Sheets is a language to give better look and feel to the pages created on any markup languages like HTML, XHTML, and XML etc. CSS was first introduced in December of 1996. The purpose to launch the CSS is to make the presentation of the HTML and XHTML pages more attractive, easy and understanding. HTML here stands for Hyper Text Markup Language which was first launched in 1991, and was introduced by Berners-Lee. So from 1997 onwards these both the languages works together to make websites more perfect and eye catching. At present there would not be any website on the web which would not be using CSS, whether it is using HTML or XHTML or XML or any other markup language, it’s the different thing. But thinking about the website without the work of CSS is second to impossible.

Currently most of the browser supports CSS2.1 and HTML 4.01. But as CSS3 and HTML5 are mostly launched, every browser making company is highly considering these two for their next version launch. And probably in IE 9 most of the features of CSS3 and HTML 5 would be compatible. Mozilla Firefox already supports many features included in CSS3 and HTML 5. The same way Google Crome and Safari too supports many features of CSS3. So it is really good news for present and upcoming web designers. These both provide less write more gain kind of stuffs. One would need to write very less line of code and would be able to get more features. If you are not much interested about your website’s user friendly GUI and attractive design then it does not matter much to you whether it is CSS2.1 or CSS3 and HTML 4.01 or HTML5. But if you are very much precise about the way your website look then you definitely got to know that what’s there in CSS3 and HTML5.

If we talk about CSS3 first, let’s see why it became a buzz in the arena of World Wide Web. It’s the features provided by CSS3 which is making it popular before even fully launching it. It provides highly dynamic and decorative features to the simple HTML page. It is providing stuffs like rounded corners, multiple background, direct web fonts, wrapping to the text, stroke and shadow to the text, 2D transformation to the object, animations, gradients, opacity, HSL and HSLA colour, background clipping, outline, box-resizing, box-shadow, top-right-bottom-left navigation, attribute selector, and overflows-x and y etc. These are all the features you can play with, which were not there in the previous versions of CSS.

These features can be used to make the web page and its content load faster and accurate. As CSS is always embedded it would load simultaneously with the page loading and hence would not take any extra time for loading. Now take a simple example of box-shadow, if we use a previous version of CSS there is no option to give a shadow to a div or span any other attribute. So what the programmers do is—they put the shadow image at the bottom of the div to give the shadow effect. This extra image takes extra time for a page to load. Now, think about a shopping cart website which have around 100 products in a single page and every product div have shadow image. See, how much time and load would it cost to a single page? This is Just an example of box-shadow. The same example implies for the rounded corner div, Where there would be a background image to make a div rounded cornered. Giving a shadow to the text was never possible in the previous versions of CSS except you use jQuery which again would take more time to load. Previously, only RGB and Hex mode colours were supported but now one can use HSL (Hue-Saturation-Lightness).

Take another example where you need two images as a background of a single div. Is it possible to set two backgrounds? No. So what do you do? Take two div and putting overflow and then set the background of one to left and one to right, this is what you are doing for just giving two backgrounds. Isn’t this process too lengthy? That’s the reason CSS3 provides multiple backgrounds. Even background clipping is also possible. You can also use direct web fonts. And there are many more you can trick around. One can find out all the features and syntax for implementations at http://www.css3.info/preview/.

HTML5 which is also in a development phase is having some amazing features too. Have you ever thought of playing your video on your webpage without using any script of API? Do you think it is possible? With HTML5 it is. Even you can play video on the background and in front you can have a signup form and Text. HTML5 have introduced elements called ‘video’ which makes this possible. And even it is easy to implement and maintain. There are many other elements too, which are being embedded into HTML5; few of them are audio, footer, header, canvas, progress, time and the list is long. Again, these all elements are embedded in HTML and hence do not need any extra process of API to load these elements, so ultimately saves the load time and memory of the client machine. To know more about HTML5 elements, features and usages and maintenance you can refer to the given website: http://www.w3schools.com/html5/html5_reference.asp.