Lesson 05 // Web Design, Layout & Structure

1. Lesson 05 // Web Design, Layout & Structure • Web Design/Designer-Coder Relationship • Fixed vs Fluid Website Layouts • Screen Resolutions

2. Web Design/Designer-Coder Relationship

3. Maintain a checklist of what to provide to the programmer 1. Folder containing html, css and images folder. Images folder consists of each of the website’s page designs. This way, the programmer can open the index.html in his/her browser and see the final design exactly as it needs to be implemented. 2. Individual jpg or png images. For example: logo, specific images per page, little icons, etc. 3. Template outlining details of the website. Such as fonts, dimensions, colors etc. 4. Description of how elements animate on the page.

4. Example of a template outlining website details HEADER Size W: 969px H: 62px Color #1881e2 Location At 0 distance from top of page, right above content area and occupying same width as content area Search W: 130px H: 19px Font: Arial, 9px, #333333 NAVIGATION BAR Line Size W: 942px H: 1px Color #333333 Location Between line and bottom of header: 39px - Between line and right/left edges of content area: 14px Copy Font: Arial Capitals, 12px, #333333 Distance between words 15px

5. Example of a template outlining website details MAIN IMAGE Size W: 648px H: 480px Location Between top of image and bottom of header: 89px - Between left edge of image and left edge of content area: 14px RIGHT SIDE BAR Size W: 243px H: 480px Titles Font: Arial, 15px, #1881e2 Body Font: Verdana, 11px, #666666 Location Between left side of copy (title + body) and right edge of image: 32px - Between right side of body and right edge of white background: 32px - Between top of first title in copy and bottom of header: 89px

6. Example of a template outlining website details FOOTER Size W: 969px H: 27px Color #093157 Location Just below the content area – Between bottom edge of image and top edge of footer: 43px Copy Font: Arial Capitals, 12px, #cccccc

7. Attributes of good website design • Less is more • Avoid verbose text • Clear message • Attractive design • Good color coordination • Consistent fonts • Consistent layout across pages • Working links • Easy navigation Some Good Examples Some Poor Examples http://skywire.co.uk/ http://www.theimagists.com/ http://www.fusemarketing.com/ http://www.cloudberrycreative.com/ http://aftmichigan.org/ http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_hnsqhf/1/438579778_PCJPX#475922649_bsgAD-O-LB

8. 2. Fixed vs Fluid Website Layouts

11. There are 2 ways to prepare a layout: Fluid and Fixed. A Fluid Layout is a website layout that expands (or compresses) with a browser window’s width. A Fixed Layout is one where a website’s size doesn’t change as a browser window’s width increases or decreases. Some Examples

12. Fluid Layout in a 1024×768 px screen resolution Fluid Layout in a 1280×1024 px screen resolution

13. Fluid Layout on a 320×240 px Blackberry screen resolution.

14. 178 178 924 50 924 50 1024 1280 Fixed Layout in a 1024×768 px screen resolution Fixed Layout in a 1280×1024 px screen resolution The picture means that the fixed width of the webpage is around 924 px, which leaves a margin of 50 px of the left and right. The fixed width of the webpage is still 924 px, but since the screen resolution is 1280 px in width, it leaves a margin of 178 px on left + right. (1280-924)/2=178

15. Fixed Layout on a 320×240 px Blackberry screen resolution. Scrollbars appear.

16. Advantages and disadvantages of both: Advantages Disadvantages Fluid Website • Ability to see more content • Ideal for people carrying small resolution monitors like mobile devices • Usually don’t have to scroll sideways • Website might look minute on small resolution monitors • Could have long line lengths (content expands as screen gets wider) Fixed Website • Know exactly how your website will look for all people • Prevent long line lengths (especially for large monitors) which will comfort your readers • You’ll have a scrollbar on small resolution monitors

17. To make a fluid website, we mainly consider 3 things: 1. Fonts 2. Layout 3. Images We use the em or % unit of measurement in css, instead of px. We use the % and not the px, normally on the width. We use the % and not the px on either the width or the height. To make a fixed website, we mainly consider 3 things: 1. Fonts 2. Layout 3. Images We use the px unit of measurement in css. We use the px on the width and sometimes the height. We use the px on the width and the height.

18. 1. Fonts Em: 1em is equal to the default text size in a browser: 16px. Since scalable in nature, 1.5 em is 24px. Increasingly popular in web documents due to scalability and mobile-device-friendly nature. %: 100% is equal to the default text size in a browser: 16px. Since scalable in nature, 150% is 24px. Text remains fully scalable for mobile devices. Px: 1px is equal to one dot on the computer screen (the smallest division of a screen’s resolution). Since fixed-sized units, pxs are used in screen media (i.e. to be read on the computer screen) and popular among web designers in producing pixel-perfect websites. Pixel unit is not scalable so unfit for mobile devices. Pt: 1pt is equal to 1/72 of an inch. Points are traditionally used in print media, and like pixels, are fixed-sized units and cannot scale in size. Pixels Ems Percent Points 16px 1em 100% 12pt 24px 1.5em 150% 18pt Etc (Conversions based on 16px browser default size.)

19. 2. Layout Fluid Website Fixed Website Html CSS Html CSS <div id=“container”> </div> div#container { width: 70%; } <div id=“container”> </div> div#container { width: 800px; } In Nested Divs: Html CSS <div id=“containerbig”> <div id=“containersmall”> </div> </div> div#containerbig { width: 900px; height: 600px; } div#containersmall { width: 70%; height: 100%; }

20. 3. Images For fixed website layouts, we use the px on the width and the height. For fluid website layouts, we use the % and not the px on either the width or the height. (Applying % on both the width and the height will cause distortion on certain browsers. We need to leave one dimension loose so that it scales proportionally.)

21. 3. Screen Resolutions

22. Screen Resolution Usage Statistics / Feb – Jul 2011 1024 x 768 20.29% 1280 x 800 15.73% 1366 x 768 11.01% 1280 x 1024 10.72% 1440 x 900 9.22% 66.97% Notice that around 70% of screen resolutions are over 1000 px wide. All other screen resolutions constitute around 30% of the market. So we can go ahead and decide to build a 900 px wide layout for the majority of users, and work on a fixed layout. (900px is smaller than the smallest width in the 70%)

23. When we talk about measuring or describing screens, we are basically referring to two things: • How big they are, their physical dimension, which we get by measuring the size of their diagonal. • What resolution they have, or the number of pixels across, and the number of pixels down. The way resolution is represented is by an invisible grid. At the center of each square of that grid is a circle. The closer the circles are together (or the shorter the distance), the higher the resolution, the further apart (or the greater the distance), the lower the resolution.

25. Consider an image 500 x 375 px, open on the same laptop, once with a screen resolution of 1024 x 768 px, and once with a screen resolution of 640 x 480 px. 12” 12” 9” 9” Screen resolution 1024 x 768 px Screen resolution 640 x 480 px Even though the image on the right occupies almost most of the screen, it has a low resolution because the distance between each 2 pixels of the 640 in width and 480 in height is big. The image on the left occupies part of the screen only and it is of high resolution because the distances between the pixels is small.

26. So screen resolution is the inverse of the distance between 2 adjacent pixels. The > the distance, the < the resolution The < the distance, the > the resolution