Web: Big Concepts
Ch. 3
1
5/28/2016
Objectives
2
 Multitude of devices
 Web standards
 Progressive enhancement
 Responsive web design
 Accessibility
 Site performance
5/28/2016
Multitude of devices
3
5/28/2016
Internet of Things (IOT)
4
 Interactive TVs, chrome cast like devices
 Different types of tablets
 Different types of computers
 Smartwatches
 Smart virtual interfaces
 Automobiles, planes and trains
 Fridges and other programmable kitchen devices
 Smart homes (security system)
5/28/2016
Sticking with standards
5
 Good start for standards is to follow the HTML, CSS, and




JavaScript standards as documented by the World
WideWeb Consortium (W3C).
Sticking with web standards is your primary tool for
ensuring your site is as consistent as possible on all
standards-compliant browsers.
It also helps make your content forward-compatible as
web technologies and browser capabilities evolve.
Another benefit is you can tell your clients that you
create “standards-compliant” sites.
JavaScript is the scripting language that makes web
pages interactive and dynamic
5/28/2016
Progressive Enhancements
6
 Progressive enhancement is an approach that
informs all aspects of page design and production,
including HTML, CSS, and JavaScript.
 usable on the widest range of browsing
environments, including the oldest browsers, future
browsers, and mobile and assistive devices.
 A clean HTML document with its elements
accurately and thoroughly described.
 You can create layers of experience simply by taking
advantage of the way browsers parse style sheet
rules.
5/28/2016
Responsive Web design
7
 Responsive web design is a strategy for providing
custom layouts to devices based on the size of the
viewport (browser window).
 The trick to responsive web design is serving a single
HTML document to all devices, but applying
different style sheets based on the screen size in
order to provide the most optimized layout for that
device.
5/28/2016
Resizing according to device viewport
8
5/28/2016
One web for all (Accessibility)
9
 Keep in mind that people access the Web in many
different ways—with screen readers, Braille output,
magnifiers, joysticks, foot pedals, and so on.
 Web designers must build pages ina manner that
creates as few barriers as possible to getting to
information, regardless of the user’s ability and the
device used to access the Web.
 Address: Vision impairment, mobility impairment,
auditory impairment, cognitive impairment.
5/28/2016
Site performance
10
 Site performance is critical for keeping the used
engaged.
 There are many things you can do (as a web site
designer) to improve the performance of your site,
and they fall under the two broad categories of
limiting file sizes and reducing the number of
requests to the server.
 You system admin can also work on the
infrastructure to provide better response time etc.
5/28/2016
Summary
11
 We looked at various qualities you should keep in
mind when designing a web site.
 Next we look at another example from Chapter 4.
5/28/2016