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

 

Advertisements

WordPress: The Missing Manual – Covers what you need to know & can profit from – #bookreview

WordPress: The Missing Manual
Matthew MacDonald
(O’Reilly, paperbackKindle)

It’s easy to set up and launch a basic WordPress blog. But once you do, it’s also very easy to just keep blogging and ignore the many other options and features that WordPress offers. (I’m guilty of that, which is why I’m happy to see this book.)

If you want to know more about how to use WordPress or how to improve the appearance of an existing blog, WordPress: The Missing Manual definitely should be in your hands.  Matthew MacDonald’s new book is well-written, heavily illustrated, and packed with good how-to steps and tips.

Many small businesses and numerous large companies also use WordPress to provide some or all of their web presence. MacDonald’s 545-page how-guide has essential information for these users, too.

The book is organized into five parts:

  • Part One: Starting Out with WordPress – Covers key decisions you should make before starting to use WordPress.
  • Part Two: Building a WordPress Blog – The blogging-on-WordPress basics are presented here. But: “Even if you’re planning something more exotic than JAWB (Just Another WordPress Blog, don’t skip this section,” the author urges. “The key skills you’ll learn here also underpin custom sites, like the kind you’ll learn to build in Part Four of the book.”
  • Part Three: Supercharging Your Blog – Explains how to use plug-ins to add new features to your self-hosted blog site. Shows “how to put video, music, and photo galleries on any WordPress site. Covers “how to collaborate with a whole group of authors…and how to attract boatloads of web visitors….”
  • Part Four: From Blog to Website – Shows how to “take your WordPress skills beyond the blog and learn to craft a custom website” with WordPress at its heart.
  • Part Five: Appendices – Appendix A “explains how to take a website you created on a free WordPress.com hosting service and move it to another web host to get more features.” Appendix B, meanwhile, gathers up the “useful web links” scattered throughout the book and puts them into one place organized by chapter. A link also is provided where this collection of links can be downloaded.

How popular is WordPress? It is, according to MacDonald, “ridiculously popular…stunningly popular…responsible for roughly one-sixth of the world’s websites….And one out of every five new sites runs on WordPress….”

If you choose to go the WordPress route, be sure you have WordPress: The Missing Manual with you.

Si Dunn

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

Developing with Google+ –A handy how-to guide for working with the Google+ Platform – #programming #bookreview

Developing with Google+
Jennifer Murphy
(O’Reilly/Google Press, paperbackKindle)

Ready to integrate Google+ with an existing website? Eager to build your own Google+ social application? This well-written and nicely illustrated how-to guide can get you started.

Jennifer Murphy’s new book shows you, step by step, how to become “comfortable digging into Google+” and its application programming interface (API).

“The Google+ platform has three categories of features,” notes the author, who works at Google.

“The three categories of the Google+ platform are social plugins, like the +1 button, RESTful web services, which provide read access to Google+ data, and hangout applications, for writing your own real[-] time collaboration apps. Additionally, the RESTful web services can be used in a couple of ways. You can either access public data directly when you know what you’re looking for, or you can use OAuth2.0 to access your user’s data on Google+.”

The 91-page book is divided into six chapters that follow the progress of a fictional company ( humorously named “Baking Disasters”) as it adds all of the features of the Google+ platform to its website.

The chapters are:

  1. Introduction
  2. Social Plugins
  3. Public Data APIs
  4. OAuth-Enabled APIs
  5. Collaborative Baking with Hangout Apps
  6. Wrapping Up the Baked Goods

Depending on how experienced you are with developing on social platforms, the book is structured so you can easily skip around to the parts that are new to you. Or you can work through the processes one step and one chapter at a time.

Si Dunn

Get  more information here:  paperbackKindle

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

Dreamweaver CS6: The Missing Manual – 1000+ pages of good website how-to information

Dreamweaver CS6: The Missing Manual
By David Sawyer McFarland
(O’Reilly,  paperback, Kindle)

Dreamweaver website development and management software has been around more than 14 years. This makes it almost ancient by software standards. Yet, with each new release, it keeps steadily evolving, improving and adding more features and capabilities. And it is well-supported and stable. So Dreamweaver remains one of the most popular and widely used packages for designing and managing high-quality websites.

One thing you still don’t get with the Dreamweaver software package, however, is a printed manual. So it remains a perfect candidate for O’Reilly Media’s popular “The Missing Manual” series.

This book’s author, David Sawyer McFarland, knows pretty much everything about Dreamweaver. He has been using it since 1998. And, with this new edition, he keeps alive his string of writing every Dreamweaver book in “The Missing Manual” series. (His previous edition, covering Dreamweaver CS5.5, is reviewed here.)

McFarland’s book shows you how to use Dreamweaver CS6 and how to create a basic website. From there, you learn how to improve, expand, add features, and enhance the usefulness and sophistication of your website. You also learn how to use the built-in tools to manage what you have created. 

Here is what’s new in Dreamweaver CS6:

  • Basic support for HTML5, including HTML5 tags and code-hinting.
  • Support for CSS3, including code-hinting and adding numerous CSS3 properties to the CSS Styles panel. Dreamweaver CS6 also has a new CSS3 web fonts manager that expands font choices. And its new CSS transitions panel “lets you easily add animations to mouse rollovers, so you can turn a navigation bar into an animated visual delight.”
  • More web design support for mobile browsers, including a new “‘fluid grid layout’ tool that lets you build designs that re-flow content to match different devices….”
  • More support for jQuery Mobile and PhoneGap—“two programming technologies that let you build mobile phone applications using just HTML, CSS, and JavaScript.”

Dreamweaver CS6: The Missing Manual is organized as follows:

  • Introduction
  • Part One: Building a Web Page
  • Chapter 1: Dreamweaver CS6 Guided Tour
  • Chapter 2: Adding and Formatting Text
  • Chapter 3: Introducing Cascading Style Sheets
  • Chapter 4: Links
  • Chapter 5: Images
  • Chapter 6: Tables
  • Chapter 7: HTML: Under the Hood
  • Part Two: Building a Better Web Page
  • Chapter 8: Advanced CSS
  • Chapter 9: Page Layout
  • Chapter 10: Troubleshooting CSS
  • Chapter 11: Designing Websites for Mobile Devices
  • Part Three: Bringing Your Pages to Life
  • Chapter 12: Forms
  • Chapter 13: Adding Interactivity with JavaScript
  • Chapter 14: Add Flash and Other Multimedia
  • Part Four: Managing a Website
  • Chapter 15: Introducing Site Management
  • Chapter 16: Testing Your Site
  • Chapter 17: Moving Your Site to the Internet
  • Part Five: Dreamweaver CS6 Power
  • Chapter 18: Snippets and Libraries
  • Chapter 19: Templates
  • Chapter 20: Find and Replace
  • Chapter 21: Customizing Dreamweaver
  • Chapter 22: Working with Server-Side Programming
  • Appendix A: Getting Help
  • Appendix B: Dreamweaver CS6, Menu by Menu
  • Index (46 pages)

As usual, a CD is not included with this book. But “every single Web address, practice file, and piece of downloadable software mention in this book is available at www.missingmanual.com (click the Missing CD icon.)”

Whether you are an absolute newcomer or an old hand at using Dreamweaver, you can benefit by having and using this hefty how-to book.

Si Dunn

The CSS3 Anthology: Take Your Sites to New Heights – #bookreview #in #webdesign

The CSS3 Anthology: Take Your Sites to New Heights, 4th Edition
Rachel Andrew
(SitePoint,
paperback, list price $39.95; Kindle edition, list price $29.95)

“The basic purpose of CSS [Cascading Style Sheets],” Rachel Andrew notes, “is to allow the [web] designer to define style declarations — formatting details such as fonts, element sizes, and colors — and then apply those styles to selected portions of HTML pages using selectors: references to an element or group of elements to which the style is applied.”

The fourth edition of this popular how-to book for Cascading Style Sheets is aimed at providing how-to examples, shortcuts and tips for busy web designers and web developers already working with CSS.

However, web-savvy beginners and those who build and maintain their own websites also can benefit from this well-written book. Along with a short introduction to CSS basics, it offers many short code examples and related screenshots. And virtually every chapter is structured around answering the question “How do I…?” as each new topic is introduced.

Indeed, the 420-page book is a compilation of answers to questions, specific how-tos and examples readily adaptable to real-world web pages.

The CSS3 Anthology is organized into nine chapters:

  • Making a Quick Start with CSS
  • Text Styling and Other Basics
  • Images and Other Design Elements
  • Navigation
  • Tabular Data
  • Forms and User Interfaces
  • Cross-browser Techniques
  • CSS Positioning Basics
  • CSS for Layout

If you need a tutorial or refresher in HTML and CSS basics before grabbing this book, the author recommends Build Your Own Website the Right Way Using HTML & CSS, 3rd Edition, available in paperback and ebook formats.

— Si Dunn

#