Course Hero Logo

Topic 3 Considerations for Web Designers.pdf - C HAPT E R...

Course Hero uses AI to attempt to automatically extract content from documents to surface to you and others so you can study better, e.g., in search results, to enrich docs, and more. This preview shows page 1 - 3 out of 11 pages.

35IN THIS CHAPTERThe web on mobile devicesThe benefits of web standardsProgressive enhancementResponsive Web DesignAccessibilitySite performanceAs the web matures and the number of devices we access it from increasesexponentially, our jobs as web designers and developers get significantlymore complicated. Frankly, there’s a lot more going on out there than I canfit in this book. In the chapters that follow, I will focus on the basic buildingblocks of web design—HTML elements, CSS styles, a taste of JavaScript, andweb image production—that will give you a solid foundation for the furtherdevelopment of your skills.Before we get to the nuts and bolts, I want to introduce some Big Conceptsthat every web designer needs to know. We’ll look at ideas and concerns thatinform our decisions and contribute to the contemporary web environment.I’ll be referring back to the terminology introduced here frequently.The heart of the matter is that as web designers, we never know exactlyhow the pages we create will be viewed. We don’t know which of the dozensof browsers might be used, whether it is on a desktop computer or some-thing more portable, how large the browser window will be, what fonts areinstalled, whether functionality such as JavaScript is enabled, how fast theinternet connection is, whether the pages are being read by a screen reader,and so on. The Big Concepts in this chapter are primarily reactions to andmethods for coping with the inescapable element of the Unknown in ourmedium. They include the following:• The multitude of devices• Web standards• Progressive enhancement• Responsive Web Design• Accessibility• Site performanceSOME BIGCONCEPTS YOUNEED TO KNOW3CHAPTER
Part I. Getting StartedA Multitude of Devices36Because we’re just getting started, I will keep the descriptions brief and fairlynon-technical. My goal is that you have a basic understanding of what Imean by terms like “progressive enhancement” when you encounter them inlessons later. Many excellent articles and books have been written on each ofthese topics and their related production techniques, and I’ll provide pointersto resources for further reading.A MULTITUDE OF DEVICESUntil 2007, we could be relatively certain that our users were visiting oursites while sitting at their desks, looking at a large monitor, using a speedyinternet connection. We had all more or less settled on 960 pixels as a goodwidth for a web page based on the most common monitor size. Back then,our biggest concern was dealing with the dozen or so desktop browsers andjumping through a few extra hoops to support quirky old versions of InternetExplorer. And we thought we had it rough!Although you could access web pages and web content on mobile phonesprior to 2007, the introduction of the iPhone and Android smartphones aswell as faster networks heralded a huge shift in how, when, and where we doour web surfing (particularly in the United States, which lagged behind Asiaand the EU in mobile technology). Since then, we’ve seen the introduction ofphones and tablets of all different dimensions, as well as web browsers onTVs, gaming systems, and other devices. And the diversity is only going toincrease. I think mobile web design expert Brad Frost sums it up nicely in hisillustrations inFIGURE 3-1.

Upload your study docs or become a

Course Hero member to access this document

Upload your study docs or become a

Course Hero member to access this document

End of preview. Want to read all 11 pages?

Upload your study docs or become a

Course Hero member to access this document

Term
Spring
Professor
N/A
Tags
Web Design, World Wide Web, Web browser

Newly uploaded documents

Show More

Newly uploaded documents

Show More

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture