Category Archives: Books

A quick book review: Responsive Web Design

Just finished reading an excellent book: “Responsive Web Design” by Ethan Marcotte. If you build web pages, I want you to read this book. Here’s a few of my thoughts on what I just learned, and why you should read this one too.

The book begins with an overview of the evolution of page layout in web design, starting with it’s roots in printed page design and moving on to today’s reality that there is a multitude of screens and devices out there, with more on the way. We cannot predict what type of device our readers will show up with, and must adjust our belief system (if we have one) to accommodate the new realities that the various screen widths and mobile device sizes present us with.

The second chapter discusses the idea of designing within the constraints of a flexible typographic grid. Grid systems are somewhat of an artificial constraint that designers place on themselves to provide balance and symmetry to page layout, and on screen a new challenge is presented in that the page size is no longer fixed. The main takeaway here is to design content in flexible porportions to the variable screen widths that might be used to access your web pages. Mr. Marcotte puts forth some simple, accessible ideas for developers to leverage, making text more readable on unknown devices by putting forth a formula that I’ll repeat here mostly for the purposes of getting my own head wrapped around it:

target ÷ context = result

To decode Mr. Marcotte’s example, he begins with an assumption of a base font size of 16px. The headline in the comp is defined to be 24px. So to make it flexible, divide:

24 ÷ 16 = 1.5

And so the headline should be defined as 1.5em. Simple and elegant rule of thumb. Now we just need to remember to do it.

Chapter 3 applies this principle to flexible images, and expands upon it. There is the inevitable Questionable Functionality Challenge™ presented to us by Internet Explorer, which is quickly defused. That’s a lot of ink to dedicate to an obsolete web browser and the example demonstrates where the real problem lies by showing how awful text looks in resized images. But you aren’t locking up text in your images, right? I know, I know, it’s an academic example and clearly illustrates the failings of IE’s image resize capabilities. Let’s move on.

Chapter 4 introduces media queries. We’re finally at what I consider to be the coolest and most important part of the book – how to progressively enhance your web page layouts through the media query construct. Mr. Marcotte makes the argument in favor of using the min-width property instead of things like max-width (which tends to yield excessive code) and min-device-width (which only pertains to devices and doesn’t take into account variable web browser windows.) The max-width property is introduced for those that want to stop the insanity. (I do know people that expand their web browser to the full width of their 27″ high resolution monitors.)

Chapter 5 pulls it all together with strategies to integrate responsive design into your team’s workflow; how to make your design process itself a responsive one. He builds the case for Luke Wroblewski‘s “Mobile First” philosophy (a case that was already built up a bit in chapter 1) and finishes it all of with how to incorporate progressive enhancement using JavaScript to selectively pull in a slideshow component only when JavaScript is available and all the stars are in the proper alignment.

Overall, my belief has always been somewhat of the philosophy that there should be just “one web”; no “mobile web” or any other sort of alternate web reality that we should somehow slip into. Today’s mobile devices that are in fact being used to access the web are billed as fully capable web browsing devices, and indeed they are. Why deliver a shrunken-down version of your website just because they have a 3″ wide screen these days? It no longer makes sense in most cases; just reposition your content to accommodate their view. Every chapter includes simple, usable techniques that work, and I feel that these gems of advice should be a core part your future projects.

Lastly, I am very thankful for the appearance of the A Book Apart series. Each one of these volumes is, I believe, how a tech book should be: concise, full of valuable, practical, actionable information. I have read several of these so far, and each one has been a hit. I look forward to more.

Should academic paper publishing embrace EPUB?

Sometime last year I was considering home improvement options to our house, I was thinking about building a large, built-in bookshelf in our upstairs study area. I always loved to see lots of books on the wall, and really enjoyed pulling down a book to have a browse on whatever subject interested me from my own personal library. But there was all this discussion regarding ebooks, and I was thinking if this ever caught on big time, then printed books would eventually go the way of the dodo – the end of their 400-year cycle of greatness was at hand, and the new way to read anything was going to be on a digital screen.

I’ve since come to my senses. I love books – the binding, the texture of fine paper, the fact that it doesn’t require a battery or power cord, and even the smell are all plusses in my book. Books have been around a long time, and they’re here to stay. Ebooks are just another channel of distribution for such content, and I believe that both have their place in the modern era.

However, for academic research papers, I think we can safely kill the paper. Particularly, I think it should all begin moving towards the EPUB format. I read a lot of academic papers in my work, and I find myself wishing that more of this stuff were published as EPUBs. In contrast to my love of books above, I think academic research would largely be much better served in a purely electronic format. It’s already going that way from the reader’s point of view, right?

Typically, when academic papers get published electronically, the format of choice is PDF. Or in earlier days, PostScript. If you’re lucky, someone had the foresight to publish their paper as HTML. The advantage of a flexible format such as HTML is that you can resize the fonts. Text can flow. It’s easier to get a clean copy of a text or data segment out of HTML than it is from PDF for quoting in one’s own paper, because copying from PDF tends to yield horrific line break issues and other artifacts on the clipboard.

PDF is, I’m sorry to say, hard to read on smaller screens. PDF expects paper, and refuses to reflow itself into smaller screen sizes such as an iPhone or Android device form factor. It barely passes on the 1024 x 768 iPad screen. Anything smaller, such as most ebook readers, is going to be unacceptable. Having to zoom in and scroll left to right to read one line of text at a time on a mobile device is not what anyone would call a user-friendly reading experience.

EPUB by contrast works great on mobile devices. Using the Stanza reader on iPhone is quite comfortable. iBooks on the iPad platform is a joy to use.

After reading this tweet by Dave Gutelius today, I was reminded of how much I hate printing out all my academic papers in preparation for travel. Flying is reading time, and printing this stuff out and stuffing it in my backpack is time consuming, a waste of paper, and added weight that I don’t want to carry.

Stuffing those papers onto my iPad and using GoodReader is a step in the right direction. But still, all too often the PDFs are formatted for paper, not for screen, and I am still cursing the format. PDF usually assumes letter-sized or A4-sized paper, and most ebook readers have physically far smaller screen sizes. Far better I think to start providing EPUB options for academic research, so that folks like me who need ginormous fonts and such can read with greater ease.

Or, should it just go to straight HTML? At that point, papers might even be able to add a little functionality to the electronic reading experience – change variables in information graphics, show rendered 3D representations of models, and so on. EPUB doesn’t support anything fun like HTML5 DOM handling or Flash, although CSS3 might work depending on the EPUB reader’s implementation. Either way, PDF ain’t fitting the bill ebook readers, and I think this sort of format will be far more important in the coming months and years as ebook-capable mobile devices become more and more commonplace.

Foundation Website Creation with CSS, XHTML, and JavaScript

In a real bookstore

I would have announced this earlier, but somehow with the trip to Taiwan, the subsequent jet lag, and the whopper of a cold I had this past week has delayed me from getting this post out until now. But here it is: My book titled “Foundation Website Creation with CSS, XHTML, and JavaScript” is now out! I saw two copies of it today on the shelf at Barnes & Noble in Walnut Creek earlier today (pictured).

This project came up at a real interesting time. I was just starting the final quarter of my masters degree program through University of Denver in computer information systems, and the last thing I wanted to do was to take on extra work. But of course, this opportunity to collaborate on this project was too good to pass up, so I opted for no sleep for a few months and somehow got both done last June. Man, it feels good to be done.

My fellow authors Jonathan Lane and Meitar Moscovitz and I have put together a book that covers a professional introduction to the core technologies involved in front-end website development. In it we have tried to convey modern best practices from a web standards perspective as well as from a user-centric project management perspective to give the emerging web developer a solid foundation as to what to expect in a professional web design workflow. I hope the readers of this book find the information contained therein to be valuable platforms for further exploration and learning.

The book may be ordered from Amazon, and you might even find it on a local bookstore shelf!

Taking a little break

The past three years have been grueling. Working full time, taking classes towards a masters degree, and being a dad all at the same time was taking a toll. The last few months were especially interesting since I was working on a book project on top of everything.

Well, life has returned to a new kind of normal for the past couple of weeks, and it is good to have a little free time again. The masters degree is done – I am now a graduate of of the University of Denver in computer information systems, with concentration in web design and development. And the book is done – an introductory guide to standards-based web development. More on the book details in a later post…

So it is nice to experience a little rest for a change. I actually have had time to relax a bit and get back in touch with cooking, taking the kids on excursions to places like zoo and the Exploratorium, reading a geek book or two that I actually want to read, and of course practicing.

Hey, perhaps I’ll even have more time to post items here in the ‘ol blog! But don’t hold your breath… 😉

LibraryThing

LibraryThing is one of my favorite web 2.0 sites. As I mentioned in an earlier post, it is Flickr for bookworms. One of my missions is to always have a book that I’m actively reading – something I keep around with a bookmark in it, reading it whenever I get a chance. Turns out LibraryThing is a great way for me to keep a pulse on all of it, if nothing else than to have a visual reminder of what it is I read so that I can stoke some memory of the details for the things I’ve been learning along the way.

So lately they’ve added a few new features, and one feature I particularly like is that they added a status feature to indicate what is currently being read. Another feature I discovered recently was the ability to post a list to my weblog, as I’ll do here (sorry non-JavaScript-enabled clients:)

As you can see, not a lot of this is fiction – just technical and theoretical mumbo-jumbo for the most part. It is my hope someday to get over the technology goals I currently have, and start reading something more fun, like some more Marquez or Lorca.