What is Web Design Encompasses several different areas

What is Web Design Encompasses several different areas: �Graphic Design �Content Design �User Interface Design �Document Design Once called Desktop Publishing Content Strategy Content Management �Multimedia �Application Development Programming & Scripting

Designing for Users �Not just how it looks, but how it works and how it “feels” for users �Key Areas: Interaction Design (Ix. D) User Interface (UI) design, and User Experience (UX) design.

Design Examples: Wireframes

Design Examples: Site Diagram

Visual/ Graphic Design for the Web �Traditional Areas: logos, graphics, type, colors, layout, etc. Ensure consistency with the brand/message of the organization �Web Areas Layout and position on a web page Creating graphics optimized for web delivery

Visual/ Graphic Design for the Web Key Technologies: Key Software: � Image capture � Photo Editing Digital photography Image scanning GIMP Adobe Photoshop � Graphic formats GIF, SVG, JPG, PNG � Digital Image Creation: Visual Web Language: � CSS: Cascading Stylesheet Abobe Illustrator Adobe Fireworks

Web Content Management & Strategy Organizing page content Organizing website content � Layout strategy � Logical site organization � Page template design Hierarchy of pages � Site template design � Navigation design � Semantic markup Meta Data Meaningful Document Structure �Bad Example: https: //treebu. net

Core Web Languages Content Structure (HTML) 2. Content Styling (CSS) 3. Content Interaction (Java. Script) 1.

Browser vs. Server Web Browser Web Server � Current market leaders: Google’s Chrome � Current market leaders: Apache http: //httpd. apache. org/ Preferred by Web Developers Firefox Internet Information Services The legacy of Netscape Apple’s Safari Microsoft’s Edge/Internet Explorer Still around (sadly) Nginx http: //wiki. nginx. org/ Leading in mobile browsing Microsoft’s IIS GWS Google’s Web Server

Browser Wars Early Business Model: � Give your web browser to users for free � Sell your web server to companies $$$ � Web pages will work best if your server and browser are both used. � If more people use your browser, more companies will want to buy your server.

Browser Wars Rough Timeline: � In 1995 -1998 Netscape dominated early market 90% � In 2001 Microsoft wiped Netscape out of existence. 92% market share � In 2008, Firefox was the only browser seriously challenging Internet Explorer (IE) � In 2012, IE was finally overtaken by Google Chrome � Today, Apple’s Safari is the leader in the mobile browser market. Chrome is not far behind.

Browser Popularity

Browser vs. Server Web Browser Web Server � Makes http requests Asks for web pages � Responds to http requests Sends web pages � Renders web pages Converts HTML, CSS and Java. Script into displayed document. � Remembers browsing history, preferences and cookies � Processes requests Create dynamic pages Run web applications Fetch data from Databases Store session data

Development: Backend vs. Frontend: Backend: What you see on the Web Browser What happens on the Web Server � Graphic design � Processing Data � Image production � Database Programming � Interface design � Content Management Systems � User experience � Server-side Scripting � HTML markup � CSS styles � Sometimes Java. Script But really mosttimes. PHP, Python, ASP, Ruby, JSP � Sometimes Java. Script Node. js

Multimedia Unlike other documents, web pages have many layers capable of combining almost any form of media � Text & Images obviously � Audio Embedded players and files (mp 3) � Video Embedded players and fields (mp 4) � Animation Flash-driven, Java. Script, j. Query, and CSS-based � Interaction Embedded Programs & Application “Interaction” is a form of media. Very different than passively viewed video.

Internet vs. WWW Internet World Wide Web � Physical Hardware Layer � Widely-available Content Wi. Fi Routers Ethernet Switches Cable Modems Layer of Internet Web servers Email File sharing (FTP) � Key Technologies TCP/IP Protocol Packet Switching � Key Technologies HTTP Protocol URLs

Key Internet Concepts � TCP/IP: Transmission Control / Internet Protocol � Think of the Internet as earth’s network of highways and ports (sea and air) Network of Networks concept � TCP/IP establishes standards � Packet Switching: Data is broken into small packets that can be independently routed for roads and ports so people can get everywhere seamlessly. � Packet Switching means cargo can travel in small chunks to easily move through bottlenecks via different paths.

Key WWW Concepts � HTTP: Hypertext Transfer Protocol Rules for making requests and responding to requests. �URI: Uniform Resource Identifier Unique identifier for finding stuff on the WWW; Includes: URL (Location) and URN (Unique Name at Location) � Think of the WWW as everything that can be publicly accessed from the world’s highways, airport and sea ports. � Think of HTTP as the standard language used to ask for directions. � Think of URLs as street addresses and URNs as IDs for objects at particular addresses.

Internet is bigger than WWW � The Internet’s protocol (TCP/IP) can support many sub- protocols, some that are proprietary (private/secret). � Examples: Many peer-to-peer files sharing systems Specialized client-server systems (early banking systems) Content so deeply embedded in systems that it’s very hard to find (Deep Web) Content requiring access via secret non-standard browsers (Darknet)

Quick detour about Deep Web

But, the WWW matters more � The HTTP protocol standardizes requests so any web browser can access any web server. � URLs (WWW layer) makes finding and remember servers much easier than numeric IP addresses (Internet layer) � The WWW is all about accessibility via open, widely adopted standards. It’s the largest, most expandable information system ever built.

URLs � Let’s look at real examples…

History �Before designing web pages it is important to know how it all came about… History Channel – The Invention of the Internet

URL �Uniform Resource Locator The location part of the URI (Uniform Resource Identifier)

URLs/URIs can be complex �http: //en. wikipedia. org/wiki/URI_scheme

Default Files �Depends on Web Server https: //www. facebook. com/ will load https: //www. facebook. com/home. php �In general https: //www. server. com/ will load https: //www. server. com/index. html

Never know how sites we create will be viewed �We don’t know: which browser desktop computer or portable how large the browser window what fonts are installed whether Java. Script is enabled speed of Internet connection if pages being read by screen reader �Designers need to resist the urge to make assumptions about any of the above

Mobile Browsers �Sometime soon (it may have already happened), most WWW views will be using a browser on a mobile device. �Screen size and low bandwidth change everything. Optimizing graphics is important again. Responsive web page layouts

How do we handle this diversity? Standardize WWW � World Wide Web Consortium (W 3 C) Sets the standards for HTML, CSS, and Java. Script All browsers should(must) follow the standards � Web Hypertext Application Technology Working Group (WHATWG) Lead by Apple, Google, and Mozilla Firefox Established because the W 3 C is moving too slowly to adopt new technology

HTML 5 �The new standard adopted by almost all browsers Will soon be adopted by W 3 C (slowly) �“Living Standard” / Progressive Enhancement There may be no HTML 6 ever �Supports web applications HTML 5 Canvas + Java. Script

Progressive Enhancement �No browser has implemented all the standards 100% Examples: https: //html 5 test. com � http: //caniuse. com/#search=clip-path http: //bennettfeely. com/clippy/ � �Idea is to start with baseline experience for basic browsers and layer on advanced features

Responsive Web Design �Strategy for providing custom layouts to devices based on size of browser window �Think of the “conditional light box” from lab… what happened when you changed the size of the window?

Accessibility �Need to consider: Vision impairment Mobility impairment Auditory impairment Cognitive impairment �All sites benefit from these considerations, but government sites require adherence (508 compliance)

Site Performance �Mainly speed Optimize images so they are smallest size possible without sacrificing quality Minimize HTML and CSS code Keep Java. Script to a minimum Other things that we will not cover in this class �Why is this important? Google has now added site speed to its search algorithm

Basic HTML Document