WebDesign Archives - Page 7 of 34

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.

Top 10 Issues Graphic Designers Will Face in 2014

The world of design is ever-evolving, which is why staying abreast of design trends and changes in the marketplace is so critical to your success as a designer. Whether you work for a design firm or for yourself as a freelance designer, you should be prepared for upcoming challenges. To help you prepare, here are the top 10 issues web designers and graphic designers will face in 2014. Are you ready for them?

1. Employed or self-employed?

Being employed by a graphic design firm means a steady paycheck and benefits such as health insurance and paid vacation. When the work day is over, it’s over, but the tradeoff is an income ceiling. Working as a freelancer offers more freedom and the potential for greater income, but has greater risks. With the impending changes in health insurance, the freelance lifestyle could become more expensive than ever before, causing many freelancers to seek full-time employment for the benefits.

2. Niche markets

Most graphic designers I know are jacks of all trades; they design anything they can get paid for. In 2014, the more you specialize your offering, the easier it will be to stand out from your competitors and land better, higher-paying clients. Pick your pony and ride it to success.

3. Continuing education

Remember those “The More You Know” commercials that used to interrupt your Saturday morning cartoons? Well, they were on to something. As the world of design continues to evolve to accommodate new marketing tactics and advanced technologies, so too must your knowledge of design and how it relates to marketing and development evolve. In 2014, you should continue to seek out opportunities to expand your knowledge of design in your chosen discipline.

4. Marketplace value

Competition from designers who charge far less than you – especially foreign designers – can threaten your ability to win new clients. In 2014, you should become an expert at selling not only the quality of your design work, but the value in your understanding of your clients’ markets.

5. Outsourcing

If you’re a freelancer, there is a limit to how much you can charge (at least, that clients are willing to pay), and there are only so many hours in the day. If you want to maximize your income, it’s time to consider outsourcing work to other talented designers. Perhaps you should adopt the agency approach?

6. Add-on services

Another great way to increase your income is to partner with companies that can provide complementary services. This will become more important than ever in 2014, as busy small businesses want to pass off their design projects and not have to contract with several companies to get them done. For this reason, it behooves you to establish partnerships with developers and printers and add your fee on top of any work they perform. White label partners allow you to put all work under your name.

7. Passive income

The cost of living continues to increase, yet you continue to face stiff competition in pricing. Specializing can help you charge more, but you can also take advantage of passive income opportunities such as selling your designs on posters, shirts, coffee mugs, and more. Devote some time each week to a new design you can sell via online product marketplaces such as Zazzle.

8. Pay raises

Whether you work for a design firm or are a freelancer, you need to work in annual pay raises, at minimum. Ask your employer for a raise; or, if you’re a freelancer, increase your fees by a set percentage every year to make up for inflation and increased cost-of-living expenses.

9. Trends vs. innovation

As noted, understanding and being able to apply contemporary design trends will land you more work and keep clients happy. At the same time, you need to differentiate yourself as a designer. How will you balance design trends vs. design innovation?

10. Value perception

It’s unfortunate, but graphic designers have been devalued by the same digital world that has created so many opportunities. Supply and demand dictates that marketplace, and designers are a dime a dozen online. That’s why it’s so important for you to work to change the perception of designers – or, at least, your own design work. It’s critical to demonstrate the value of what you do to your clients’ overall goals in order to lay a foundation for long-term success.

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

The State of Things and What it Means for Web Education

Several interesting things have come up in the last week or so that I think need to be connected.

Who’s Not Online?

Pew Internet did a study on Who’s Not Online and Why. They found that 15% of American adults do not use the internet at all, and another 9% of adults use the internet but not at home.

As to who those non-Internet users are, Pew found this:

Internet use remains strongly correlated with age, educational attainment, and household income. One of the strongest patterns in the data on internet use is by age group: 44% of Americans ages 65 and older do not use the internet, and these older Americans make up almost half (49%) of non-internet users overall.

That hardly seems like earth shaking news, but Pew reports it as if it is. As for why they are not using the Internet, there were many reasons given. 34% of non-users said they just weren’t interested and didn’t consider it relevant to their daily lives. 32% cited usability issues, learning issues, and worries about privacy or spam. 19% cited price, and 7% said it wasn’t available where they lived.

A similar report that was written about in The NY Times prompted this letter and post from disability lawyer Lainey Feingold about the digital divide and disability.

The Mobile-Born

After reading about the non-Internet using elderly and poor, I saw this TechCrunch post on The Rise of the Mobile Born. This post by Paul Holland talks about The Mobile Born, which he describes as,

A generation of kids that have been raised while literally gnawing on the equivalent of a supercomputer — otherwise known as mom’s smartphone.

Holland says that companies are embracing mobility and transforming their business practices and work arrangements through mobility. He predicts changes in office processes, organizational structures, consumer engagement and young people who have never known any kind of interaction other than that which we create on mobile devices.

What Does That Mean for Teaching Web Design

As a web educator, I look at trends like those reported above from Pew Internet and TechCrunch, and think about what all that means to me in the classroom.

At Smashing Magazine, Jen Kramer wrote about Teaching Web Design to New Students in Higher Education. I think it’s worth taking a look at her suggestions and how they will help us meet the changing world that surrounds us.

Kramer first talks about the classes where students are taught to build a “comp.” An image from Photoshop or Fireworks that somehow will get translated into a web page. Her ideas on making this type of class more useful are excellent. She suggests:

Build a design in 12 evenly-sized columns.
This is a great time to explain about grids and how they work. Have students build designs based on this grid to demonstrate their understanding.

Show versions of the design.
If the design looks one way at 960 pixels, how does it look at 1200 pixels? 320? 767? Have students use the same content in their designs, rearranged for these different screen environments. Be sure to ask about transitions — what happens as the design moves from 767 to 320 pixels?

Ask questions about photos.
What does that big photo banner stretching so beautifully across the top of the page at 960 pixels look like at 767 pixels? What happens between 960 and 767 pixels?

Encourage students to think about touch.
This is particularly important at smaller screen dimensions, but desktops and laptops are trending towards touch as well. Encourage students to build navigation suitable for fat fingers, for example.

Deemphasize slicing.
Rather than thinking about the comp as the source of imagery for a website, consider it its own prototype. Slicing may not be required at all, because images may need to be generated in several sizes for different screen dimensions. Even background graphics can be generated in their own independent documents. By deemphasizing slicing, you also deemphasize the centrality of this comp for the website’s design. With responsive design, the comp sets a goal or a direction, but tweaking is required to accomodate the space between 320, 767 and 960 pixels and beyond.

Kramer also has some great ideas about teaching HTML and CSS.

Standardize in one browser.
I’d recommend working with Firefox or Chrome as the standard browser in class, because they’re available on Mac and PC and are the most standards-compliant. Tell students that this is the only browser that matters for the purpose of this class. Cross-browser issues should be dealt with later, once students understand how HTML and CSS work completely in this browser. When cross-browser problems are introduced too soon, students get confused, unclear whether a particular problem is due to the browser or just badly formed code.

Teach HTML5.
Students should learn how to mark up documents with sections, asides, navigation, headers and footers from the start.

Teach CSS3 and all types of selectors.
Make sure students understand media queries as soon as they are able to. Introduce adjacent sibling selectors, child selectors, universal selectors, various pseudo-classes and so forth. Again, worry less about browser support, because these students have years before graduation.

Incorporate grid-based thinking early on.
Even if students can’t code their own grid yet, they could certainly build layouts while thinking about 12 columns, using em and/or percentage widths and sizes. Have students code standard shapes of pages, such as two- and three-column layouts, with or without headers, footers and horizontal navigation, rather than leaving students open to code any type of layout. Understanding the trade-offs between design and code is important, so always address those.

As soon as students grasp floats and positioning, teach how to code a grid.
Because students have been thinking about Web design with grid-based principles, this transition should be fairly quick for them.

Responsive design is now a short lecture, not a long one.
Students are now able to pull together grid-based layouts and media queries. They’ve likely encountered image-resizing issues along the way, but if not, this is the time to discuss them.

Now is the time to discuss browser compatibility.
Now that students have mastered valid, standards-compliant, responsive code, it’s time to think about browser compatibility. One way to introduce this is to work with poorly supported HTML5 tags or CSS3 elements such as rounded corners.

CSS preprocessing is a hot topic.
Centralizing CSS variables is a great idea and is bound to be a core CSS skill, required by employers, in the next year or two. (Some say it’s already here.) Some LESS and Sass concepts, such as centralized variables and logic, also offer a smooth transition to a course on JavaScript and jQuery, in which similar concepts would be important.

Covering responsive design frameworks is not a bad idea.
If there’s time left in class, this is a great topic to explore. I’d recommend covering Bootstrap if you’ve taught LESS, or Foundation if you’ve taught Sass. Students will learn how to read someone else’s code (an important skill!) and how to read documentation; they will also learn new technology, as well as explore the positives and negatives of using a documented, open-source framework. Finally, they will learn to customize this code for their own purpose.

We all know that things are going to continue to condense, grow smaller and more mobile. Remember Moore’s Law? Just as we once relied on floated divs to create columns, and now we rely on grid systems with media queries to create responsive designs, there will be a future web design and development trend for even smaller and more mobile displays. Surely Google Glass is not as small as it’s going to get. Teaching students how to design for this future is challenging indeed.

I applaud Jen Kramer for her excellent teaching ideas. But I encourage you to keep thinking smaller and smaller, more mobile and wearable, and completely wireless as the direction web education must take.

Useful Links: Content Ideas, Beauty Pageant, Date Input

I saw this tweeted by Kristina Halvorson, so I took a look. It’s a tool to help you generate ideas for new content for your blog, called Content Strategy Generator. It works through Google Drive.

To Increase Women’s Participation, They Added a Beauty Pageant. Good grief!

Date input in HTML5: Restricting dates, and a thought for working around limitations is from Tiffany B. Brown.

Useful Links: Resolution Resource, iPad Air, Usability

Device Screen Resolutions Ordered by OS is a very useful resource from David Storey.

Bryan Cranston now pushing iPads to Apple addicts. This funny headline gives me the opportunity to make a comment on the new iPad Air. I have a regular iPad and an iPad mini and I much prefer the smaller one simply because of weight. I applaud the arrival of a lighter full-sized iPad.

Designing for Usability: Three Key Principles comes from Measuring Usability, a blog by Jeff Sauro with many helpful articles.

What A-B Testing Is and Why You Should Do It

When you are running a business, it is important to test your advertising and marketing strategy so that you can develop a better method of reaching your target audience. The primary goal of marketing is getting the name of your company and the products or services that you provide out to the public. The second goal of advertising is tempting your target audience, or the customers that your products are designed to help, to consider purchasing the item or paying for the services. One method of finding the right advertising strategy for your business is A-B testing.

What Is A-B Testing?

Before it is possible to actually apply A-B testing in your business, you must understand what it is and how it works. If you do not know the basics of the testing strategy, then it is hard to use it in a practical manner.

A-B testing is a term that describes a systematic study of different parts of your marketing strategies, website or other tools that you use to gain the attention of your potential clients. MarketingLand.com write about what to test. You have two items or elements that you are comparing in a controlled setting. If you’re looking to test more than one variable, have a look at this post on multivariate data analysis here. The comparable elements or items are labelled as A and B during the systematic test. Another name for the experiment is split testing or controlled randomized tests. It is a literal comparison of two items to find the element, statement or item that is better at attracting potential customers or getting the results that you want.

How It Works

Although it seems like a simple experiment, the testing strategy does require a little work to ensure that it is a controlled study. Before you attempt to determine if your new strategy is appropriate for your goals, set your control.

In A-B testing, the control element of the experiment is A. It refers to the original strategy that you employed, such as a button on a company website or a design that you use for the current advertisements that you send in the mail. Depending on your current strategy, the exact item that you are comparing to the new strategy will vary.

The B in an experimental test is the new strategy, item or element, such as a new design on the mailed advertisement or a different design for a website button to encourage visitors to click on the button. The first item acts as a control because you already know how well it is reaching your target audience. The second item is the strategy or change that you are testing for comparison purposes.

Compare the results of each item in the experiment for a set amount of time, such as one to two weeks. After you see if one color choice, design element or phrase on your website or advertisement is better than the other, you can make changes to ensure that your business is making the most out of the ads, website and tools that help you reach your target audience.

Reasons That A-B Testing is Important

Although it is obvious that testing the variables in your advertisements is essential to getting the results that you want, there are several reasons that split testing is recommended for businesses. A company can benefit from testing even the smallest variables on a website, email or even just an ad that you send in the mail.

A key reason to start adding A-B testing to your marketing strategy is the potential improvements to your website, advertisements or other elements of your business. It is not necessary to make everything perfect on the first try. The tests help you determine different ways that you can improve so that your customers are happy with the services that you offer. Even small improvements can make the user experience better.

Another reason to add A-B testing is the impact on profits. A business that makes changes and identifies the items that customers are looking for in a website, email or ad will see an improvement in the amount of profits that come in. Customers like to see changes, particularly if they make the experience more user-friendly or appeal to a personal aesthetic sense.

Although the impact on profits and the improvements to different marketing elements are essential reasons to use A-B testing, the impact on finding the right headlines and writing style is also important. A-B testing is not only related to the aesthetics and small changes. It can also be applied to finding the right language to communicate your products and services to your potential clients. Even if the headlines are similar, some potential clients may respond differently to minor wording changes than others.

The final reason to use A-B testing as part of a business marketing strategy is the real-time data. Instead of relying on reports about other businesses that have similar products or services, A-B testing gathers information about personal clients, blog readers or other individuals who happen across your company website or advertisement. Your customers might not have the same aesthetic sense or interests as the customers of a competing company. What works for that company might not be the best option for your business because of the variation in clients and client relationships that you develop. A-B testing helps you find the tools that work for your business rather than using the elements that work for a different company.

Making the Testing Easier

Although it is important to test your ads, website and wording, it is difficult if your hosting services are slow. Finding a great host is essential if you want your company to see positive changes during the test.

Take the time to find a host service that allows immediate access to your website and does not have any problems with downtime – this post on VirtualHosting.com has a list of hosting reviews you can read through. You do not want your potential customers to struggle to gain access to your website and it can help speed up your A-B testing process so that you can move forward at a faster rate.

Reaching your target audience is the primary goal of testing different products, services and tools. Among the tests that can help you find the right advertising strategy, wording or tools for your business is A-B testing. By using the original design features, element or idea as the control, you are able to establish if the new idea will work for your business or if it is better to make another change for the best results. The immediate data that you gather from your results allows you to find the right combination of colors, wording and design to reach the customers that are buying your products or services.

Guest Author Cormac Reynolds is a writer and a technology buff who writes about hosting and other areas of the web for VirtualHosting.com. He believes that A/B testing is too overlooked and wishes to showcase the importance of it.