“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” - Abraham Lincoln

You have a business idea. You need a website. You have no idea where to begin but you know that you need to strike while the iron is hot!

Stop. Don’t hire that logo designer yet. The very best initial use of your time is to begin with content development – you know, the stuff that you will put on the pages of your new, awesome website. Its time to ask yourself some tough questions:

• What unique need does your idea serve? What is the process for users?
• Who are your competitors?
• What services/products do other like businesses offer and how do they present their business?
• What is your budget and timeline for development?

Collect, Sort and Refine

The material assets such as a headshot, stock images (or an idea of what you are looking for), drafted content and page hierarchy are the basic building blocks that you must provide to your designer. How do you acquire these essential ingredients? Start by looking at what other business websites are communicating with their images, language and site designs. You don’t need to be an expert on user interface design. Make a note of what you like, what you don’t like, what part of the navigation was confusing or what you were missing from the experience. You are the user. This exercise will provide a foundation of experience for the design and content decisions that come next (ie. the “fun” stuff).

“I want it to say something like this…”

Depending on the magical powers your designer possesses, they may be able to help you fine tune content and make some design decisions with you now. Their expertise in web design and how users use websites will aid in the implementation phase of your crafted content. However, just as no accountant wants you to plop a shoebox full of receipts on their desk on April 14 – no designer will be happy about receiving an incomplete web planner, poorly defined site outline and hastily hand-written content notes. And, if you are budget conscious, you know how accountants have an extra fee for those shoebox clients? Yeah. Designers do that too.

The written word is the heart and soul of your content and your direct link of communication with your users. No amount of parallax scrolling will hide a lack of substantial content. Write, edit, rewrite and edit again.

Writing content for the web is an ongoing (fun!) process but its not for everyone. Depending on the size of your business and what you want to accomplish, hiring a writer may seem like an unnecessary expense. Perhaps – but if the success of your business depends on your ability to communicate something new or drive users to a specific action, you might want to rethink that. If you are confident in your ability to write and don’t mind spending a lot of time pouring over content, editing and rewriting – go for it. If you have better things to do, hire a writer.

If you build it, they might come, but first let’s do some testing.

Now that you have a clear idea of what you want to say, you can submit your developed content to your web designer (who will proceed with the magic making). Once your content is integrated into a website design (with images and forms and buttons), it is important to be aware that things will change. The web is dynamic. All browsers are different. And, the web user is a different audience than your mom or your cousin who is a graphic designer. Take a fresh look and initiate a new round of tests. Is the site intuitive? Is the message clear? Are the actions easy to complete? How does it feel?

Further refinements will be less painful when you have taken the time to build a solid foundation that contains:

1. Well-written content that clearly communicates your vision and the actions you want users to complete. Hire a writer if you need help.

2. An understanding of your competition and what makes your product/service unique.

3. Engaging images. Stock images can usually be spotted a mile away. That might not work for all businesses but if you CAN make stock images work, take the time and spend the money to pick good ones. If you “find” images on the web, make sure you understand copyright restrictions.

4. A snazzy headshot. Hire a photographer. As a business person you will need a professional headshot.

5. Productive communication and realistic expectations between you and your designer that keep your project on track!

by Emily

When searching for great images to use on your website you might see this, “Images may be subject to copyright.” It is safe to assume that ALL images you find in a Google (or other) image search are copyrighted by their respective creators or the website that is using them.

Although we may be more familiar with pirated downloads of movies and music, taking images and text-content from other sites is also – well, stealing. The internet makes it super-easy to download whatever we like and share it immediately (entire Tumblr accounts are based on this, not to mention Pinterest) but as content authors, we need to be aware that just because it is EASY to do that doesn’t make it any less illegal to distribute copyrighted material.

Check the originating website’s media and copyright information and contact them to ask permission if there is an image you simply must have on your own website. Respect the original content authors, the artists and photographers that created the images you are using, and ask for their permission. The same holds true for any written copy, even if it is a newspaper article about your business, you need to request permission to re-publish it on your site.

Stock Photography

If you can’t afford a photographer, one alternative is using stock images. These sites also offer some free downloads (You do need to sign up as a member to enjoy free downloads). Stock images may come with different types of usage rights so you do want to check what you are allowed to do with the image. Can you use it in print and web? Is there a limit to how many print reproductions you can use the image for? Are you allowed to alter the image? Look for are “Royalty Free” images or image rights that don’t expire. Some restrictions may include use on one site and you aren’t allowed to sell or distribute images that your purchase.

No cheese, please.

There are a lot of poorly conceived images in the world – don’t use them on your website. Good images should feel authentic, support your content, have some aesthetic sensibility and be non-generic looking. Images are there to help your readers visualize and use your content. Make sure they are sending the right message for your business.

http://us.fotolia.com/Info/Images/FreeImages

http://www.istockphoto.com/ - lower right column shows free photos

Creative Commons

This work by amintirivizuale.wordpress.com/ is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

You can search for a subject + “CC” – which stands for Creative Commons and make sure you follow the proper attribution when using your found images. Again, you will likely need to check the file size and rename any images you have “found” on another site before you upload it to your own website.

http://commons.wikimedia.org/wiki/Main_Page - Wikimedia Commons

http://www.flickr.com/creativecommons

It does seem that some types of sites – fashion, food and entertainment sites – are able to get away with pilfering images from each other. I suppose that these sites do provide free marketing for the obliging restaurant or retail store (or brand/celebrity) so, if their use of images support the brand, I don’t think they would ever be fined.

Give Credit Where Credit is Due

Link back to the original site and I would recommend including some text that says you will remove any images upon written request (a la YouTube - See their “Terms,” Section 8) and place that in your Privacy Notice/Copright.

…You do have a privacy notice, right?

Further reading:

Digital Millenium Copyright Act

Copyrights and Trademarks

Part 1: Image Optimization Saves the World

by Emily

Okay, so optimizing your images won’t save the world but it will make your website better/stronger/faster. When we all optimize for the web, we all get a better web!

For the web professional, W3 standards provide the founding principles of our web design practice. We forget, sometimes, that our clients (print design partners, and the people who ultimately use the sites and apps we build) may not be as familiar with the conventions that we consider to be the Gospel Truth of Building for the Web.

Each nano-second welcomes an unending drama of cats and kittens (now in animated GIF format), foodie snaps, vacation photos and birthday parties, all pre-nostalgia-ized with a hip filter and edge blur to the World Wide Web. Easy access to the tools that make and share our images means that most of us never, ever have to learn about pixels and proportionate image-sizing. However, if you own a website, and you want to use images on said website, well – it’s time that you bone up on some internet standards and basic media appreciation.

What are pixels and why do I care?

Example of cat dithering, from Wikipedia

“Each pixel is a sample of an original image; more samples typically provide more accurate representations of the original.” - Wikipedia

When you take a photograph with your digital camera that unedited image is considered a “raw” file. Generally, this is pretty big: 72 – 180 dpi or ppi (the Dots Per Inch value correlates with image resolution, in this case, pixels per inch) and  about 2500 pixels wide. Given that your average computer screen display for a website is closer to 1024 × 768 pixels, we can see that the raw file from your camera will always be too big to display as is on your website. If everything that goes up, must come down (everything you upload to your site must also be downloaded by the user) these uber-large images are only adding weight to your website – inevitably slowing it down and making it less user and search-engine friendly. Unedited, they are also a missed opportunity for you to use keywords as file names.

“I can change the size of my image while editing pages, is this necessary?”

While it’s true that some Content Management Systems (like WordPress) do provide image resizing when you upload media, dynamically creating a large, medium and thumbnail image for you to use on your site, the original image still exists in your upload folder. Over time this adds up to Gigabytes (a lot). Ideally, most images used within the context of a post or page, should be less than 100kb.

You can optimize your images for web use easily in Photoshop, Photoshop Elements (the low-fi version of Photoshop, just $99) and even using some FREE image editing tools like Gimp.

Remember, 72 dpi is web resolution*. The average content area for your website will be between 1000 and 600 pixels – adjust your images accordingly and be amazed at how fast your site loads!

*Recently, Apple has introduced the “retina display” for newer models of their products. I can see why consumers might enjoy seeing their movies and images in relatively hi-def.  As a web designer – not a fan. 

Good and Bad File Naming Habits

YES – there are BAD file names. Some bad file-naming practices can even break your website database so please, please – practice good file-naming habits.

Example of a Bad Image File Name:

NonesenseWord–_with–lotsofnumbers01830@generatedbymycamera.10.2012.03@10:00PM.png

There should never, ever be any dots/periods in the file name EXCEPT for the “.” just before the file extension (.jpg, .png, .pdf). Extra dots in the filename may prevent the image from being recognized and (worse) WILL (probably) BREAK YOUR DATABASE. “Hiding” the real file type by using multiple dots is something that hackers do to inject viruses (image.jpg.evilvirus). The database just sees to FIRST file extension and allows the malware to do its dirty business. So, try not to do that…

To be safe, no special characters should appear in your file names. This includes: &, +, @, %, and blank spaces. Only underscores (“_”) and dashes (“-”) are allowed in the file name. Naming your files with short, descriptive keywords (BEFORE you upload them) can help your search engine ranking AND it will help you locate your images at a later date. Keep it simple and descriptive of the image.

Example of a File Name that isn’t exactly bad – but isn’t good either:

174671_342041572496143_249184680_n.jpeg

The above is an example of what Facebook renames your image when you upload it to their database. So, if you are downloading something from Facebook to use on your site – give it a file name that will make use of keywords (feed the Search Engine Bots). Read more: What’s in a File Name?

You do need to open your image in a photo editor and “save as” to really change the files META DATA but you can click on any file on your desktop and the file NAME becomes highlighted. Simply change that bad file name to something short and findable like: hawaii-sunset.jpg

Photo Credit: (ewen and donabel) / CC BY 2.0

Part 2: Finding Images on the Web

by Emily

This August 25 and 26, WordCamp returns to Chicago. Hosted in the DePaul Student Center, Lincoln Park, this 2-day conference has something for everyone. WordPress tips and tricks for the professional developer, newbie WordPress themer or the business owner that wants to make better use of their WordPress powered website or blog. Opportunities to network, ask questions, share your trials and triumphs (as well as pick up some fun schwag) all for the minimal fee of $30. Hope to see you there!

“WordCamp Chicago brings together designers, developers, bloggers, small business owners, entrepreneurs and educators from all across the midwest.” - http://2012.chicago.wordcamp.org/

Questions? WordCamp Central: What to Expect

Get Registered

Follow on Twitter @WordCampChicago | Like on Facebook /WordCampChicago

Design & Dev for http://2012.chicago.wordcamp.org/ by Aaron Holbrook of A7 Web Design

by Emily

With social media, apps and mobile devices there is a proliferation of ways and means to promote your services and/or products. We know we need to focus more on creating great, unique and usable content but it is equally important to think about how we present that content.

“Conversion Optimization” sounds intimidating and a bit borg-like but it really just describes how people engage with your website. This “conversion” might mean signing up for your newsletter, subscribing to your blog, or purchasing your good or service. By using tools like Google Analytics and setting goals and funnels you can measure how effective your site is at this task and improve the user experience (aka. help them achieve the goal). Whatever your websites “special purpose” is, you generally want people to stay awhile, click on things and share stuff.

People ignore design that ignores people.

— Frank Chimero, Designer & Author

How not to do usability testing… (Image credit: blog.templatemonster.com)

The Big Red Buy Now Button, blinking text, multiple font styles and colors, and ALL CAPS EXCLAMATIONS!!! do not make people pay attention or feel welcome. They only make you look like the stereotypical used-car salesman.

Think of all the messages that we absorb on a daily basis: ads at bus shelters, billboards, apps on our phones, prime time TV commercials, the magazines we read during our cardio workouts, store windows glimpsed while we’re rushing back to work, etc. The modern world is a constant pulse of visual stimuli clamoring for our attention. And, whether we like it or not, our consumer brains absorb the implicit meanings and directions within those carefully constructed messages (even when we don’t notice it). Our behavior is then linked to design and we learn both good and bad habits which we apply to the next, similar situation. As designers, we really want try to elevate the reader’s experience and teach them to use our website in the most intuitive way possible. Effective calls to action are simple to understand, easy to complete, and aesthetically pleasing.

1. Let your reader know that they are in the right place. You have a lot of competition for readers attention from other websites, email pings and real-time demands. Your website homepage should let people know right away who you are and what you do with a graphic or text logo and concise, descriptive tagline.
2. Don’t talk down to your reader. People are more visually sophisticated than you might think, especially when it comes to the design (packaging) of your web content and calls to action.
3. No hoops, please. Focus the readers attention on a single task. Ask people to do something (preferably just one thing) and make it easy to achieve.

When designing your page layout you should be aware of how people scan a web page*. The findings from the Nielsen Norman Group’s usability studies defined an “F-shaped pattern for reading web content”. This valuable information can help you put your important content where your readers will see it and act upon it.

From Jakob Neilson’s “F-Shaped Pattern For Reading Web Content”

The eyetracking heat maps above also show that people don’t navigate websites in a linear fashion and they tend to scan rather than read pages. This can be hard to accept knowing the hours we’ve spent crafting our awesome content. On the bright side, this understanding can help us concentrate on a few good design principles to help keep the reader engaged.

• Remember the F-shaped pattern. Don’t put the most important prompts in places where readers are unlikely to go. The top-right banner section and all the way down (scrolling … still scrolling) at the bottom of your page should not be where you have your “Sign up for my Free Newsy Newsletter!” button.
• Consistent, clear navigation. Although the home page may be more of a “squeeze” page and have a different layout than your sites inner pages, make sure you use the same names for navigation and key concepts throughout the site.
• Keep the text and ideas simple. Not simplistic, just focus on the primary purpose of the given page. Don’t try to be all things to all people. If this is your “home” page, there might be a few distinct calls-to-action but you want to be aware that there is a user capacity ceiling. We humans can only do one thing at a time, too many options will overwhelm your reader and it becomes increasingly likely that they will guess wrong and leave.
• Design your pages in blocks of easily digested, satisfying content. Clear topic headings, concise writing and illustrative graphics/photos will help break up your content and allow readers to scan your page easily.
• Make doing things super-easy. Provide a simple prompt to help the reader find what they are looking for and complete the desired actions. For example, at the end of a blog post, add a text prompt or button to subscribe to your blog’s RSS feed. Helping your reader find what they are looking for quickly and easily makes them feel smart!
• Use CSS buttons for important action links within your page content. People understand and like buttons.
• Test it. Check out the Website Optimizer, Google’s free website testing and optimization tool. Google has loads of resources through their Website Optimizer blog, YouTube channel and “Google Conversion University”.

And, finally, all web designers and developers must read Steve Krug’s fundamental (and refreshingly short) book, “Don’t Make Me Think: A Common Sense Approach to Web Usability”. This is also an excellent resource for website owners to educate themselves.

* This is somewhat variable depending on the type of website.

Featured Image Credit:  The Innocent Eye Test, 1981, by Mark Tansey - ”In Tansey’s painted metaphor for the perception of art, we are the cow, and the scientists want to know how and what we see — hardly the stuff of Frank Stella’s famous dictum ‘What you see is what you see.’” – Judi Freeman

by Emily

CORE WORDPRESS UPDATE: WordPress 3.4 is finally here! Dubbed “Green” in honor of guitarist Grant Green, this release includes significant improvements to theme customization, custom headers, Twitter embeds, and image captions:

“… We’ve expanded our embed support to include tweets: just put a Twitter permalink on its own line in the post editor and we’ll turn it into a beautiful embedded Tweet. And finally, image captions have been improved to allow HTML, like links, in them…”

Read more and watch a short video of highlighted features on the WordPress.org site.

To learn more about updating your own self-hosted WordPress site go to The Codex…

by Emily

A series of recent malware attacks have targeted Macs, infecting hundreds of thousands of computers. U.S. CERT recommends that Mac users review the security updates issued by Apple to address these new threats. You can also click on the apple icon in top left of your screen and click on “software update” to make sure that your computer is up to date. OnGuardOnline.gov is the federal government’s website to help you be safe, secure and responsible online, an excellent resource with very readable tips for for non-techies. You can sign up on their email list for updates.

Security and your WordPress Site

Malware (short for “malicious software”) is a major security issues for website owners, with WordPress sites being especially targeted. You CAN minimize your risk.

• Make sure you are secure locally – Keep your computer up to date and install an anti-virus solution.
• Make sure you are connecting securely – Use an SSL whenever on an unverified connection, consider using sFTP whenever possible.
• Check out your hosting company – How many blacklisted sites do they have or are infected with Malware?  Cheapest definitely isn’t always best.
• UPDATE UPDATE UPDATE – It’s important to have the most recent version not only of WordPress installed, but also of all your plugins (AND your web browser)

According to security software firm Kapersky, the recent Apple Mac Flashback Trojan that made such a splash in the news recently can most likely trace its roots back to infected WordPress sites.

Internet security firm Sucuri has stated that in each case they have analyzed, the site was either running an outdated version of WordPress or a vulnerable plugin.

Like many modern software packages, WordPress is updated regularly to address new security issues that may arise. Improving software security is always an ongoing concern, and to that end you should always keep up to date with the latest version of WordPress. Older versions of WordPress are not maintained with security updates. Read more about hardening WordPress.

Safer Surfing

Your browser is just like any other software application – it needs to be kept up to date.

Google Chrome
Google Chrome includes features to help protect you and your computer from malicious websites as you browse the web. Chrome uses technologies such as Safe Browsing, sandboxing, and auto-updates to help protect you against phishing and malware attacks.

Learn more: https://www.google.com/chrome/intl/en/more/security.html

Mozilla Firefox
Firefox also using Safe Browsing and sandboxing, private browsing, anti-malware and anti-phishing, Customized Security Settings, Secure Software Installation, and more.

Learn more: http://www.mozilla.org/en-US/firefox/security/

Safari, the default Mac OS browser
For the new OS Lion, sandboxing has been added – a security feature that helps prevent malicious websites from tampering with your computer – but Chrome and Firefox are still far more comprehensive in their protections.

Learn more: http://www.apple.com/safari/whats-new.html#privacy

Internet Explorer
IE is the default browser in PC’s. If you have updated your browser to IE9 you should be okay. Unfortunately, some older computers may not be able to update to IE9. Firefox and Chrome are available for PC and we recommend you use one of them instead of IE. A lot of usability and security flaws even in IE 8.

Compare versions of IE: http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/compare-browsers

SECURE EMAIL

Spam is anonymous, unsolicited bulk email – it is effectively the email equivalent of physical junk mail delivered through the post. It is sent out in mass quantities by spammers who make money from the small percentage of recipients that actually respond. Spam is also used for phishing and to spread malicious code.

Rule #1 – 10: Never respond to spam. Most spammers verify receipt and log responses. The more you respond, the more spam you will receive. This includes clicking on “unsubscribe” links in spam. Don’t click on anything. Just delete it.

Make sure that you use the latest version of your web browser and that any security patches have been applied.

Use strong passwords everywhere.

I know, its a pain to create and remember your strong password. But, in this case – an ounce of prevention is really, really worth the pound of cure. If your computer is infected you are putting all of your family and friends at risk – anyone who is in your address book is potentially exposed.

No matter how many walls are placed around your machine, there is always a key for complete access: your password. There are countless programs that attempt to determine passwords, both by guessing common ones and by randomly generating possibilities and trying them all, or a combination of the two.

The best defense is a “strong password”. A strong password is a combination of numbers, uppercase letters, lowercase letters, and, if possible, other characters. This makes the password nearly impossible to guess in a reasonable amount of time, and ensures that all the hard work you put into keeping your machine well-defended does not go to waste. The longer the password, the harder it is to guess.

Of course, as passwords get closer to random numbers and letters, they also get harder to remember. That doesn’t mean that you have to fall back on a weaker password, though. You can m15peLL w0Rdz intentionally, or use a mnemonic device like a strong passphrase. Always be sure to change your password if you think that there’s a chance that someone else has seen it.

Guidelines for Creating Strong Passwords

What is a Strong Password? A strong password is designed to be complex and therefore difficult to guess or crack. To be sufficiently complex, it must:

• be 8 characters or longer – 15 is considered optimal
• use a combination of upper and lower case letters, and
• include at least one numeric and/or special character (&, ?, @, etc.), punctuation, and spaces.

A pass-phrase or sentence is a very secure way of creating passwords that are both hard for others to crack and easy to remember by you.

Test how strong your password is: http://www.passwordmeter.com/

Generate a STRONG password here: http://strongpasswordgenerator.com/

Some tricks to strengthen a password – this is just an example, you can create your own rules for this:

• Replace all the ‘a’ with @
• Replace all the ‘s’ with $
• Repalce any space with %
• Replace any ‘o’ with 0
• Replace any ‘i’ with !

Finally, just like all hard drives will fail – all passwords will eventually be cracked. It is recommended that you change your password every 60 – 90 days.

RESOURCES:

Secure your local computer! FAQ’s, resources and software: http://usa.kaspersky.com/resources/faqs

WordPress theme and plugin creator iThemes recently partnered with Sucuri (web security service) created a WordPress Security video tutorial specific to WordPress websites: Lockdown WordPress: Security Tips from Sucuri. 

Scan your website for malware attacks or issues for free here: http://sitecheck.sucuri.net/scanner/

Keep your Google browsing private, from Read Write Web.

Protect yourself from spam: http://usa.kaspersky.com/resources/spam

Secure your Gmail account: http://howto.cnet.com/8301-11310_39-20070429-285/how-to-secure-your-gmail-account/

by Emily