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

Slides:



Advertisements
Similar presentations
Slice and Dice: From PSD Image to XHTML+CSS Svetlin Nakov Telerik Corporation
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Cascading Style Sheets
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
CSS Tips and Tricks for Designing Accessible Websites Presented by Grace Strother.
Unit 20 - Client Side Customisation of Web Pages
Tutorial 4: Creating page layout with css
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes:
Week 7 Web Typography. 2 Understanding Type Design Principles.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Looking Good Online Design and Presentation of Websites 1.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
Cascading Style Sheets CSS. CSS Positioning Normal Flow Top -> bottom | left -> right Arranged in the order they appear in the code make room for one.
Cascading Style Sheets CSS. div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Responsive design - Bedrock to our site Responsive site templates included.
Page Layout with CSS Learning Web Design: Chapter 16.
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.
Lesson 4 - Revising the Document Layout Microsoft Word 2010.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Tutorial #6 – Creating Fixed Width Layouts. Tutorial #5 Review – Box Model Every html element is surround by a box Content, Padding, Border, Margin Can.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Digital Media SM1001 Digital Media, Semester A School of Creative Media © Week 07, 2010.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
Mimi Opkins.  One of the major benefits of using CSS is that you’re not forced to lay your sites out in tables.  The layout possibilities of CSS give.
CSS.
Web Development & Design Foundations with HTML5
Cascading Style Sheets Layout
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
The Box Model in CSS Web Design – Sec 4-8
Images.
Images.
The Box Model in CSS Web Design – Sec 4-8
CSS Layouts: Grouping Elements
Webpage layout using CSS
Inserting and Working with Images
Concepts for fluid layout
CS 321: Human-Computer Interaction Design
Web Development & Design Foundations with HTML5
The Box Model in CSS Web Design – Sec 4-8
Creating a Baseline Grid
Styles and the Box Model
Fixed Positioning.
MORE Cascading Style Sheets (The Positioning Model)
Images.
Images.
Responsive Framework.
Cascading Style Sheets™ (CSS)
Template for IBI poster 36 inches in width and 48 inches in height The title occupies no more than three lines First Author1, Second Author2, Third Author1,2.
Images.
Template for IBI poster 48 inches in width and 36 inches in height The title occupies no more than two lines First Author1, Second Author2, Third Author1,2.
Web Development & Design Foundations with HTML5
Concepts for fluid layout
Various mobile devices
Presentation transcript:

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

1.Web Design/Designer-Coder Relationship

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.

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, # NAVIGATION BAR Line Size W: 942px H: 1px Color # Location Between line and bottom of header: 39px - Between line and right/left edges of content area: 14px Copy Font: Arial Capitals, 12px, # Distance between words 15px

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, # 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

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

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 Other/Bad-Web- Design/ _hnsqhf/1/ _P CJPX# _bsgAD-O-LB Some Poor Examples

2. Fixed vs Fluid Website Layouts

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

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

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

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. ( )/2=

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

Advantages and disadvantages of both: Fluid Website AdvantagesDisadvantages Ability to see more content Ideal for people carrying small resolution monitors like mobile devices Usually don’t have to scroll sideways 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 Website might look minute on small resolution monitors Could have long line lengths (content expands as screen gets wider) You’ll have a scrollbar on small resolution monitors

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.

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. 1. Fonts (Conversions based on 16px browser default size.) PixelsEmsPercentPoints 16px1em 100% 12pt 24px1.5em150%18pt Etc

2. Layout div#container { width: 70%; } div#container { width: 800px; } Fluid WebsiteFixed Website HtmlCSS div#containerbig { width: 900px; height: 600px; } div#containersmall { width: 70%; height: 100%; } HtmlCSS In Nested Divs:

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.) 3. Images

3. Screen Resolutions

1024 x % 1280 x % 1366 x % 1280 x % 1440 x % 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%) Screen Resolution Usage Statistics / Feb – Jul 2011

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.

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” 9”9” Screen resolution 1024 x 768 px 9”9” 12” 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.

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