Web design. print The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate.

Slides:



Advertisements
Similar presentations
HAML/SASS and tenplate building clean semantic sites for less.
Advertisements

RESPONSIVE AND MOBILE DESIGN BY: CHRIS PASQUARETTE APRIL, 2013.
Mobile for UCL WebNet, 3 December 2012 Dan Jackson, Senior Web Architect.
BY MAULIK PATEL CED, GPERI Computing Architecture.
XHTML Basics. What is XHTML? XHTML is newer than the old HTML XHTML has stricter rules and does not allow some elements formerly used in HTML One benefit.
Interface Design 2 Week 10. Interface Design 2 :: Week 10 :: Calendar.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
October 16, 2007HighEdWebDev2007 Single Source Website for Full Spectrum Access Rick Ells University of Washington
Responsive Web Design Sheri German, Instructor Montgomery College.
Being Responsibly Responsive Jason
What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.
Lloyd-Jamie Bennett – P Stylianos Michael – P
* The basic components of a web site are: * Content – information displayed or accepted from users * Static – content that doesn’t change for different.
Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.
Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
Responsive Web Design, Discoverability, and Mobile Challenge
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – February 2013.
Kathy E. Responsive Design and Twitter Bootstrap.
DESIGNING FOR MOBILE Lunch & Learn Series | February 20, 2014.
And Mobile Web Browsers
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.
Kurzweil 3000 A new form of assistive technology coming your way!
Delivering Library Resources and Services to Mobile Users The Library on the Small Screen Cynthia Ramlo User Experience Designer User Experience and Digital.
Web Browsers And Mobile Web Browsers. Guiding Questions What is a mobile Web browser? Why do Web pages look differently on different Web browsers? What.
Chapter 2 Web Site Design Principles
Developer TECH REFRESH 15 Junho 2015 #pttechrefres h Web Going Foward.
Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web.
CIS 285 Winter Quarter 2005 Robinson Web Design CIS 285 January 2005.
Web Standards Web Design – Sec 2-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Adaptable web sites Joni Korpi 01/20. Definition A page, whose layout – and possibly content – changes according to the devices size. 02/20.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
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.
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Webview and Web services. Web Apps You can make your web content available to users in two ways in a traditional web browser in an Android application,
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
Responsive (Mobile) Design What is this? Why Should You Care?
Monday, 18-March-2013 Session workout Presented By: Pikon Roy Karmakar.
Introduction to the World Wide Web & Internet CIS 101.
Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016.
STYLING WITH THEMES Active server pages (ASP.NET) 1 Chapter-5.
Mobile and SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 The Design Dilemma.
RESPONSIVE DESIGN TRADITIONAL DESIGN presents…. Source: - Google. Google Plugin, n.d. Web. - Lewis, Fiona. "The Blog Structure vs Traditional Web Design."
 The web is referred to as a “massive collection of web pages stored on millions of computers across the world that are linked by the Internet” (Chowdhury,
Web Accessibility. Why accessibility? "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
Future-friendly web the web logo banner text WEB.
And Mobile Web Browsers
Chapter 2 Web Site Design Principles
Responsive Design and Twitter Bootstrap
Responsive Web Design (RWD)
CS 321: Human-Computer Interaction Design
Web Browsers & Mobile Web Browsers.
RESPONSIVE WEB DESIGN.
Objective % Explain concepts used to create websites.
Making Your Site Mobile-Ready
Responsive Web Design (RWD)
Responsive Web Design (RWD)
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Responsive Web Done Responsibly
Chapter 2 Web Site Design Principles
Objective Explain concepts used to create websites.
And Mobile Web Browsers
And Mobile Web Browsers
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

web design

print

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. —Joseph Muller-Brockman

Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life. —Jan Tschichold

Grid System + The Page order constraint control

web

control

Table Layout The Browser order constraint control +

The Browser no control

speed no control capability size

640 x x x 768 fixed

flexible

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. —John Allsopp A Dao of Web Design

WYSIWYG

It’s high time we had a grown up User Interface design program, one that understands the nature of the web and the parameters we work under. —Jason Santa Maria Mucking Up the Fireworks

One of the main reasons why many people cling to the expectation that a web design should look the same across every browser is that one of the first things that designers show them is a carefully crafted static design made in Photoshop or Fireworks. —Andy Clarke Time to stop showing clients static design visuals

content presentation behaviour

CSS hasn’t revolutionised web design. The reason lies not with the technology (which is revolutionary), but with the designers using it. Most designers have simply swapped the old technology (tables and font tags) for the new technology, without fully exploring what’s so completely new. —Jeremy Keith The Unpushed Envelope

Devices really should be treated as a spectrum (based on capabilities) rather than put into a mobile vs. desktop bin. —Joaquin Lippincott, Stop! You are doing mobile wrong!

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. —Ethan Marcotte Responsive Web Design

speed capability size one web

web silos versus

The primary design principle underlying the Web’s usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality—from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. —Tim Berners-Lee Long Live the Web

one web happy birthday