THE RESPONSIVE WEB: A ‘mobile-first’ guide to creating websites effective for all devices – #bookreview

The Responsive Web

Matthew Carver

(Manning – paperback)

While devices for viewing websites keep getting smaller–web-enabled watches are a recent example–the challenges get bigger and tougher for website designers and developers. How do you create websites that effectively adjust to the size of the devices where they are being viewed, while also delivering essential information and links to the viewers?

“Responsive web design,” Matthew Carver writes in his excellent new book, “is a technique of designing websites that scale for various browsers, including mobile, tablet, and desktop. It’s made possible through CSS3 Media queries and offers developers the opportunity to design a site once for multiple devices. While the technique is seemingly simple, the practice itself involves several challenges.”

Carver’s book, The Responsive Web, goes well beyond simply showing and explaining a few web page templates. With clear text and excellent illustrations, the author offers numerous practical techniques and tips, and he provides the reasoning behind their importance, without wandering too deeply into web-design and user-experience theory.

This superior how-to book reflects Carver’s real-world experience as “an early adopter of responsive web design.” As a front-end designer, web developer and consultant, his clients have included such notables as American Airlines, the Dallas Morning News, Chobani, Home Depot, and Google.

The Responsive Web is divided into three parts, with a total of nine chapters.

Starting at Part One: The Responsive Way, Carver definitely does not dawdle. In the very first chapter, we are offered “all the basic information you need to get started with responsive web design.” Chapter 2, meanwhile, covers a key concept in Carver’s approach: “designing for mobile first” when creating responsive websites.

Part Two: Designing for the Responsive Web has four chapters built around “what goes into responsive web design from the visual designer’s and user-experience (UX) designer’s perspectives,” Carver writes, “but don’t think this information won’t apply to developers. There’s important stuff in here for everyone, and as this book teaches, web design requires collaboration.”

In Part Three: Expanding the Design with Code, the three final chapters cover some of the grittier details of responsive web design, including creating an effective page with HTML5 and CSS3, working with graphics, and using “progressive enhancement.” Carver notes: “With progressive enhancement you can create websites so that they function well in a variety of platforms, each with their own limitations and specifications.” And finally, he does not skip “testing and optimization.” The book’s final chapter is devoted to “the nitty gritty of optimizing your website for performance on every screen.”

In an intriguing appendix, Carver also discusses the processes and possibilities of introducing certain degrees of context awareness to websites. “What if, instead of resizing the design to adapt to the user’s device, you could also format parts of the site based on factors like location, time of day, the user’s history on the site, or the user’s activity level,” he points out. “Theoretically, all of this data is accessible to the design of a page and could be used to greatly enhance the user’s experience.”

Bottom line,  this is a very timely and useful guide for those who work with websites, as well as for those who manage web designers and developers.

Si Dunn

 

Adobe Edge Animate – Rocky Nook’s elegant new software how-to guide – #webdesign #bookreview

adobe_edge_animate

Adobe Edge Animate

Using Web Standards to Create Interactive Websites

Simon Widjaja
(Rocky Nook – paperback, Kindle)

Simon Widjaja’s new book is both elegant and practical. It is elegantly structured and illustrated, and it is practical in its approach to showing how to use Adobe Edge Animate.

That software package, Widjaja says, “is a multimedia authoring tool based on open web standards….Compositions created with Edge Animate can be used in browser applications and apps on mobile devices, but also in digital publications created with Adobe Digital Publishing Suite or Apple iBooks Author.”

Widjaja is an experienced Edge developer, as well as programmer, author, IT trainer, and Flash developer.

Not only does his book show how to design and create animations. He also demonstrates “solutions that go beyond the application’s standard functions,” including “integration into external systems and extensibility with additional frameworks and custom components.”

The Edge Animate runtime, he notes, “is largely based on the popular jQuery JavaScript framework.” So external HTML and JavaScript components can be placed into Edge Animate compositions, and Edge Animate users can create their own components.

The 220-page book (translated from German by Susan Spies) is divided into seven chapters, with numbered subheadings and sub-subheadings. The chapters are:

Chapter 1: Introduction — Contains “basic information on the current status quo in web standards” and how they apply to understanding and using Edge Animate.

Chapter 2: Getting to know the authoring tool – Provides an overview of Edge Animate’s interface and its wide range of functions.

Chapter 3: Design – Shows how to use the functions for creating graphic elements, how to work with assets such as images and fonts, and how to “create more complex layouts.”

Chapter 4: Animation – Introduces the Timeline and the Pin and explains “how to animate  your compositions using keyframes.”

Chapter 5: Interaction – Focuses on Edge Animate’s API and “how to implement various actions.”

Chapter 6: Publication –Explores the “the various publishing options available…in Edge Animate and explains the necessary preparations…for publishing your composition on the web or within a digital publication. Also looks at “how your creative work can be integrated into a content management system.”

Chapter 7: Advanced Tips – Covers “a range of extensions you will need to make your projects perform well on the web.”

Widjaja’s Adobe Edge Animate seems an excellent fit for Rocky Nook’s stated 2014 mission, which is “to publish books on cutting-edge developments in photography, imaging, and technology that really matter, and to focus on practical usage that will enhance capabilities. Our ultimate goal,” the company says, “is to foster image quality.”

With this book and Adobe Edge Animate, you definitely can learn how to boost the quality of images, using effective animated presentations on the web, in apps, and in other publications.

One e-book caution: This book “has complex layouts and has been optimized for reading on devices with larger screens.” In other words, do not try to read it on a phone or small tablet.

Si Dunn

The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript – #bookreview

The Modern Web
Multi-Device Web Development with HTML5, CSS3, and JavaScript
Peter Gasston
(No Starch Press – Kindle, paperback)

After a quick first glance, you might look right past this book. You might assume its title, “The Modern Web,” simply introduces some kind of heavily footnoted, academic study of the Internet.

Not so, Web breath. In this case, it’s the subtitle that should grab your attention.

Whether you hope to go into web development, or you’re already there, Peter Gasston’s new book can help you get an improved grasp on three important, device-agnostic tools that will be essential to your work and career development. They are: HTML5, CSS3, and JavaScript, that not-so-simple programming language that many new web specialists often try to avoid learning. (That’s because, typically, it’s easier, more fun and a bit less cryptic to work with HTML5 and CSS3.)

Also, Gasston notes, there have been big explosions in the number of libraries and frameworks that use JavaScript, further clouding a developer’s ability to know which ones he or she should learn next. (The author limits his coverage to four: jQuery, YepNope, Modernizr, and Mustache.)

Gasston’s well-written book zeroes in on the three “web technologies that can be used anywhere, from open websites to device-specific web apps.” And on all sorts of devices, ranging from tiny phones to tablet computers to wall-covering HDTVs.

And his teaching aim is to show you “modern coding methods and techniques that you can use to build websites across multiple devices or that are tailored to the single device class you’re targeting.”

By the way, “websites” is simply a shorthand term the author uses “to avoid repetition. The features you’ll learn from this book are relevant to websites, web applications, [and] packaged HTML hybrid applications–in short, anything that can use HTML, CSS, and JavaScript.”

Gasston also wants you to learn that “fast” is the main thing that matters to those who will use your site. “Your site needs to be fast–and feel fast–regardless of the device it’s being displayed on,” he emphasizes. “And fast means not only technical performance (which is incredibly important) but also the responsiveness of the interface and how easily users can navigate the site and find what they need to complete the task that brought them to you in the first place.”

His 243-page book contains many short, useful code examples and illustrations, and is excellent for developers who have at least a little bit of experience with HTML5, CSS3, and JavaScript but aren’t sure where and how to focus their energies and attention for the rapidly changing career road ahead.

The Modern Web offers a well-organized introduction, plus 11 chapters:

  1. The Web Platform
  2. Structure and Semantics
  3. Device Responsive CSS
  4. New Approaches to CSS Layouts
  5. Modern JavaScript
  6. Device APIs
  7. Images and Graphics
  8. New Forms
  9. Multimedia
  10. Web Apps
  11. The Future

There also are two appendices: Browser Support as of March 2013 and Further Reading.

Peter Gasston has been a web developer for more than 12 years, and his previous book is The Book of CSS3.

He notes that “[t]he Web is constantly evolving, and book publishing means taking just a single snapshot of a moment. Some things will change; some will wither and be removed. I’ve tried to mitigate this by covering only technologies that are based on open standards rather than vendor-specific ones and that already have some level of implementation in browsers.”

He urges developers to stay alert to changing Web standards and to “be curious, be playful, keep on top of it all. He stresses: “There’s never been a more exciting time to work in web development, but you’ll need to put in an extra shift to really take advantage of it.”

Si Dunn

Killer UX Design – How to create compelling, user-centered interfaces – #bookreview

Killer UX Design
Jodie Moule
(SitePoint – paperback, Kindle)

The overused term “killer app” tends to kill my curiosity about books with “killer” in the title.

Still,  “killer” title aside, Killer UX Design deserves some attention, particularly if you are struggling to create a better user experience (UX) for products, websites, services, processes, or systems. The eight chapters in this 266-page book provide a well-written “introduction to user experience design.”

The focus, in UX design, is on “understanding the behavior of the eventual users of a product, service, or system. It then seeks to explore the optimal interaction of these elements, in order to design experiences that are memorable, enjoyable, and a little bit ‘wow’,” the author says.

She is a psychologist who co-founded and directs Symplicit, an “experience design consultancy” in Australia. “With the digital and physical worlds merging more than ever before,” she says, “it is vital to understand how technology can enhance the human experience, and not cause frustration or angst at every touchpoint.”

You won’t find JavaScript functions, HTML 5 code, or other programming examples in this book, even though software engineering increasingly is a key factor in UX design. Instead, the tools of choice during initial design phases are: Post-It Notes, index cards, sheets of paper, tape, glue, hand-drawn diagrams and sketches, plus clippings from newspapers, magazines and other materials.

And, you likely will spend time talking with other members of your UX design team, plus potential users of your product, service, or system.

Some of the chapters also deal with prototyping, testing, re-testing and tweaking, and how to modify a design based on what you learn after a product, service, or system has been launched.

A key strength of Killer UX Design is how it  illustrates and explains the real-life — and seldom simple — processes and steps necessary to design an app that is both useful and easy to use.

Si Dunn

Adobe Edge Animate: The Missing Manual – #bookreview

Adobe Edge Animate: The Missing Manual
Chris Grover
(O’Reilly, paperbackKindle)

Chris Grover’s well-written and updated new book shows you how to build animated HTML 5 graphics for the iPhone, the iPad, and the Web, using familiar Adobe features. By the sixth page of the first chapter, you are using the software to begin creating your first animation.

The previous edition of this book, covering Adobe Edge Animate Preview 7, was released just two months ago, shortly before Adobe released the 1.0 commercial version of its Edge Animate product. This new edition has been updated and expanded to cover the commercial version.

Prior to the 1.0 release, seven Preview versions of Adobe Edge Animate had been issued as free downloads, and user feedback was gathered so the product could be enhanced and expanded.

Here is what I reported about this book’s Preview 7 edition in an  October, 2012, review:

First, this book can help you get started with the 1.0 commercial version of Adobe Edge Animate. Second, O’Reilly will soon bring out an Adobe Edge Animate “Missing Manual” that covers the new commercial release. And, third, sources at O’Reilly tell me that readers who purchase this Preview 7 edition of Chris Grover’s book will get access to “the e-book version of Adobe Edge Animate the 1.0 version and all of its updates.”

The new edition of Adobe Edge Animate: The Missing Manual has ten chapters organized into five parts, even though page xiv of the paperback version states that the book is “divided into three parts.” (It then lists four parts, instead of  five, or three).  The new part in this edition is titled “Publishing Animate Compositions” and focuses on “Publishing Responsive Web Pages” that will look good “in web browsers of all shapes and sizes….” Here are the new edition’s parts and chapters:

Part One:Working with the Stage

  • Chapter 1: Introducing Adobe Edge Animate
  • Chapter 2: Creating and Animating Art
  • Chapter 3: Adding and Formatting Text

Part Two: Animation with Edge Animate

  • Chapter 4: Learning Timeline and Transition Techniques
  • Chapter 5: Triggering Actions
  • Chapter 6: Working Smart with Symbols

Part Three: Edge Animate with HTML 5 and JavaScript

  • Chapter 7: Working with Basic HTML and CSS
  • Chapter 8: Controlling Your Animations with JavaScript and jQuery
  • Chapter 9: Helpful JavaScript Tricks

Part Four: Publishing Your Composition

  • Chapter 10: Publishing Responsive Web Pages

Part Five: Appendixes

  • Appendix A: Installation and Help
  • Appendix B: Menu by Menu

Where keystrokes are appropriate, Chris Grover lists both and does not make you have to translate between systems, as some how-to manuals do.

“Animate works almost precisely the same in its Macintosh and Windows versions,” he assures. “Every button in every dialog box is exactly the same; the software response to ever command is identical. In this book, the illustrations have been given even-handed treatment, rotating between the two operating systems where Animate is at home (Windows 7 and Mac OS X).”

Si Dunn

For more information: (O’Reilly, paperback, Kindle)

Specificity, Selectors, and the Cascade: Applying CSS3 to Documents – #bookreview

Selectors, Specificity, and the Cascade: Applying CSS3 to Documents
Eric A. Meyer
(O’Reilly, paperbackKindle)

If you know some basic CSS but wonder how the “cascade” part of Cascading Style Sheets works, here is a useful guide.

Actually, this is a 73-page, two-chapter excerpt from the upcoming fourth edition of Eric A. Meyer’s CSS: The Definitive Guide. If you are learning CSS, dealing with CSS issues, or moving to CSS3, this small book can provide you with numerous how-to examples to apply to right now.

The first chapter focuses on “Selectors.” Selectors are not clearly defined at the beginning. But they generally are described elsewhere as “patterns” that can be used to select the element or elements you want to style in a document, such as headings of a certain font sizes or paragraphs with text in specific colors.

Fortunately, the first chapter’s code examples, descriptive paragraphs, and illustrations quickly clarify how to put selectors to work in a document. “[D]ocument structure and CSS selectors allow you to apply a wide variety of style to elements,” the author notes.

The second chapter’s topics are “Specificity and the Cascade.” And the initial technical definitions get a bit dense. For example: “When determining which values should apply to an element, a user agent must consider not only inheritance but also the specificity of the declaration, as well as the origin of the declarations themselves. The process of consideration is what’s known as the cascade.”

Uh, okay.

Once again, fortunately, the second chapter’s code samples, illustrations, and follow-up paragraphs quickly clarify what is going on. And they enable you to learn by doing, seeing the outcome, and applying what you’ve learned to documents of your own.

Si Dunn

Head First HTML and CSS, 2nd Edition – An effective and entertaining guide now updated for HTML5 – #bookreview

Head First HTML and CSS, 2nd Edition
Elisabeth Robson and Eric Freeman
(O’Reilly,
paperback)

As a techie, I am admittedly a bit mediocre. I do know most of the critical differences between a couch and CouchDB. But I don’t speak fluent JavaScript or Klingon. I seldom eat regular expressions for breakfast. And I never brush my teeth with JSON or even SQLite.

In other words, I have to look up stuff in books, mess around with code examples, and try to puzzle out why I just wrote a function that completely blew up when I called it.

The clearer the how-to instructions and code examples, the better for my time-battered brain.

So, here is no surprise: I love the “Head First” series from O’Reilly. Its books introduce topics in amusing, easy-to-handle bites (and bytes) that are well illustrated and presented in orderly progressions. Typically, you create a simple project and spend the rest of the text learning how to add functions or features to it and improve its appearance and overall usability.

When I am in a mood to play for a few minutes or an hour or so, I enjoy opening a “Head First” volume. I can quickly teach my old-dog-self new tricks by working through a few of the examples and lighthearted explanations.

First published in 2005, Head First HTML and CSS has now been updated to cover HTML5. If you are a newcomer wanting to work with web pages or expand some basic web-page knowledge, Elisabeth Robson’s and Eric Freeman’s new 2nd edition is an excellent guide. It shows, step by step, how to create standards-based web pages using HTML5 and cascading style sheets (CSS).

Do not be intimidated by the book’s size (723 pages) and heft (nearly four pounds).  It will get you off to a fast start learning basic Hyper Text Markup Language (HTML). Then it introduces each new topic in small steps, with plenty of screenshots, diagrams, notes, tips, exercises, and Q&A sessions to help you stay on track.

Here is how the book is organized:

  1. The Language of the Web: getting to know html
  2. Meet the “HT” in HTML: going further, with hypertext
  3. Web Page Construction: building blocks
  4. A Trip to Webville: getting connected
  5. Meeting the Media: adding images to your pages
  6. Serious HTML: standards and all that jazz
  7. Adding a Little Style: getting started with CSS
  8. Expanding your Vocabulary: styling with fonts and colors
  9. Getting Intimate with Elements: the box model
  10. Advanced Web Construction: divs and spans
  11. Arranging Elements: layout and positioning
  12. Modern HTML: html5 markup
  13. Getting Tabular: tables and more lists
  14. Getting Interactive: html forms

The authors introduce basic HTML before taking you into HTML5. And they deliberately advocate “a clean separation between the structure of your pages and the presentation of your pages.” They teach you “to use HTML for structure and CSS for style….” They also show you how to test your web pages using more than one browser, so you can learn how to create pages “that work well in a variety of them.”

They do not try to cover everything in their “brain-friendly guide.”  They offer Head First HTML and CSS, 2nd Edition as “a learning experience, not a reference book.” (The book’s appendix, by the way, is titled “The Top Ten Topics (We Didn’t Cover): leftovers.” It focuses on more things you might want to consider and try.)

Once the authors have tossed you in head first and helped you develop a reasonably good feel for HTML5 and CSS, then you can go look for the fancy stuff.

You will have better notions of what to do with it once you have it.

Si Dunn