HTML 5 and CSS 3 have swept the world of internet by storm within just two years. With the slew of structural elements and lightweight features they offer for quicker download times for mobile sites, they allow the web designers to effortlessly apply box/text drop shadows, rounded corners, and animations. Both HTML and CSS are favored by almost all search engines and so are utilized extensively for web development. Here are the tops tips to keep in mind while using HTML 5 and CSS 3 for web development.
Define the Page Areas
The doctype has to be very simple without the need for extra body attributes and the info in the heading should be labeled clearly. The content inside the <body> tag should incorporate all of the structure of the main page.
Use Creative CSS 3 Wizardry
To complete the fundamental stencil layout, some CSS styles can be used. Adding an external CSS style-sheet in the fundamental HTML 5 template will separate the code areas. This will assist in clearing plenty of confusion in due course when your styles and pages start to run on for various pages.
Use the New Features in CSS 3
There are several new features in CSS 3 that several designers are not aware of. A majority of these features are not only meant for aesthetics, but also incorporate animation effects.
Few of the features that you can put into great use include –
- Box Shadow
- Text Shadow
- Border Radius
- Font Face
- Box Sizing
Use Nth-Child in CSS 3 for Zebra Striping
Typically, highlighting each 2nd element in a sequence or zebra-striping has involved choosing all the components through java script before looping via them and underscoring the odd components.
But, the pseudo class nth-child in CSS 3 makes it easier to achieve this without java script. So, make use of this for zebra striping.
Avoid Using Internet Explorer
Avoid using Internet Explorer because it needs little hacking to get HTML 5 to work. Instead, use the newer browsers that are based on web kits like Firefox and Safari as these search engines offer support for almost all CSS 3 techniques.
Incorporate Proportional Layouts for Responsive Designs
If you want to develop a flexible design that appears great on all viewports, you have to change the pixel-based, fixed layouts to proportional, fluid ones. This will help the components to scale relative to the viewport till a media query changes the styling.
Work with Top to Bottom Approach
Begin with the header tag followed by body tag. Later, start filling in the gaps. Begin at the top by working on aspects like placement of logo and navigational structure. Then, move on to body layout. At last, work on footers, and finish the design, rather than taking the bottom-up approach.
Following these tips will help in creating a good website. When HTML 5 and CSS 3 are included in all browsers some day, it will be very much easier to design websites.