Planning Site Design and Page Layout

Identify Best Practices Demonstrate Consistency: One way to ensure a professional look and feel to a website Using same layout on all pages Placing navigation buttons or menus in the same place Using same colors and fonts on every page

Useful Consistency Techniques Using Templates: master page that you can create and then reuse to maintain a consistent layout or style Reusing assets such as Library Objects reusable assets that are maintained in the assets panel in the Library category; more efficient Using Cascading Style Sheets: Method of creating customized styles, such as fonts, colors, alignment and spacing

Benefits of Consistency A consistent design between pages improves the usability and accessibility for the user A consistent layout makes information easier to find throughout the site Consistent navigation will also improve the user’s experience and encourage them to explore the site

Benefits of CSS Style Sheets are able to be shared between web pages as a way to create a consistent design or layout Make it easier to maintain a website More accessible to every browser Helps your page download faster

CSS Best Practices Create the web page first, then apply styles with the CSS Use an external style sheet Avoid use of inline styles

Features Used to Maintain Page Structure Headings Use of font styles and sizes Color schemes Size and placement of photos Use of design elements such as bullets Use of indentation to organize content

Fixed Layout Sets values in pixels for any columns and the overall width Centered in the browser window Will not change and may result in horizontal scrolling

Liquid Layout Sets the values using percentages for any columns and the overall width Percentage is determined by the user’s browser window

Tables Another way to control the placement of text and images Controls the length of a text line and whether or not text wraps Fixed: table or cell width is set with pixels Flexible: table or cell width is set with percentages Also an option not to allow text to wrap When this option is selected the cell will expand to accommodate the length of the text

Div element Allows you to place an item anywhere on a web page May also be layered on one another

Printing You can create a separate CSS to handle how a web page will print However, users have some control over how they choose to print what they are viewing

Printing You can change the font used for printing to make the printed document more readable Sans serif looks better on a monitor; serif looks better on a printed page You can also choose to eliminate some of the content from the printed page, such as navigation elements and advertisements

There are a variety of operating systems and web browsers available for those using the Internet Operating systems may include: Windows, Mac and Linux Web browsers may include: Microsoft Internet Explorer, Apple Safari, Google Chrome and Mozilla Firefox

Fonts Some fonts are not available on all operating systems The font may not appear as originally intended Dreamweaver provides a font family that includes a list of related fonts, that will work on both the Windows and Mac operating systems

Colors May not be displayed correctly because of a browser or a monitor Use browser safe colors also known as web safe colors 216 web safe colors Built into Dreamweaver

Margins, table borders & padding May be displayed differently from browser to browser Set margins and padding to a value Do not leave blank Colors in table borders or cells should include the # sign before the hexadecimal value when naming. Some browsers will not recognize a color if the # sign is missing

Horizontal Rule A line that can be customized on a web page Color, height, length and alignment To ensure a <hr> will be displayed correctly in all browsers it is important to use CSS rather than HTML

BrowserLab Component of Adobe CS Live online services Subscription based Previews a web page across multiple browsers and operating systems to test the compatibility of your design Eliminates the need to have various browsers installed on your computer

(3) Design Elements Line: Shapes: Texture: The basic component of a shape Shapes: A line that defines or implies a boundary Texture: A fill used in shapes to imply what an object may feel like

(12) Design Principles Emphasis: Movement: Balance: Making a specific element stand out Movement: Directing the eye in a certain direction Balance: The page is laid out in a planned and coherent visual pattern

(12) Design Principles Symmetry: Color Theory: White Space: When the composition of the text and graphics is evenly distributed around a center point Color Theory: The idea that color can affect human thoughts and emotions White Space: Areas of the page that do not have text or graphics

(12) Design Principles Contrast: Rule of Thirds: Proximity: Similar to emphasis, it separates elements by comparing or creating differences Rule of Thirds: The theory that the most interesting components of a composition, like a web page, is found off-center Proximity: The closeness or distance from text and graphics

(12) Design Principles Unity: Alignment: Repetition: Creating a feeling of wholeness Alignment: The spacing of text and graphics in relation to one another or the margins on a page Repetition: Repeating an element to create visual consistency

Improving Website Usability Helps to encourage visitors to stay at your website once they arrive Items to consider when creating a website with successful usability: Page loading time, ease of finding information, consistent and global navigation, consitent layout throughout the site, alternative text placed on images, use of headings, varying text size and color, use of tables to organize information, placement of important info relative to scrolling

Text-Formatting Guidelines Style text with CSS rather that representing text as an image Control the formatting and positioning of text with CSS Use tables to control the layout of web pages

Flowchart A visual way to outline your website Identifies each of the primary pages, secondary pages, etc.

Wireframe Shows the layout for each page Skeletal layout of the design Provides a general idea of where the web page elements will be located

Storyboard Uses the information from the flowchart and the wireframe to provide details for each page in the web site Breaks down the plans for the site into manageable pieces Shows how each page will be organized with headings, content, links, graphics, and the name of the page

Project Manager Oversees the communication process and helps keep individuals on task and on time

Planning Planning for potential issues ahead of time is one way to prevent them from occurring.

Possible Problems Slow response during client review and feedback Unclear roles and responsibilities Client changes project requirements after the project has started OR adds new requirements Poor communication between team members Poor communication with the client Poor work quality from team members

Scope Creep A problem that arises in the development process Changes in the requirements of the project as the project is being constructed Often arises in the later stages of the project; therefore, allow for extra time in the building and testing phases