Website Design

StudyBlue printing of Website Design html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* end RESET */ .header { min-width:800px; } .logo { padding:6px 20px 2px 20px; margin:0; font-size:25px; font-weight:bold; color:#808285; position:relative; border-bottom: 1px solid #c5c5c5; } .logo-blue { color:#70adc4; } .logo-desc { font-weight:normal; font-size:19px; color:#cccccc; margin-top:50px; position:absolute; display: none; } .back-button { position:absolute; top:20px; right:20px; font-size:13px; line-height:25px; color:rgb(0,175,225); font-weight:normal; } .back-button a { color:rgb(0,175,225); } .instructions { padding:0; margin:0; width:100%; position:relative; color:rgb(100,100,100); } .step-holder { border-left:1px solid #ededed; margin-left:20px; } .steps { padding:15px 0; float:left; width:24%; border-right:1px solid #ededed; text-align:center; } .steps-01 { } .steps-02 { } .steps-03 { } .steps-04 { } .label { padding:5px 10px; } .print-button { } .print-button a { background-color:rgb(0,175,225); color:white; line-height: 19px; padding:9px 8px 5px 30px; font-size:14px; text-decoration:none; background-image: url(images/printer.png); background-repeat: no-repeat; background-position: 7px 50%; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .print-button a:hover { background-color:black; } .theNote .content { width: 8.0in !important; margin: 5px auto; padding:20px; background-color:white; } .theNote .header { border-bottom: 1px dashed #C8C8C8; font-size: 17px; padding: 0 0 10px; line-height: 19px; color: #00ADE1; min-width:500px; } .theNote .body { font-size: 14px; line-height: 19px; padding: 10px 0; } .theNote{ padding:6px 0; clear:both; background-color: rgb(200,200,200); } .theNote h3{ color: rgb(100,100,100); } .theNote h1, .theNote h3{ background-color:white; padding:2px 20px; width:8.0in !important; margin: 0 auto; font-size: 15px; } .theNote h1{ padding-top: 10px; font-size: 15px; } .theNote h1:first-child{ font-size: 20px; } .theNote h3 { font-size: 14px; font-weight: normal; } #options { border: 3px double #ccc; padding: 5px 12px; margin: 10px 50px 10px 20px; float: left; } #info { border-top: 1px solid #ccc; padding-top: 5px; font-style: italic; } li { margin: 5px 10px 5px 25px; } ul li { list-style: disc; } ol li { list-style: decimal; } img { border: 0; } table { clear: both; width: 100%; border: 1px solid #c5c5c5; border-width: 1px 0; margin: 0; page-break-after: always; } table#page { page-break-after: auto; } td { text-align: center; font-size: 12px; border-bottom: 1px dashed #c5c5c5; height: 1.75in; width: 50%; padding-left: 15px; } .leftside { border-right: 1px solid #cccccc; padding: 0 15px 0 0; } .bottom td { border-bottom: none; } .clearfix { clear:both; line-height:1px; height:1px; } img { max-width:80%; max-height:150px; margin:20px; } @media print {.header { display: none; } .content .header{ display:inherit; } table { border: 1px dashed #bbb; border-width: 1px 0; } .theNote{ background-color:white; } } Screen Real Estate PSD should be 975 pixels wide by 625ish pixels tall (can be made taller) Average resolution of a computer screen is 1024x768 (this is too big because it will take up the whole screen) Liquid layout: website expands and contracts when the browser changes sizes Page Components Site ID: logo Usually in upper left Usually a link to the homepage Header area: upper part of web page, includes site ID, navigation, maybe a search bar Navigation: usually on the top, left, or bottom Body area: content (text, photos, videos, or a combination) Footer: bottom (often similar to the header) Brings design closure to the page Navigation and information Navigation Answers the questions where am I, w here can I go, and w here have I been Global navigation: the navigation that links you to all the main sections of the website Usually are the same on every page Designed and placed with consistency Sub-navigation: links only within a specific section Site tools: links important enough to be on every page, but not content heavy enough to be part of the global navigation Often site index, directory, contact, search, FAQs, shopping cart, etc Breadcrumbs: a trail back to where you started Brings you back page by page Show people where they are: change link color, use sub headings Writing for the Web People read 25% slower on a computer screen Organize everything into small chunks with the same subject and use headings Use bullets, bolding, colors, highlighting, etc Never use "click here" as a link Only use what is necessary for navigation and page elements Microsites and Minisites Have a marketing or advertising spin HIghlights one product or service Less structured and more engaging More graphical and interactive Body copy should be 10-12 pt