Some of My Favorite Web Design Books

These are a few of my favorite books on web design. I’m a huge fan of Dan Cederholm‘s writing and approach to crafting CSS and HTML; he’s not a half bad ukulele player either. I couldn’t find my copy of “Designing with Web Standards” Book by Jeffrey Zeldman, but at this point in the web design world, that book would probably be thicker than the phone book of a very large city.

P.U. The stinky, antiquated Yellow Pages.

Remember those? I always thought they of sort smelled weird. Was it the ink? Was it the paper? Was it the fact that they just threw it on the front doorstep outside my house in a bag? Sorry I digressed …that’s probably why Jeffery switched over to this new format of the “A BOOK APART LIBRARY“; otherwise today’s edition of “Designing with Web Standards” would be, no joke, probably eleven inches thick. As you might have seen from the featured photo, I nabbed the first two of probably many more ABA books so I can continue getting up to speed and staying on top of all things web design.

The “A Book Apart Library”
The “A Book Apart Library”

A little backtracking here but…Speaking of the smell of books, the good smelling book smell I mean, although I have the digital versions of “HTML5 for Web Designers” and “CSS3 for Web Designers” I also grabbed the hardcopies of them because – this is weird but I’m going to admit it – if you haven’t figured it out already, I love the smell of new books. The smell of old books isn’t bad either, but there’s something about new paper and fresh ink in a new book smell I can’t resist. Someone needs to make a candle or a perfume scent of that. Maybe they have, I’m too focused to ask Siri to google that right now. Anyway, although I’m all about minimizing stuff in our lives and I am finally starting to read more and more on my iPad Pro and Kindle, for some books it’s hard to compete with being able to quickly flip through a book and find what you are looking for – am I right? Plus, iPads and Kindles: they don’t have that book smell do they? They probably have scented cases. I need one. I wonder if people said this sort of thing about records, tapes or CDs? Probably not. Bookshops smell so good but last time I stepped into a music or a video store and took a deep breath, well, it wasn’t pretty. Blech!

SaveSaveSaveSaveSaveSave

SaveSaveSaveSaveSaveSaveSaveSave

SaveSaveSaveSave

SaveSave

WordPress Sites: Mobile Plugins vs. Responsive Design

The way people view and interact on the web has changed significantly in recent years; we’re not just sitting at our desks surfing the web on our computers anymore – we have truly gone mobile. Making web content available to anyone, on any device, is the name of the game and doing so is an all-around win. When websites meet accessibility standards, they widen our potential audience and engagement. Additionally, mobile-friendly sites are rewarded by search services. Google, for instance, gives preferential treatment to mobile-optimized sites, listing them over other sites that are not. Ensuring content is accessible by users on desktop computers, mobile devices like smartphones and tablets, for the vision-impaired using screen readers, and now even car dashboards and whatever else is next – AR glasses and wristwatches – is essential. Being mobile-friendly is paramount because the more accessible and usable our websites are, the more people we are enabling to consume our content – which in turn means the potential for more traffic, more social shares, more email and/or blog subscribers…more students enrolling! By making our WordPress sites mobile-friendly we are taking the first step towards greater accessibility.

The End of Pinching, Zooming and Poking at a Website on Your Phone: Mobile Usability Options for WordPress

There are two main methods of going mobile with WordPress; the first and currently the most common is by installing a mobile plug-in such as Jetpack or WPtouch which enables your site to display a separate mobile-friendly theme when viewed from a mobile device. The other option  is to use a responsive theme that responds to the size of the viewport and adjusts accordingly.

I started with the latter, opting to install the default Twenty Seventeen theme and various other responsive themes to see how they would behave on my iPhone and iPad. Right from the first page load, I liked viewing and using the theme Twenty Seventeen more on my phone than in a desktop browser – the desktop versions almost seemed too large. The Twenty Seventeen theme was snappy and responded well to touch inputs. The layout of the menus and content looked natural and well thought out. As soon as the site popped up, it looked and felt very familiar, and I knew I was in the right place.

Next, I installed the Jetpack plug-in, activated it and headed back to the site on my phone. Jetpack actually does a nice job of creating a navigation menu, formatting the text and content, but it looks and feels like a different website because much of the styling, colors, fonts and typefaces are replaced with generic settings. Jetpack (and WPtouch) offer experiences that are much better than being relegated to swiping all over the page to see the content you are trying find but something seems to be missing. While these plug-ins absolutely deliver on what they promise and both of them do generate a functional mobile experience, I think it’s the fact that the WordPress site has been translated into more of an app-like style interface instead of the look-and-feel of the original site itself which creates a sense of disconnection.

Comparison

Plug-ins for Mobile Themes

  • Plug-ins are really quick and easy to implement
  • Plug-ins are low/no cost

Responsive Themes

  • More cohesive user experience
  • Pretty much guaranteed to work across all mobile devices

The Verdict

So which is better? A mobile plug-in that adds a second theme to your site which is only seen by mobile devices, or a single responsive theme that responds to the size of the viewport and adjusts layout accordingly?

I think the plug-in route is a great fix for an immediate need because it’s so fast, low/no cost, and so easy to install that you can be mobile friendly in a few minutes. That said, because mobile themes rely on the device being detected, when new devices come out they may not work with your website. With a responsive theme you don’t have that worry because again, by design, it responds to the size of the viewport and adjusts website layout accordingly. Since websites eventually need updating anyway, I definitely am in the camp of finding (or developing) and implementing a responsive theme.

In the end, it’s all about building a better experience for our users – regardless of the device they use – and any steps we take to becoming mobile friendly is step in the right direction.

Additional Resources

Google On Being Mobile Friendly

To test and see if your website is mobile friendly, Google has created the Mobile-Friendly Test Tool. If you run your website through the test and it doesn’t pass, using the plug-ins or a responsive WordPress we’ve talked about here will do the trick. Also you can check this article on Google’s Webmaster Central blog that goes over all the criteria for being mobile-friendly.

The Difference between Web Site Usability and Accessibility

A great article on UsabilityGeek by Justin Mifsud about the distinction between usability and accessibility.