Givers and Takers in the Web World

I’m reading Give and Take: A Revolutionary Approach to Successby Adam Grant. Here’s the premise of the book from the book jacket:

In professional interactions, it turns out that most people operate as either takers, matchers, or givers. Whereas takers strive to get as much as possible from others and matchers aim to trade evenly, givers are the rare breed of people who contribute to others without expecting anything in return.

The book dissects how givers, takers, and matchers achieve success – and hang on to success – while others may ultimately fail. Adam Grant is a professor at The Wharton School. The book is based on research and many studies. I was afraid from the title that it might be some of that woo-woo stuff like you read in The Secret, but this is based on research.

It’s an enlightening book and a new way of thinking about success.

Grant’s premise is that givers, people who put the success of the team or the company or the other person in an interaction above their own success, if they do it right, ultimately become the most successful and valuable people to have around.

I’m only a little over half way through the book, but I keep having the same thought as I read. Grant talks mostly about famous men: Ken Lay from Enron, George Meyer from “The Simpsons,” basketball star Michael Jordan, Obama aide Reggie Love. I keep thinking, but what would he say about Sheryl Sandberg or Oprah Winfrey?

As I read, my mind also goes to the people in the web design world. Not world famous names, but people who make this little niche of the world work. Who are the givers are takers and matchers? It was easy to come up with names of men I think would be considered givers. A couple of quick examples: Jeffrey Zeldman, Eric Meyer. But what about women?

Two Women

I want to mention two women in the web design world that I’ve had the experience of working with, and who I consider givers.

Glenda Sims (@goodwitch) is someone I’ve always thought of as a connector. She knows everyone. Ten minutes after you meet her and she hears a bit about who you are and what you do, she’s giving you names of people you should meet, dragging you off to meet them, telling both of you how you can help each other.

I worked with her when creating the web education curriculum that began its life under the name InterACT and has now gone to live at the W3C. This was a team of people who volunteered to build a web standards based curriculum and put it on the web to give away. Glenda wrote little bits of this material, but the real contribution she made was in herding everyone along, in keeping everyone productive, in finding the right person for a job, in managing time and information for everyone else, in knowing where to get funding. Glenda’s name is not the big name attached to this project, but if she hadn’t been there acting as a giver, the project might not have succeeded.

Search Flickr for Glenda Sims and you find her face next to most of the people you’ve heard of in the web design world. I wasn’t kidding when I said she knows everybody.

Another woman I consider a giver is Zoe Gillenwater (@zomigi). I first became aware of Zoe years ago when the CSS Discuss mailing list was part of my regular reading. The list was about 9 parts people struggling with CSS questions and trying to learn it and 1 part people who were willing to answer questions and help others learn. Zoe was one of that 10% who spent hours answering, explaining, clarifying, helping. She was obviously brilliant at CSS and has gone on to prove it in many ways since. But back then, she was an unknown.

She’s not unknown now, as you can see in a Flickr search.

I worked directly with Zoe when my publisher asked her to be the technical editor for one of my books. Maybe you aren’t aware of this, but technical editors get paid about 50 cents an hour for what they do. It’s a crappy job. But Zoe took on the job with every intention of being the best at it and she was. She was most excellent at making sure that the CSS material in my book was correct and in helping me learn about and use the best CSS examples and techniques available at the time. It was my name of the cover of the book, not hers, but she took the time to give me a lot more than she actually had to to make sure the book was a good one.

If you have stories about the givers in the web design world, men or women, I hope you’ll share them in the comments. Let’s recognize the givers who make all of us a success.

Links to Amazon are affiliate links.

Review: SASS for Web Designers

SASS for Web Designers by Dan Cederholm is from A Book Apart (2013). Like all the A Book Apart books, it’s brief and very good. And like all books from A Book Apart, it isn’t available new from anyone but them.

SASS is a CSS preprocessor. The book’s first chapter is Why SASS? Cederholm does the explaining with this elevator pitch:

Ever needed to change, say, a color in your stylesheet, and found that you had to find and replace the value multiple times? What if you could change that value in one place and the entire stylesheet reflected that change? You can with SASS! Or how about repeated blocks of styles that are used in various locations throughout the stylesheet? That’s also SASS!

From the first page, you see code examples for how something would be written in SASS. Following that, the CSS output from SASS is shown, to explain exactly what the SASS example does. You quickly begin to see the connection between what you’re asking the preprocessor to do and the CSS output.

Chapter 1 also explains SASS syntax and using the .scss file extension.

Chapter 2 is Workflow. It explains how to install SASS on a Mac and/or Windows. It gives you a few (very few) command line entries but also mentions some apps you can use if the command line freaks you out. Finally it explains how to choose an output style for the CSS that SASS is going to spit out.

Chapter 3 is Using SASS. You learn about nesting rules and namespace properties, about referencing parent selectors with &, about commenting in SASS, about variables and mixins, about mixin arguments. Cederholm also explains mixin libraries and the use of @import rule. He discusses the pros and cons of the Compass framework and the Bourbon library.

He explains extends, multiple extends, and extend vs. mixin. Every one of the topics in chapter 3 comes with very clear code examples that help you see how to do something with SASS and what the results would be in CSS.

Chapter 4 is Media Queries. You find out about nesting media queries, using variables for breakpoints, using the content directive, and putting mixins inside mixins.

The book wraps up with a list of resources for learning more.

A review by Virginia DeBolt of SASS for Web Designers (rating: 5 stars)

Summary: You could start using SASS today with this book as a guide.

Review: Designing for Behavior Change

Designing for Behavior Change: Applying Psychology and Behavioral Economics by Stephen Wendel is from O’Reilly (2013). The book is aimed at app developers who want to make a product that will be used regularly and will cause people to change their daily habits and routines.

It’s full of ideas, examples, studies, and information to help you plan, design, test, and deploy an app that will help people make a change. The change might be to exercise more often, save money, or something else. Many examples in the book are from HelloWallet, where author Stephen Wendel works, but there are plenty of examples from other places as well.

The book takes you through the complete process of figuring out the goal for your app, clearly stating the behavior you want to achieve, and the process of creating, designing and testing to make sure you accomplish the goal. There is science to back up the author’s suggestions. There are examples to help you understand what kind of behavior change you can expect people to make using an app, and how to get them to use it long enough to make the desired changes by keeping the interface simple. It talks about designing, coding, about measuring impact, and about refining a product as you go along.

Footnotes and appendices are many if you want to get into the various studies and examples cited in the book, but there’s plenty of information here to get you going with just this source.

Each chapter is almost a text in itself, because the author repeats many of the core princples of what you need to keep in mind in every chapter. It’s repetitious, but it also reinforces the key points at every step along the way.

Summary: An excellent guide to designing apps to create behavior changes.

A review by Virginia DeBolt of Designing for Behavior Change: Applying Psychology and Behavioral Economics (rating: 5 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. You can buy the book from O’Reilly, as well as Amazon. The link to O’Reilly is not an affiliate link.

10 New Photoshop Freebies

One of the greatest things about the field of graphic design is that so many talented professionals are willing to share their work with one another. This is especially true for Photoshop, arguably the most popular graphic design software on the planet. Photoshop freebies make it easy to improve your efficiency and productivity as a designer, thereby helping you make more money in less time. Here are 10 new Photoshop freebies you should add to your stable today.

1. Flaticon.com Photoshop Plugin

I think you’ll come to regard this as one of the best Photoshop plugins you ever install. The Flaticon.com Photoshop plugin gives you access to more than 14,000 free icons, searchable from right within Photoshop!

Flaticon

2. Retinize It

Retinize It is a Photoshop plugin that slices your designs to make them Retina-ready. Take advantage of the most advanced screen display technology by ensuring your websites and iOS apps are Retina-ready with this free plugin.

retinize

3. Camouflage Patterns for Photoshop

Go full camo with this set of 10 free camouflage patterns for Photoshop, created by user Tijo and posted on Brusheezy.

camo

4. Vanilla Cream UI Kit PSD

One of the most aesthetically pleasing UI kits on the web is available as a free PSD download! This UI kit includes elements for blogs, forms, filters, buttons and more.

vanilla

5. Color Swap and Monochrome Photoshop Actions

Michelle Kane continues to offer outstanding, premium-quality Photoshop freebies on her website. The color swap action lets you instantly and effortlessly change background colors, while the monochrome action gives your grayscales a professional finish.  Other Photoshop freebies are also available

michelle kane

6. Instagram Vintage Pro Photoshop Action

Give your images the vintage look Instagram users love with this action by DeviantArt user Friabrisa.

vintage pro

7. HDR Photoshop Action

This Photoshop freebie is a sample from the commercial Faux HDR Actions suite, and will give your photos a premium HDR photography appeal out-of-the-box.

free HDR

8. Fall Foliage Photoshop Brushes

From the Creature Comforts blog comes this set of 23 high-quality fall foliage Photoshop brushes that look absolutely beautiful when finished with a watercolor effect.

fall brushes

9. Photoshop Skin Smoothing Action

Fundy presents this free Photoshop skin smoothing action, available for instant download from their website. Soften your portrait subjects for beautiful glamor shots and more.

skin smoother

10. High-resolution Photoshop Watercolor Brushes

Digitally paint watercolor masterpieces with this set of 38 free watercolor brushes by Brusheezy contributor Sandy.

watercolor brushes

Guest Author Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint.

Review: Lightbeam for Firefox

Lightbeam in graph view
LIghtbeam in graph view after 1 day

An email from Mozilla about Lightbeam for Firefox said,

We built Lightbeam to shine a spotlight on online data tracking to help people understand the Web. After you download and install the Lightbeam add-on to Firefox, it creates a real-time visualization of the websites you visit and all the third parties active on those sites. As you browse from site to site you can watch the visualization grow. You can also share your Lightbeam data with Mozilla and better inform a global dialog on the prevalence of tracking.

I’m not particularly interested in sharing my data with Mozilla – they probably know everything there is to know about me already without giving them more – but I was interested in seeing how this worked and what kind of privacy insights it offered.

The graph at the top of the post shows Lightbeam after being installed in Firefox for only one day. The circles are sites I visited, the triangles are “third party site” connected to the sites I visited. In one day after installing Lightbeam, I visited 11 sites and was connected to 117 third party sites.

On the graph view, if you hover over any one of the circles or triangles, you can see what it is. You can manipulate the display. For example, here is the graph with third party sites dimmed out.

Lightbeam with visited sites highlighted and third party sites dimmed
Lightbeam graph with visited sites highlighted and third party sites dimmed

Dragging (like on a Google map) will zoom in or out of the graph so you can look at the data in various closer or more meta ways. The controls under the display help you choose what you want to examine more closely.

LIghtbeam controls and filter options
LIghtbeam controls and filter options

The Cookies filter identifies when a site has stored some data in your browser. You can set site preferences and the graph will identify sites that are blocked or watched.

The data can be viewed as a clock (not shown) and as a list, which you can see here.

Lightbeam data displayed as a list
Lightbeam data displayed as a list

Next I visited this blog. Clicking on anything in the graph gives you more information. Here’s the graph with the little WT icon for Web Teacher selected. A sidebar opens with all kinds of data about the site.

Lightbeam information about Web Teacher
Lightbeam information about Web Teacher

Some of the sites this blog is connected to are obvious from the content, ads and various sharing icons: youtube, gravatar, twitter, blogherads, addthis. Further down the list of 33 sites linking from Web Teacher, I found names I never heard of and didn’t know how they got there. I suspect they come from something related to the ads, but I really don’t know for sure. And this is my blog!

LIghtbeam is an eye-opener. It gives me the ability to block sites, but beyond that I don’t see many opportunities for actions to improve my privacy I can take using this addon. Am I missing something important Lightbeam offers me as an individual user? Is it just part of big data collection about me?

The Future Starts Here

Now AOL is getting into the web series game with an AOL original series from Tiffany Shlain called The Future Starts Here. This 8 episode series is mostly about technology. Topics like information overload, tech etiquette, robots, and the creative process are included.

Tiffany Shlain
Tiffany Shlain, creator of The Future Starts Here

Here’s the first episode. Most last from 3 to 6 minutes, so you can watch all 8 in less than an hour.

Review: Jump Start Responsive Web Design

Jump Start Responsive Web Design by Craig Sharkie and Andrew Fisher is from SitePoint (2013). I found this book uneven in usefulness, so I’m only giving it 3 stars, although it did have some very valuable tips.

The first part of the book talks in general about responsive design. Then it goes into fluid grids. The explanation of the mathematical underpinnings of grids and font-size decisions in this section were clear. However, some parts of this discussion made almost no sense to me because the reader is expected to download files and be at a computer while reading. The code examples printed in the text are not adequate for someone like me who was reading an electronic version of the book to follow the discussion. There were references to things unseen and comments you couldn’t follow unless you were working in the downloaded code.

The adaptive images chapter gave us several alternate ideas for working with images. There was no definitive best practice set forth in this section because we really don’t have a definite answer yet, or even a final choice as to the HTML elements that will format responsive images.

In the section on understanding media queries there was excellent detail and advice. I was impressed with some of the solutions the authors pointed to dealing with the constantly changing number of potential breakpoints in responsive designs.

The chapter I found most fascinating was the one on responsive content. Discussion focused on ways to structure content with metadata and supporting structure that allow for the reuse of chunks of content in various ways. This is part of the overall concept of responsive design that seldom gets mentioned. The book is worth reading for this chapter alone.

The final chapter looked at various boilerplate solutions and how they can be adapted to your individual needs.

Summary: Lots of tips for making responsive web design work for you.

A review by Virginia DeBolt of Jump Start Responsive Web Design (rating: 3 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. You can buy the book from O’Reilly, as well as Amazon. The link to O’Reilly is not an affiliate link. Here is my review policy.