By Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland
Innovative enhancement is an method of net improvement that goals to bring the very best event to the widest attainable viewers, and simplifies coding and trying out in addition. no matter if clients are viewing your websites on an iPhone, the newest and maximum high-end approach, or perhaps listening to them on a screen-reader, their adventure may be effortless to appreciate and use, and as fully-featured and useful as attainable. Designing with innovative Enhancement will convey you ways. It’s either a pragmatic advisor to figuring out the foundations and advantages of revolutionary enhancement, and an in depth exploration of examples that would train you—whether you’re a clothier or a developer—how, the place, and whilst to enforce the explicit coding and scripting ways that include revolutionary enhancement. In this ebook, you’ll examine: Why universal coding techniques depart clients in the back of, and the way revolutionary enhancement is a extra inclusive and available alternative How to research complicated interface designs, see the underlying semantic HTML event that would paintings far and wide, and layer on complex improvements safely A specified browser features checking out suite that is helping bring improvements simply to units that may deal with themReal-world top practices for coding HTML, CSS, and JavaScript to paintings with innovative enhancement, and instances the place forward-looking HTML5 and CSS3 thoughts might be utilized successfully todayHow to think about accessibility beneficial properties like WAI-ARIA and keyboard help to make sure common entry Detailed strategies to rework semantic HTML into interactive parts like sliders, tabs, tree controls, and charts, besides downloadable jQuery-based widgets to use at once on your tasks
Read Online or Download Designing with Progressive Enhancement: Building the Web that Works for Everyone PDF
Similar web design books
The best way to version company approaches in an SOA-compliant method utilizing BPMN, translate them into BPEL and execute them at the SOA platform. a pragmatic advisor with real-world examples illustrating all key ideas. This e-book is for CIOs, executives, SOA venture managers, enterprise strategy analysts, BPM and SOA architects, who're liable for bettering the potency of commercial strategies via IT, or for designing SOA.
Apache Struts 2 Web Application Development
This e-book takes a transparent process, targeting one subject in step with bankruptcy, yet interspersing different concerns within the mainline textual content and in bankruptcy detours. Taking a realistic method, it discusses agile internet improvement utilizing Struts 2, with lots of examples for larger realizing. This booklet is for Java builders who're attracted to constructing internet functions utilizing Struts.
Extra resources for Designing with Progressive Enhancement: Building the Web that Works for Everyone
Sample text
Let’s take a look at the target news site design: Figure 2-2 news website target design with interactive features The target design incorporates a number of interactive components, including a prominent rotating feature block, a list of story links with several filtering options, and a custom stock-quote search tool. ch a Pt er t wo: Prog r essive e nhanc e me nt in action: the x-ray Pe rs Pective 19 evaluating content organization and naming First, we’ll evaluate the final design to understand how content is grouped, and to identify any components with advanced features that will need to be mapped to simple standard HTML.
C Are there parts of the interface that may be prohibitively bandwidth-intensive or difficult to use in the basic experience, constructed only with standard HTML? If so, we can either provide simpler components in the foundation markup, or encourage basic users to accomplish a goal through an alternate, offline method. 14 Designing wit h Prog r essive en h a n cemen t: Buil D i ng the w e B t h at wo rks fo r e ve ryo ne Finally, we do a detailed analysis of each individual component on the page to identify its purpose and determine the basic HTML elements that would best support it.
For example, a data grid, search results page, or product description should be populated with data in the foundation markup, not structured as an empty div that is populated by Ajax after the page loads. Any filtering, paging, or navigation to update page data should be built with standard HTML forms and links to make sure the navigation works without scripting enabled. This seemingly simple rule is frequently overlooked—presumably in the name of speed or responsiveness—but as we saw in the examples in this book’s introduction, neglecting to serve necessary content with the page can result in unacceptably poor experiences for users on devices without complete JavaScript or CSS capabilities.