copyright penny mcintire, 2013 page layout 2 copyright penny mcintire, 2013 contents resolution and...

Copyright Penny McIntire, 2013 Page Layout

2 Copyright Penny McIntire, 2013 Contents Resolution and Page Size. Strategic Prioritization of Information. Creating Harmony. Page Layout Hints. Predesigned Page Templates. Promoting Speedy Download. Storyboards.

3 Copyright Penny McIntire, 2013 Resolution and Page Size Resolution: the number of pixels that fit in an inch on the screen or the number of pixels that can display on the entire screen. So, we might say: a resolution of 100 ppi, which refers to the per inch measurement, or A resolution of 800 x 600, which refers to a per screen measurement.

4 Copyright Penny McIntire, 2013 Resolution and Page Size Computer graphics typically have a per inch resolution of around 72-100 ppi I use 100 because the math is easier. 100 ppi is much lower than high-quality printed material; even a cheap color printer these days might use 1400 dpi.

5 Copyright Penny McIntire, 2013 Resolution and Page Size Because the dots are smaller/finer on a higher res system (e.g.,, more dots fit per inch), the same image appears smaller and crisper on a high res display than it does on a low res display. low resolution high resolution

6 Copyright Penny McIntire, 2013 Resolution and Page Size For instance, assume the circles below have a diameter of 500 pixels On a 15 monitor that displays at 800 x 600 pixels. On a 15 monitor that displays at 1600 x 800 pixels.

7 Copyright Penny McIntire, 2013 Resolution and Page Size Monitor size affects things, too On a 15 monitor that displays at 800 x 600 pixels. On a 19 monitor that displays at 800 x 600 pixels.

8 Copyright Penny McIntire, 2013 Resolution and Page Size Summary: The more pixels that are crammed into a given area (e.g., higher resolution), the smaller things look. The smaller the monitor, the smaller things look.

9 Copyright Penny McIntire, 2013 Resolution and Page Size So, keep in mind that everything will appear smaller or larger to a given visitor than it does to you, depending upon his or her screen resolution and monitor size.

10 Copyright Penny McIntire, 2013 Resolution and Page Size Common computer resolutions 640 x 480 px (rare? For visually impaired?) 800 x 600 px 1024 x 768 px 1200 x 1600 px iPhone resolutions 320 x 480 px (generations 1-3 at 163 ppi!) 640 x 960 px (generation 4 at 326 ppi!)

11 Copyright Penny McIntire, 2013 Resolution and Page Size Adobe Dreamweaver has Adobe Device Central built in, to help you manage multiple formats. The standard target for public-access web sites is sometimes a low screen resolution of 800 x 600 pixels, although trending higher (but mobile???) You must use 800 x 600 for all work in this class, or you will lose points!

12 Copyright Penny McIntire, 2013 Resolution and Page Size Why such low resolution, when even cheap laptops are capable of a much higher resolution today? Many users have their browsers occupy only a portion of their screens. People with poor vision (over age 45!) dial their resolution down. Cell phones.

13 Copyright Penny McIntire, 2013 Resolution and Page Size Desktop systems are often shipped with display settings dialed down a notch, and most users dont know how to change. LCD monitors are built for a specific resolution and wont look good at any other resolution. If an LCD monitor is purchased separately, the owner should tweak computer display settings to match native resolution of the monitor. I cant test on all devices, unfortunately, and its not my job to make things easy for you.

14 Copyright Penny McIntire, 2013 Resolution and Page Size 800 x 600 pixels Provides a usable area of only 750 pixels horizontally by 395 pixels vertically -- the browser chrome uses some of the pixels). 750 x whatever is what we will use for this class. Why whatever?

15 Copyright Penny McIntire, 2013 Resolution and Page Size Although horizontal scrolling is evil, vertical scrolling is well-tolerated by most visitors. Still, research states that most people dont want to scroll down more than two screenfulls. Im not convinced thats true when there is a lot of information, I would rather scroll 10 times than load five separate web pages.

16 Copyright Penny McIntire, 2013 Resolution and Page Size Printing pages Test that: The page prints on a black and white printer. It doesnt run off the left and right margins in the default portrait mode. This was/is more of a problem with old systems and old printers.

17 Copyright Penny McIntire, 2013 Resolution and Page Size For the best printed page: Provide a print page button that delivers a separate HTML page optimized for printing. Downside: redundant pages. Better idea, use CSS and a print media type that changes all the styling to work on a black and white printer.

18 Copyright Penny McIntire, 2013 Resolution and Page Size Either way, use black text on white background, remove unnecessary stuff like navigation, etc. If an article is more than one page long, consolidate all pages into one.

19 Copyright Penny McIntire, 2013 Liquid, Solid, and Elastic Layout Solid design: the content is hard-coded to fit the smallest screen size you expect the visitors to have (say, 800 x 600 px), and the rest fills with background. To use, set a specific width for the div or table that holds the content. The div/table can be either centered or left justified on the background.

20 Copyright Penny McIntire, 2013 Liquid, Solid, and Elastic Layout Liquid design: the page automatically adjusts to fill all available screen area, using divs or tables that expand and contract to fill the available space. To use this, dont specify a width on the main content div or table. You can still specify a width on some table columns, as long as at least one column doesnt have a width it will expand and contract.

21 Copyright Penny McIntire, 2013 Liquid, Solid, and Elastic Layout Elastic design, a subset of liquid design, in which the page automatically expands and contracts by increments keyed to the visitors default font size. E.g, the content area will be larger if the visitor has specified a larger font size helpful for accessibility reasons. To use, specify all widths using CSS and the em designator (more later, when we get to CSS).

22 Copyright Penny McIntire, 2013 Liquid, Solid, and Elastic Layout Advantage of solid design: Can set the layout precisely and be fairly confident that it will look like that when the visitor sees it. Advantage of liquid design: In theory, it works for all screen sizes, from cell phones to huge monitors (but it is extremely difficult to design a page that looks good at all resolutions).

23 Copyright Penny McIntire, 2013 Liquid, Solid, and Elastic Layout Advantage of elastic design: Can set the layout precisely, like solid design, but the layout also expands if the visitor has overridden your base font size, which is helpful to the visually impaired. Alternatives: Use CSS layout properties to set up different page layouts for different devices. Tricky, so test thoroughly.

24 Copyright Penny McIntire, 2013 Liquid, Solid, and Elastic Layout For this class, you may use any of these three layout styles, BUT you will be graded on an 800x600 window.

25 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Make the most important items the most eye-catching: Strategic prioritization of information, by Lynda Weinman.

26 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Presenting Yourself to Advantage in a Second Interview by Susan Smith of Career Services. Do you want to ensure that job offer? Come to this presentation and well tell you everything you need to know in order to impress recruiters, from your attire to your attitude to how to answer that sticky question, What level of compensation do you expect? Well even provide free pizza and sodas! When: Tuesday, February 8, 3:30 p.m. Where: Computer Science Building, PM 253. Registration required. Sign up at the Department of Computer Science, Computer Science Building, PM 460. Presented by the Department of Computer Science and Career Services, Northern Illinois University. Poster Announcing an Event, Example 1

27 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Poster Announcing an Event, Example 2 Whats different?

28 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Control focus and create a visual hierarchy using various types of contrast

29 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Size: bigger attracts attention.

30 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Shape: irregular or contrasting shapes attract attention.

31 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Color: brighter, more saturated colors attract attention.

32 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Light versus dark contrast: different attracts attention.

33 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Texture: texture attracts over no texture.

34 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Dimensional contrast: two-dimensional versus three-dimensional.

35 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Space contrast: open versus jam packed.

36 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Line contrast: smooth versus jagged, curvy versus sharp, direction contrast.

37 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Focus: sharp focus attracts over blurred focus.

38 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Typography: different, bolder, larger, and more decorated attracts.

39 Copyright Penny McIntire, 2013 Strategic Prioritization of Information Style contrast: realistic versus cartoon or abstract, etc.

40 Copyright Penny McIntire, 2013 Strategic Prioritization of Information In general, different attracts attention. Use this to your advantage to focus the viewer.

41 Copyright Penny McIntire, 2013 Creating Harmony On the other hand, too much contrast and noise is just distracting. Whats wrong with this picture

Copyright Penny McIntire, 2013 42

43 Copyright Penny McIntire, 2013 Creating Harmony Whats good about this picture...

Copyright Penny McIntire, 2013 44

45 Copyright Penny McIntire, 2013 Creating Harmony Pages should look clean and harmonious, not busy. The unifying factors of similarity, repetition, and alignment can keep the page from being visually confusing. Guidelines

46 Copyright Penny McIntire, 2013 Creating Harmony Group similar items (using alignment, size, color, contrast, shape, proximity, connection, etc.) to provide visual calm. Example: six small photos grouped in a 2 x 3 grid, rather than scattered randomly.

47 Copyright Penny McIntire, 2013 Creating Harmony

48 Copyright Penny McIntire, 2013 Creating Harmony Another example:

49 Copyright Penny McIntire, 2013 Creating Harmony Leave plenty of white space (even if the background is actually red or black or whatever). Zen City Morning, www.csszengarden.com/?cssfile=177/177.css,www.csszengarden.com/?cssfile=177/177.css by Ray Henry, www.reh3.com

50 Copyright Penny McIntire, 2013 Creating Harmony Empty space feels expansive and calm. Even so, avoid content-less pages, click- through pages.

51 Copyright Penny McIntire, 2013 Creating Harmony Consider using a scholars margin a very wide margin on one side that is sometimes used for content, such as headings or pull quotes, thus leaving most of the margin empty.

52 Copyright Penny McIntire, 2013 Creating Harmony Most of the time you shouldnt try to cram too much information on a page. There are exceptions: e.g., MSN or yahoo home page.

53 Copyright Penny McIntire, 2013 Creating Harmony If you must cram the page, then its even more important to: Chunk (group) related information with headers, subheads, bulleted and numbered lists, indentation, or spacing. Use visual adhesive (organizational tools) like borders, rules, different background colors in table cells, etc

54 Copyright Penny McIntire, 2013 Creating Harmony visual adhesive: the borders around the chunked, related groups, using the tag.

55 Copyright Penny McIntire, 2013 Creating Harmony www.msn.com

56 Copyright Penny McIntire, 2013 Creating Harmony There is controversy about borders/boxes around a page or page sections: Gives closure, a good thing. Creates barriers and makes the visitor feel restrained, a bad thing. Compromises (see MSN again on next slide) Borders and boxes that are very subtle. Or just a horizontal rule, top and bottom.

57 Copyright Penny McIntire, 2013 Creating Harmony www.msn.com Compromise (msn.com to left): borders, boxes, and horizontal rules are very subtle.

58 Copyright Penny McIntire, 2013 Creating Harmony Repeat elements within the page. Shape, proportion, color, etc. For instance, dont think that every element on the page must be a different color. In art classes, I was taught that if a color appears in one place on a painting, you must make sure it appears somewhere else, too. Repeat elements across pages: Same top banner, same navigation, same footer, etc.

59 Copyright Penny McIntire, 2013 Creating Harmony More on alignmentlets look at three form field alignment examples

Adfs iuemnrfdi Dfutgmuir Lgihit gkitr f9r Dgj Ffoirjgu S9dke9kd asd9 Dsfpoi sad Example 1 Copyright Penny McIntire, 2013 60

63 Copyright Penny McIntire, 2013 Creating Harmony Example 1: definitely bad. Example 2: much better. Example 3: controversial; some experts say that you shouldnt mix two different alignment styles on a single presentation. So what did you think about the alignment of all of these PowerPoint slides, with content aligned left and titles aligned right?

64 Copyright Penny McIntire, 2013 Creating Harmony Summary: Too much serenity is monotonous. Too much contrast and stimulation are visually chaotic. If resolved skillfully, the tension between serenity and stimulation can offer visual harmony.

65 Copyright Penny McIntire, 2013 Page Layout Hints Whenever possible, align at least two side of an element (better three or even four sides) with something else on the page (like our good house example). Divide the page into a grid (done using divs or tables) and place items in the cells to get elements to line up. Think of it as you would columns and horizontal divisions of a newspaper.

66 Copyright Penny McIntire, 2013 Page Layout Hints

67 Copyright Penny McIntire, 2013 Page Layout Hints Avoid using the dead-center of your page as the composition center; instead, the focus of the page should follow the rule of thirds...

BoringInteresting Rule of thirds: divide the page into thirds horizontally and vertically. The composition focus should be on the areas of intersection, the red dots above. Copyright Penny McIntire, 2013 68

69 Copyright Penny McIntire, 2013 Page Layout Hints Consider breaking up the rectangle- ness inherent in page design: Round the edges of photos, or mask the background out so that the picture subject floats on the page background. Use rounded or irregular graphics. Use appropriate non-rectangular background images.

70 Copyright Penny McIntire, 2013 Page Layout Hints Break the grid Butterfly Effect, www.csszengarden.com/?cssfile=154/154.css, by Kevin Linkous, www.sitemaker.us

71 Copyright Penny McIntire, 2013 Page Layout Hints Other methods to break up the page: Pull QuoteDrop CapFirst Paragraph Set Differently (graphic and leading)

72 Copyright Penny McIntire, 2013 Page Layout Hints Consider balance in your design: Symmetrical balance: the calmest but can be boring.

73 Copyright Penny McIntire, 2013 Page Layout Hints Asymmetrical balance: more interesting but still not too unsettling.

74 Copyright Penny McIntire, 2013 Page Layout Hints Unbalanced: unsettling and edgy.

75 Copyright Penny McIntire, 2013 Page Layout Hints Every page in the site should have: Logo and organization identification the top banner. Page identification what is this individual page doing? Page identification should match the navigation that takes people to the page. Main navigation to the other main pages on the site.

76 Copyright Penny McIntire, 2013 Page Layout Hints Local navigation, if necessary for getting to sub pages in that section of the site. A standard footer, if needed copyright or privacy notice, and/or bottom navigation. Fat footer: a footer with a substantial amount of navigation, not just the main navigation repeated. Usually chunked.

77 Copyright Penny McIntire, 2013 Page Layout Hints Where should navigation go? Most common (and common is good) at the top and the left (the inverted L layout), because thats the area that always displays first and most reliably, and the place where our eyes go first. You can put it elsewhere only if its crystal clear what is and is not navigation, and even so, this comes with a price.

78 Copyright Penny McIntire, 2013 Pre-designed Page Templates Careful using premade templates provided by an IDE; they are often overused, overblown, and look cheesy. But you can steal ideas and individual elements. Templates available on the web (e.g., WordPress): some good, some bad, some free, some expensive. You may NOT use them for this class!!!

79 Copyright Penny McIntire, 2013 Pre-designed Page Templates Dreamweaver has built-in layout templates that can be a good thing yes, you can use them for this class.

80 Copyright Penny McIntire, 2013 Pre-designed Page Templates Access them when opening a new document: "Blank Page" just as it sounds. "Blank Template" uses one of 18 predefined templates in CS6, including two specifically for HTML5.

81 Copyright Penny McIntire, 2013 Pre-designed Page Templates "Fluid Grid Layout" Sets up CSS for three devices: Mobile: 480 px Tablet: 768 px Desktop: 1232 Must click on the three monitor icons (small, medium, and large) on the top bar to customize each different layout. Keep the three automatic layout CSS files pristine create separate CSS for your own formatting.

82 Copyright Penny McIntire, 2013 Pre-designed Page Templates "Page from Template" custom templates that you have set up or have been given, like NIU templates. "Page from Sample" UGLY!

"Insert Fluid Grid Layout Div Tag" from the Insert window/panel on the right side to add more s inside, or everything will break.">

83 Copyright Penny McIntire, 2013 Pre-designed Page Templates Regardless of which one you use: Dreamweaver will create CSS and JavaScript files that will open in tabs in Dreamweaver. You must save them and FTP them along with your HTML file, or everything will break. Make sure that whatever you add, you add inside the containing for the entire page. If "Fluid Grid Layout" use the "Insert" > "Insert Fluid Grid Layout Div Tag" from the Insert window/panel on the right side to add more s inside, or everything will break.

84 Copyright Penny McIntire, 2013 Promoting Speedy Download Images and code files that are called from multiple pages are downloaded only once, if using the same url reference: Reuse images. Pull JavaScript and CSS into external files and reuse. Dont use gratuitous images, animation, sound, or video.

85 Copyright Penny McIntire, 2013 Promoting Speedy Download Use smaller images whenever possible. Always optimize images appropriately (more in graphics). Minimize the number of unique navigational buttons (more in Navigation lecture).

86 Copyright Penny McIntire, 2013 Storyboards Storyboards show the overall design of a site. In other words, think before you code.

87 Copyright Penny McIntire, 2013 Storyboards 1.Create a navigational chart (outline or hierarchy chart) like those we have already examined. 2.Sketch out each pages layout, showing placement of repeating items, in black and white only, either on paper or in a WYSIWYG editor a preliminary comp. No color allowed distracting.

88 Copyright Penny McIntire, 2013 Storyboards 3.Design the look and feel (color scheme, borders, etc.) of the site the finished comp. Sketch this in either: an image editor like Fireworks or Photoshop (but dont think you can just save the whole thing as a jpg and use it for the whole page), or an HTML editor like Dreamweaver, SeaMonkey, etc, creating an HTML file.

89 Copyright Penny McIntire, 2013 Storyboards 4.Create a template (a feature of Dreamweaver) and/or style sheet. When you actually implement the pages, you can use a single Cascading Style Sheet for all the pages in the site. Thus, if the same basic layout is used for each content page, you need to design only once.

90 Copyright Penny McIntire, 2013 Storyboards Write all of your choices for the site down! The decisions that you make on your site (fonts, codes for colors, image sizes, special effects on graphics, password to the FTP site, etc.) seem so important right now that you are sure you will never forget them. You will, and then youll have to look them up in the code, which slows you down.

copyright penny mcintire, 2013 page layout 2 copyright penny mcintire, 2013 contents resolution and...

Documents