Thinking about good Webdesign

Slides:

Advertisements

Similar presentations

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

Advertisements

Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.

1Philipp Rütsche Thinking about good Webdesign Philipp Rütsche Web Office ETH Zürich.

M I S Dr. Ernst-Gerd vom Kolke 1 Web Design - Introduction n Design for printed and electronic information isn’t very different n Special aspects for web.

DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.

Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,

Mass Communications Web Design Jill Andes Computer Applications Comm. 115.

Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.

Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.

IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.

Search Engine Optimization March 23, 2011 Google Search Engine Optimization Starter Guide.

THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.

Web Design Part 2 Page Size, Screen Layout and Content.

Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.

Chapter 3. Table have many uses in a HTML design but are mostly used for the organization of your web site. Tables also give vertical and horizontal structure.

Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.

Creating a Simple Page: HTML Overview

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.

Planning an Accessible Website: Beyond Alt Tags Stephanie M. Randolph School of Health, Physical Education, and Recreation Indiana University.

Developing A Website. Reminder 1 You want your website to be _______? 1)Artistic 2)Easy to use 3)Interactive 4)Multimedia-driven.

Web-designWeb-design. Web design What is it? Web-design features Before…

The Internet Writer’s Handbook 2/e Web Accessibility Writing for the Web.

Creating Web Sites An introduction to the basics.

Web Accessiblity Carol Gordon SIU Medical Library.

Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.

E-commerce usability guide provides guidelines and advice for implementing easy to use e-commerce websites. It focuses on online catalog/selling functionality.

1 © Netskills Quality Internet Training, University of Newcastle Web Page Design © Netskills, Quality Internet Training University.

Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.

HTML and XML Behind Web Authoring Tools. 2 Objectives Introduce HTML Learn HTML Step by step Introduce XML.

An Introduction To Websites With a little of help from “WebPages That Suck.

Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.

HTML Authoring. Design  A good website starts its life in the design stage Layout, Color, Sound, Content, Functionality and Maintainability aspects are.

SEO techniques & Mastering Google Adwords By Ganesh.S

Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.

INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.

Design Principles for the Web Lavanya Koppaka. Why follow design principles? Structure the information being presented Increase the readability Ease of.

ADA Americans with Disabilities Act. Many people with disabilities are unable to access information on websites because of a variety of barriers that.

Introduction to Web Page Design. General Design Tips.

Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.

Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.

Adobe Certified Associate Objectives 1 Setting Project Requirements.

Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.

Accessibility : Designing the Interface and Navigation The Non-Designer’s Web Book Chapter 7 Robin Williams and John Tollett Presented by Sherie Loika.

Web Page Concept and Design :

Elements of Website Design. Homepage ● first page of the website ● website title ● general introduction ● authors or creators information ● date updated.

Content Administration 08/19/13 & 08/20/13.

?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.

3/30/15.  Who is Tim Berners-Lee? 1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure.

Bian Chong (Brian), KHO Supervisor: Linda McIver Second Reader: Jon McCormack.

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.

Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.

Web Site Development - Process of planning and creating a website.

Web Design Tip and Tricks. Vision and Purpose Why do you want a website? Why do you want a website? A website is always under construction, is flexible.

WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.

Learning Aim A.  Websites are constructed on many different features.  It can be useful to think about these when designing your own websites.

Developed with material from W3C Web Accessibility Initiative (WAI) IMPORTANT: Instructions Please read carefully the Instructions for.

By Vicky Vickers Summarized by Mr. Parslow Webpage Design.

Web Page Elements Writing For the Web

These standards will serve us well in any technical communication job.

Introduction to Web Accessibility

Web development with SharePoint, HTML & CSS

Step 1: Design for a Computer Medium

Term Project Evaluations Guiding Principles Summary

Creating a Successful Web Presence

Fixed Positioning.

A01 DESIGN To be completed Your proposal  Your House style 

LO4 - Be Able to Update Websites to Meet Business Needs

5.00 Apply procedures to organize content by using Dreamweaver. (22%)

Presentation transcript:

Thinking about good Webdesign Philipp Rütsche Web Office ETH Zürich

Overview Principles and problems Layout and content Navigation and orientation The ETH web: outlook

Common Principles (1) Form follows function As simple as possible Avoid meaningless stuff

Common Principles (2) Accessibility (http://www.w3.org/WAI/) Browser independency No technical gimmicks (plug-ins: Shockwave, Java, ...)

Known Problems Bandwith Different browsers Frames Excessive use of graphics and multimedia The author!

Layout and Content The content is that counts Don’t loose readers due to old information Layout and design structures content It supports navigation and orientation

Ask Questions Don’t design «headless» What is the audience? What are their interests? What can I offer? What is a useful structure?

The Homepage Fast, practical, attractive Not more than 7 categories Who, when, feedback, help, (search) Present the services and structure of your organisation

Help, where am I? (1) Users always have to know, where they are Clear and evident structure Table of contents, site map Horizontal and vertical navigation

Help, where am I? (2) Header Footer ETH logo Logo of departement/institute Caption, subtitles Footer Navigation bar Responsible Last update

Some Rules Correct coding! No physical or absolute formatting Don’t missuse structure elements for layout purposes (UL, DL, BLOCKQUOTE) No blinking or scrolling text <TITLE>, meta-tags (Dublin core) Use comments

Validate your Site! W3C sets the standards Correct HTML HTML 4.0 and 3.2 http://www.w3c.org/MarkUp/ Correct HTML Watch Web Office Tools http://www.weboffice.ethz.ch/tools/ Valid links (including <TARGET>)

The Future – «my Vision» My wish: only websites that meet this criteria Rising quality on the ETH web (web-policy) A webdesign guide (in process) A style guide for the ETHZ (CD, CI) A new (and improved) ETH homepage