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

 

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

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

Adobe Edge Animate Preview 7: The Missing Manual – #bookreview #html5 #animation

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

Chris Glover’s well-written 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 create your first animation.

The only problem is,Adobe released the 1.0 commercial version of its Edge Animate product on Sept. 24, 2012, very soon after this Preview 7 book was published.

And, for a limited time, Adobe was offering Edge Animate 1.0 free with a new membership in Adobe’s Creative Cloud.

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

Preview 7 was released about five weeks prior to the appearance of new 1.0 commercial version. And this book was created to fill a gap that was expected to remain open longer.

Here’s the good news – three items of good news, actually.

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.”

Adobe Edge Animate Preview 7: The Missing Manual has nine chapters organized into four parts:

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: 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)

Learning Web Design, 4th Edition – Beginner’s guide updated for HTML5, CSS3 & JavaScript – #bookreview

Learning Web Design, 4th Edition
Jennifer Niederst Robbins
(O’Reilly, paperback)

Eager to learn web design, but not sure where to start and what you will need? Need a steady, guiding hand as you try to figure out how build your first web pages?

This handsome new edition of Learning Web Design can be your how-to, go-to handbook for a long time, whether you are a newbie or already have web experience.

The expanded and updated guidebook now includes coverage of HTML5, CSS3, and JavaScript. There is also some focus on ensuring web pages display well on mobile device, and on making graphics files smaller for faster loading.

Subtitled “Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics,” Jennifer Niederst Robbins’ book is a complete, well-illustrated course. It can help you get a solid grounding in the fundamentals of web page creation and web design.

The book’s 603 pages are organized into 22 chapters and five parts. The parts are:

  1. Getting Started
  2. HTML Markup for Structure
  3. CSS for Presentation
  4. JavaScript for Behaviors
  5. Creating Web Graphics

“There are many levels of involvement in web design, from building a small site for yourself  to making it a full-blown career,” the author notes. “You may enjoy being a full-service website developer or just specializing in one skill. There are a lot of ways you can go.”

In general terms, she divides “web design” into “four very broad categories: design, development, content strategy, and multimedia.” On a small website, you may be responsible for understanding and implementing them all. But if you work for a company with a very large website, you may be just one member of a big team that supports and updates or changes its pages. And your job may entail just one limited aspect of web design.

But the more you know and can show that you know, the better your job security and career options may be. Learning Web Design likewise can be an excellent reference handbook for students studying web design in college or high school. And, if you have a solo small business and are reasonably computer savvy, this book can help you put together, post and maintain a good website even if you have never touched HTML.

The author, a long-time veteran of web design, includes numerous tips and references to additional materials. She also ends each chapter with a “Test Yourself” quiz, so you can “see if you picked up the important bits of information.” And don’t worry. The answers to all of the questions are in Appendix A.

Si Dunn

Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition – Dynamic websites #programming #bookreview

Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition
Robin Nixon
(O’Reilly, paperbackKindle)

Robin Nixon recently has updated and expanded his popular 2009 “step-by-step guide to creating dynamic websites.” The new edition has an added section that focuses on Cascading Style Sheets (CSS), so the book “now covers all four of the most popular web development technologies.”

Nixon notes: “The real beauty of PHP, MySQL, JavaScript, and CSS is the way in which they all work together to produce dynamic web content: PHP handles the main work on the web server, MySQL manages all of the data, and the combination of CSS and JavaScript looks after web page presentation. JavaScript can also talk with your PHP code on the web server whenever it needs to update something (either on the server or on the web page).”

The book’s opening chapters introduce (1) what dynamic web content means and (2) how to set up a development server on your Windows PC, Mac, or Linux machine. After that, Learning PHP, MySQL, JavaScript, & CSS, 2nd Edition follows the structure outlined by its title. First, you get a five-chapter tutorial on PHP programming. Then, two chapters show how to use MySQL. One additional chapter shows how to access MySQL using PHP, and two related chapters deal with (1) form handling and (2) cookies, sessions and authentication, using PHP and MySQL.

Three chapters introduce JavaScript programming. A fourth chapter covers “JavaScript and PHP Validation and Error Handling.” And one additional chapter describes “how to implement Ajax using JavaScript.”

Ajax, Nixon explains, “not only substantially reduces the amount of data that must be sent back and forth [between a browser and a server] but also makes web pages seamlessly dynamic, allowing them to behave more like self-contained applications.”

CSS gets its turn next, with an introductory chapter, a chapter on advanced CSS with CSS3, and a chapter on accessing CSS from JavaScript.

Finally, in the “Bringing It All Together” chapter, Nixon shows how to build a simple social networking site, using all of the tools introduced in the book.

Learning PHP, MySQL, JavaScript, & CSS, 2nd Edition is an excellent how-to guide for web development beginners who have moderate computer skills and a little bit of experience with HTML and static web pages. The book is nicely written and well-illustrated, and the code examples generally are easy to follow. Screen shots and other descriptions of expected results also can help keep you moving forward on the right path.

No book can cover everything you need to know, of course, particularly when several different types of software are involved. You may need occasional help from someone who has used one or more of the described programs. And some of the screen examples may appear a bit different on your machine as new software updates are released. But Robin Nixon’s updated edition can take you a long way toward the goal of learning how to design, create, post, and maintain dynamic web pages, using free, open source tools.

Si Dunn