Web Design Norms
Upcoming SlideShare
Loading in...5
×
 

Web Design Norms

on

  • 475 views

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

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

Statistics

Views

Total Views
475
Views on SlideShare
475
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Design Norms Web Design Norms Presentation Transcript

  • What isHTML & CSS?
  • HTML5 is the latest revision of theHTML standard. It is a language forstructuring and presenting content for the World Wide Web, a core technology of the Internet.
  • In particular, HTML5 adds many new syntactical features. New elements, such as <section>, <article>, <header>, and <nav>, are the basic parts of semanticcontent of documents. These alsoinclude the <video>, <audio>, and <canvas> elements
  • Its looks like this
  • 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 viewers 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
  • 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
  • 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
  • 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
  • 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/
  • Thanks!