1
Some Big Concepts
Content 2
1 Web on Mobile Devices 4 Responsive Web Design
2 Benefits of Web Standards 5 Accessibility
3 Progressive Enhancements 6 Site Performance
Big Concepts 3
• As the web matures and the number of devices we access it from increases
exponentially, our jobs as web designers and developers get significantly more
complicated.
• The heart of the matter is that as web designers, we never know exactly how the
pages we create will be viewed, therefore they following aspects should be
considered:
1) The multitude of devices
2) Web standards
3) Progressive enhancement
4) Responsive Web Design
5) Accessibility
6) Site performance
A Multitude of Devices 4
• The challenge of designing for all of these
devices goes beyond addressing differing
screen sizes.
• There is a world of difference between
using a site over a broadband connection
and over a slow cell network.
• Designers need to resist making
assumptions about network speed and
context based on the screen size
Sticking with the Standards 5
• A good start is to follow the standards documented by the World Wide Web
Consortium (W3C).
• Sticking with web standards is your primary tool for ensuring your site is consistent on
all standards-compliant browsers (that’s approximately 99% of browsers in current
use).
• It also helps make your content forward-compatible as web technologies and browser
capabilities evolve.
• Another benefit is that you can tell your clients that you create “standards-compliant”
sites, and they will like you more. The notion of standards compliance may seem like a
no-brainer, but it used to be that everyone, including the browser makers, played fast
and loose with HTML and scripting. The price we paid was incompatible browser
implementations and the need to create sites twice to make them work for everyone.
Progressive Enhancements 6
• Progressive enhancement is one strategy for dealing with unknown browser
capabilities. When designing with progressive enhancement, you start with a baseline
experience that makes the content or core functionality available to even the most
rudimentary browsers or assistive devices.
• Progressive enhancement is an approach that informs all aspects of page design and
production, including HTML, CSS, and JavaScript:
1) Authoring strategy: When an HTML document is written in logical order and its elements
are marked up in a meaningful way, it will be usable on the widest range of browsing
environments, including the oldest browsers, future browsers, and mobile and assistive devices.
It also ensures that search engines like Google will catalog the content correctly.
2) Styling strategy: The knowledge that browsers simply ignore properties and rules they
don’t understand gives you license to innovate without bringing older browsers to their knees.
3) Scripting strategy: There are discrepancies in how browsers handle JavaScript , and
some users opt to turn it off entirely. The first rule in progressive enhancement is to make sure
basic functionality—such as linking from page to page or accomplishing essential tasks like
data submission via forms—is intact even when JavaScript is off.
Responsive Web Design 7
• RWD is a strategy for providing appropriate layouts to devices based on the size of the
viewport (browser window). The key to Responsive Web Design is serving a single
HTML document (with one URL) to all devices, but applying different style sheets
based on the screen size.
• RWD helps with matters of layout, but it is not a solution to all mobile web design
challenges. The fact is that providing the best experiences for your users and their
chosen device may require optimizations that go beyond adjusting the look and feel.
You can better address some problems by using the server to detect the device and its
capabilities and then making decisions on what to send back.
• For some sites and services, it may be preferable to build a separate mobile site (see
the “M-dot Sites” sidebar) with a customized interface and feature set that takes
advantage of phone capabilities like geolocation. That said, although responsive
design won’t fix everything, it is an important part of the solution for delivering
satisfactory experiences on a wide variety of browsers.
Accessibility 8
• It is critical to keep in mind that people access the web in many different ways—with a
keyboard, mouse, voice commands, screen readers, Braille output, magnifiers,
joysticks, foot pedals, and so on.
• Web designers must build pages in a 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. In other words, you must design for accessibility.
• Accessible sites are also more effectively indexed by search engines such as Google.
• There are four broad categories of disabilities that affect how people interact with their
computers and the information on them:
1) Vision impairment
2) Mobility impairment
3) Auditory impairment
4) Auditory impairment
Site Performance 9
• There are many things you can do to improve the performance of your site, and they
fall under two broad categories: limiting file sizes and reducing the number of requests
to the server.
• The following list only scratches the surface for site optimization:
• Optimize images so they are the smallest file size possible without sacrificing
quality.
• Streamline HTML markup, avoiding unnecessary levels of nested elements
• Minimize HTML and CSS documents by removing extra character spaces and line
returns.
• Keep JavaScript to a minimum.
• Add scripts in such a way that they load in parallel with other page assets and don’t
block rendering.
• Don’t load unnecessary assets (such as images, scripts, or JavaScript libraries).
• Reduce the number of times the browser makes requests of the server (known as
HTTP requests).
Thank you
10
