Web Design and Development, HTML5, CSS3, Responsive Design, PSD Norms.

2. What is
HTML & CSS?

3. HTML5 is the latest revision of the
HTML standard. It is a language for
structuring and presenting content
for the World Wide Web, a core
technology of the Internet.

4. In particular, HTML5 adds many
new syntactical features. New
elements, such as <section>,
<article>, <header>, and <nav>,
are the basic parts of semantic
content of documents. These also
include the <video>, <audio>, and
<canvas> elements

5. Its looks like
this

6. Type of Layout
• Fixed Width Layouts http://www.apple.com/
These are layouts where the width of the entire
page is set with a specific numerical value.
• Liquid Layouts http://www.uchicago.edu/
These are layouts where the width of the entire
page is flexible depending upon how wide the
viewer's browser is.
• Responsive Layouts http://www.microsoft.com/en-in/default.aspx
These are layouts where the width of the entire
page is depending upon devices

7. Effective tips to designing layouts:
• Ensure Fast Loading
• Balance Text and Graphic Equally
• User Friendly Navigation, Use Breadcrumbs
• Use 960 Grid PSD
• Fonts and Typography
• Keep your pages short, but not too short
• Keep images small and use sprites whenever
possible
• use graphics that fit the content
• Use External Fonts for heading only

8. Web 2.0 Specifications
• Simplicity
• Central layout
• Fewer columns
• Backgrounds
• Separate top section
• Solid areas of screen
• Simple navigation
• Bold logos
• Bigger text
• Bold text introductions
• Strong Colour
• Gradients
• Reflections
• Use icons

9. PSD Norms
• Name Layers & Be Accurate
• Spell Check
• Maintained Versions
• Use Folders / Use Folders Structured
• Delete Unnecessary Layers
• Globalize Common Elements
• Use Layer Comps/Smart Objects
• Don’t Stretch or Flatten Buttons
• Make Licensed Fonts Available
• Consider Device Width
• Consider Device Width

10. Useful links
• http://www.findmebyip.com/litmus/
• http://www.html5doctor.com/
• http://html5demos.com/
• http://www.html5rocks.com/en/
• http://www.webdesignfromscratch.com/web-
design/web-2-0-design-style-guide/

11. Thanks!