5 Reasons Tables for Layouts are BAD! 1. Complicated & Difficult to maintain 2. Often slow to load 3. Tables can hurt search engine optimization 4. Tables.

Slides:



Advertisements
Similar presentations
Accessibility and WHO's web site Images courtesy of Flickr.
Advertisements

Statistics Review and Design Implications [TEMPLATE]
5 REASONS TABLES FOR LAYOUTS ARE BAD By Donna Naumann and Keniquea Mitchell 1. Time Consuming 2. Tables are often used to display tabular data 3. Accessibility.
Introduction to HTML & CSS
Intro To Cascading Style Sheets By Mario Yannakakis.
CSS: Separating Design and Content Kevin Campbell Duke University/Grouchyboy.com.
Website e-portfolio. What is an e-portfolio? An electronic portfolio, also known as an e-portfolio or digital portfolio, is a collection of electronic.
HCI 201 Week 6 Client Side Image Maps Introduction to CSS.
Chapter 8 Designing with Cascading Style Sheets. Chapter 8 Topics Building three different types of complete Web pages using CSS: Build a style sheet.
Let me control over my pages: Tables, Frames, and CSS.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
STANFORD UNIVERSITY INFORMATION TECHNOLOGY SERVICES Technology Training Services, January 2011 Web.
Planning and Designing a Website Session 8. Designing a Website Like all technical artefacts a website needs to be carefully planned and designed to be.
1/12. 2/12 Who is this Lawrence guy? Why am I here? Why is effective web design important? :: See whySee why We will discuss: General Suggestions User.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.
FLUID IMAGES Being friendly to computers and mobiles, don’t discriminate.
Docs, Spreadsheets, & Presentations. What Do YOU Know???
Basic Web Design. Technology is a tool  FIRST, understand how people actually interact with each other and with the information in their lives, in all.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
KNOWLEDGE DATABASE Topics inside  Document sharing  Event marketing  Web content.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Different ways to implement CSS. There are four different ways to use CSS in your web pages: – Inline CSS – Embedded CSS/Internal CSS – Linked CSS/External.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
 a style language that defines layout & appearance of HTML documents  CSS covers fonts, colours, margins, lines, height, width, background images and.
Layouts with CSS Web Design – Section 4-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Class 3 – Creating Lists In this lesson, you will learn to use HTML to organize your text into lists.
The Characteristics of CSS
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.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
IDs versus Classes Naming Your Tags for Maximum Functionality.
Creating Styles and Style Sheets.  CSS styles don’t communicate in nice clear English, they have their own language.  P { color: red; font-size: 1.5.
 cascade Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase.
Essentials of HTML Class 4 Instructor: Jeanne Hart
SHAREPOINT BRANDING SHAREPOINT PAKISTAN USER GROUP – FEB 2012.
Just the Facts, Maam.  How to create a basic page  How to add a table, picture, link, text and YouTube clip.  How to upload it all.
Planning your site/organization on the Web Please use speaker notes for additional information!
Tutorial 8 Designing a Web Site with Frames. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore the uses of frames.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
MICHELLE HOR MUN YEE (LEADER) ABEL KHOR JU YI 1003K75708 SHARIFAH NUR ZOEY JACQUELINE LOW SHIH HSIN CHEAM SZEN.
The Look of the Web. CSS3 Cascading Style Sheets- Third iteration Separate page the user never sees unintentionally Used to alter appearance and visual.
Cascading Style Sheets CSS. Source W3Schools
An Industry Case Study SES – Chicago: 2006 Web 2.0.
SEO Friendly Website Building a visually stunning website is not enough to ensure any success for your online presence.
Cascading Style Sheets
Presented by Luke St Jack!.  Web browsers a type of application that are capable of translating html data from websites and other sources into a readable.
Web Design Site Structure. Site File Structure What is a wireframe?
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
Art for New Media 1 - Sketchbook: Look through past examples of the Dreamweaver Practice Gallery on the class website. Pick one that you think.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
Week 5  SEO  CSS Please Visit: to download all the PowerPoint Slides for.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
AFFORDABLE WEBSITE DESIGN SERVICES.  The different areas web designing services includes web graphic design, user interface designing, authoring and.
CSS Nick Sims.
4 Website Design Aspects That May Be Damaging Your SEO Campaign
3 Best Website Speed and Performance Checking Tools
Link Label Text Label… Click Here… Image Image Lorem Ipsum Lorem Ipsum
Course Introduction Professional Web Designing for Beginners
Fixed Positioning.
Website Design and Management Section 3 - Design
What are Cascading Stylesheets (CSS)?
Unit 4 Test CSS Test.
Web Design and Development
Computer communications
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

5 Reasons Tables for Layouts are BAD! 1. Complicated & Difficult to maintain 2. Often slow to load 3. Tables can hurt search engine optimization 4. Tables don’t always print well 5. CSS redesigns are more efficient

Reason 1 Fact: Tables are Complicated & Difficult to maintain If it is not data that could be managed on a spreadsheet, images or graphs will be difficult to upkeep. Resource webdesign.about.com/od/layout/a/aa1111oza.htm

Table used for graph will be difficult to maintain.

Reason 2 Fact: Tables are often slow to load Resourcehttp://

Here, a screenshot of a of a site using tables to load images is taken before the images loaded.

Reason 3 Fact: Tables can hurt search engine optimization Data inside of tables can be considered less important than data of other sites. Reference extracting-table-data-on-the-web/

Information in tables will not be given priority by search engine spiders. html

Reason 4 Fact: Tables don’t always print well Tables can be too wide to print, to make tables print, browsers will cut tables off and print sections below. Reference a.htm

Reason 5 Fact: CSS redesigns are more efficient Redesigning a website using tables is significantly slower than redesigning a website using CSS. Reference superior-to-tables-in-website-design/

Example blogs/

One of NY Times worst rated sites

Summary There are better ways to layout images than tables, for example, CSS. CSS layouts for images will load faster. Less priority is given to data if it is inside a table. User experience may be poor if they find it difficult to print your information as it appears on page. When using external CSS style sheets, it is much easier to maintain visual consistency throughout a website.