Are we ready?
Monday, February 28, 2011
Friday, February 25, 2011
Get Busy With Bing Webmaster Tools - Website Magazine -
Thursday, February 24, 2011
What Marketers Need to Know About Facebook's Switch to iFrames
As we said before, IFrames are the way to go for Facebook page customization.Is it ready for Prime Time?
Wednesday, February 23, 2011
Understanding Image Resolution - Digital Graphics - Photoshop - Lanoie.com -
Photoshop
Digital Graphics
Image Resolution
Resolution in an image determines how many pixels per square inch that image contains. This is expressed as PPI (pixels per inch). PPI is also referred to as pixel density.
For example, an image resolution of 72 ppi means that there are 72 pixels in a one-inch row and 72 pixels in each one-inch column of an image. Therefore, theoretically there are 5,184 pixels in one square inch (72x72=5,184). The necessary resolution will differ based on the desired output for the image. An image for a Web site can be between 72-96 ppi but the industry standard for the resolution of Web images is 72 ppi.
PPI and Monitors Explained
When referring to a computer monitor, this concept of PPI can be confusing to understand. PPI is actually a very relative term when talking about monitor resolution. 72 ppi is really more of an industry standard than an actual measurement.
Different Monitor Sizes
There are many different sizes of monitors available. Most CRT monitors come in sizes such as 15", 17", 19", 21", and even 22". Modern LCD monitors come in all kinds of shapes and sizes, with "wide screen" monitors becoming very popular. (Monitor dimensions like those just listed are always measured diagonally, not across the width of the monitor.) Some of these monitors come in sizes of 20", 24", 27" and even 30" or higher.
What Does This Mean in Terms of PPI?
Imagine that you have 2 monitors on your desk. One monitor is a 21 inch display, while the other is a 19 inch display. Both have their resolutions set to 1024 x 768. Since one monitor is obviously larger than the other, the actual PPI would be different between the 2. They are displaying the same number of pixels, but the 21" is displaying them over a larger area. Therefore, since there are more inches, there would be fewer per inch. For example: The 21 inch monitor is actually displaying around 61 ppi, while the 19 inch monitor is actually displaying about 71 ppi. The more pixels you have over a smaller area, the more PPI you have. If you are running a much higher resolution such as 1600 x 1200 (which is favoured by many designers) you could be running a PPI closer to 100, but again, depending on your monitor size. As you can see, the actual PPI for a computer monitor varies quite a bit, depending on the actual monitor size and the screen resolution.
Mac VS PC
If you go looking for information on this very subject, you may find a lot of things like "Macs display at 72 ppi, and PCs display at 96 ppi". This is only partially correct. As mentioned above, PPI for monitors is a very relative measurement. However, the operating system needs to have some kind of idea what PPI it is using. Therefore, it can be said that the Mac assumes it is at 72 ppi, and the PC assumes it is at 96 ppi. These settings really only affect the operating system's handling of things like fonts and its own graphic elements. (The reasons for the difference between operating systems are too great to go into here.)
This discrepancy between Mac and PC has no effect on Web graphics however. If you're using Photoshop with your monitor set at 1600 x 1200 pixels, and you create a graphic that is 400 pixels wide, it would take up exactly 1/4 of your screen width whether you were using a Mac or a PC. In other words, 400 pixels is 400 pixels, no matter where it's being shown.
Pixels are The Most Important Thing
If you are creating graphics meant to be shown on a computer monitor (such as Web graphics), you only need to concern yourself with pixels. As mentioned above, actual PPI is a hard thing to pin down. Luckily for most of us, there's the previously mentioned standard that programs like Photoshop use: 72 ppi. Keep all your graphics at 72 ppi unless you are going to print them.
Resolution and Pixels
As already mentioned, pixels are the most important thing. You could set the PPI of an image to anything you like (more on how to do this later), but if they both contain the same number of pixels, the file size and display size won't change. In fact, most Web browsers are incapable of displaying anything other than at 72 ppi. Therefore, only pixels are considered when displaying a graphic on a Web page. If your image is 400 pixels wide, it will still be shown as 400 pixels wide, no matter what the PPI of the image is set to.
Since pixels are so important, it must also be mentioned that too many can be a bad thing. For example, let's say you are working with a 300 ppi image at 3000 by 1800 pixels. Photoshop might report this image as 10 inches by 6 inches. If you printed it, it would fit nicely onto a page at that size (see Resolution and Print below). However, if you tried to place it into a Web page, the browser displaying such a page would not show the image at its intended size. It would essentially ignore the 300 ppi part. It would only look at the pixels, and assume 72 ppi was being used. Therefore, your image would expand to the full 3000 pixels wide, which would be much, much larger that your entire monitor's display. This is why sometimes when you email a picture from a digital camera, the recipient sees a huge picture. (Most email clients work a lot like Web browsers.)
If your original graphic came from something like a digital camera, it will most likely be much too large for the Web, and you will need to bring it down to the correct size: 72 ppi, and probably a smaller amount of pixels (more on how to do this later).
The Photoshop Save for Web and Devices feature (more on this later) works hand in hand with the Web browser. It will take any image you save and automatically change it to 72 ppi, without adding or removing any pixels. However, keep in mind that like the Web browser, it will spread all the pixels out until they are at 72 ppi.
File Size
Since the file size of an image is only dependant on the number of pixels it contains (as well as its compression, but more on this later), changing the PPI of an image without changing the number of pixels it contains will not change the file size.
Consider the two images below.
Resolutions Compared 200x200px - 300 ppi, 60 kb 200x200px - 72 ppi, 60 kb Both have pixels dimensions of 200 x 200. One is at 300 ppi and the other at 72 ppi. There is no noticeable difference in quality and the file size of the images is identical.
Therefore, PPI is really not that important for graphics meant for a computer monitor. Keep the PPI at 72 and everything will work just fine.
Resolution and Print
It is in the domain of print that image resolution makes a critical difference. Different printers have different resolutions. Printer resolution is measured in dpi (dots per inch). Printed material is literally composed of dots of ink. The size and density of these dots determine the quality of the output. An image to be printed in a newspaper will be around 170 ppi. If you've ever held a magnifying glass over a newspaper, you could see the individual ink dots. Magazines are output at 266-300 dpi. High quality books are output at even higher resolutions. So image resolution is important when you're creating images for print but irrelevant as far as Web images are concerned. Photoshop's default image resolution for print is 300 dpi.
Since this course is about producing images for the Web, we won't delve into the considerations for print too much. However, there are a couple of things to keep in mind.
- PPI versus DPI
- Technically, dpi applies to printer resolution but you will see it used interchangeably with ppi in different software and resource materials. For consistency, we'll stick to ppi in this course to describe monitor and digital image resolution.
- Print Size
- While image resolution has no effect on the size of an image displayed in a browser, it has a direct effect on the size of printed images. We'll touch on this more later when we discuss the resizing of images.
Printing Web Graphics
Since standard print resolution is so much higher than standard Web resolution (72 ppi), most Web graphics will not print very well on even a home printer. Printing uses a much higher resolution than monitor (Web) graphics, so the pixels are quite noticeable when printed. This is why Web graphics tend to look "blocky" when printed. Therefore, it's easy to understand why Web graphics are not very suitable for high quality printing.
Image Resolution Summary
- Digital image resolution is measured in pixels per inch (ppi).
- PPI is also called pixel density.
- The industry standard resolution for Web images 72 ppi.
- PPI can vary from monitor to monitor, depending on the monitor resolution.
- When creating graphics for a monitor, only the pixel size is important.
- Even though Macs and PCs report different PPI's, this has no bearing on how your Web graphics will display.
- The resolution of an image has no effect on its file size.
- Printer resolution is measured in dots per inch (dpi) which reflects the number of dots of ink printed on a one-inch line.
- Print graphics can range from 170-300 ppi or higher.
- Image resolution affects the print size of an image.
- Web graphics don't print very well, because 72 dpi is far too low of a resolution for print.
We need to understand PPI and why 72 is considered the Industry standard for the web
Monitoring Social Media in 10 Minutes a Day
Tuesday, February 22, 2011
25 Video Tutorials for Getting Started in Web Design | Speckyboy Design Magazine
SpeckyBoy, part of the Smashing network is a great resource for Web Design. Check the tutorial for Beginner JQuery.
Saturday, February 19, 2011
Friday, February 18, 2011
SMO Growing Faster than SEM - Facebook Dominates
SMO
SMO is Social Media Optimization. SEM is Search Engine Marketing. SEO is Search Engine Optimization. Don't you just love technobabble?
Wednesday, February 16, 2011
Twitter Tips - The basics: Monitor, Engage, Follow -
Twitter Tip: Monitor, Engage, Follow - @hubspot
As Twitter becomes more and more mainstream - the business benefits of Twitter become clearer.
An Event Apart Atlanta 2011
Three Days Of Design, Code, And Content
An Event Apart Atlanta features 12 great speakers and sessions. Following the two-day conference comes A Day Apart, an intense learning session on Content Strategy led by Kristina Halvorson (author, Content Strategy for the Web). You can register just for An Event Apart or A Day Apart, or save $100 when you sign up for all three days.
Sunday, June 12
6:00pm–??pm
WebINK Pre-Funk
Sponsored by Extensis
Seattle, WA 98121
-->Flying in on Sunday? Great! Be sure to join us and other web enthusiasts for an evening of cocktails and appetizers. While you're there, you'll even have a chance to win an iPad. See you there! Venue details to be announced.
Monday, June 13
9:00am–10:00am
Elements of Rich Web Experience
Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.
What makes a website great? What transforms an ordinary site into an extraordinary experience? Is it the content, the graphic design, or the subtle UX “touches” that bring a website to life and transform it from a radar blip to a beloved destination? In a word, yes—it takes all the above to make your site stand out from the pack. Study content, design, and UX details of great and not-so-great sites to learn tricks that can inspire devotion and transform your site into a source of endless inspiration.
10:15am–11:15am
Crafting the User Experience
Sarah Parmenter, You Know Who
As we journey through life we are moulded into various experiences and influenced by design around us. What makes us click “buy” on one website compared to another? What small design details can we add to truly enhance our design for positive benefits? How can design shape our everyday interactions without us realising? Sarah will serve up a large helping of practical UI advice for both mobile and the web, through her experiences as a User Interface Designer.
11:30am–12:30pm
On Web Typography
Jason Santa Maria, Mighty
Achieving a thorough grasp of typography can take a lifetime, but moving beyond the basics is within your reach right now. In this talk, we’ll learn how to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.
12:30pm–2:00pm: LUNCH
2:00pm–3:00pm
Mobile Web Design Moves
Luke Wroblewski, author, Web Form Design
Mobile dances to a different beat. Learn how to transition what you know about designing for the Web to Mobile and pick up a bunch of new moves along the way that’ll help can rock the mobile Web.
3:15pm–4:15pm
A Content Strategy Roadmap
Kristina Halvorson, author, Content Strategy for the Web
How to make a website: discover, define, design, develop, deploy. It’s a familiar framework for most of our project processes. Now along comes this content strategy thing. Sure, it sounds like a great idea, but how does it fit in with what we’re already doing? Kristina will walk us through a typical website project to demonstrate why, how, where, and when content strategy happens.
4:30pm–5:30pm
Smoke Gets In Your Eyes
Andy Clarke, author, Hardboiled Web Design
Animation on the web has traditionally been low-fidelity and shares much common ground with the work of early animators. Web animations have always been the domain of Flash because equivalents couldn’t easily be created using open standards. That is until now, with ever increasing support for CSS3 Animations. Learn about the latest CSS animation techniques and how to create effective, accessible fallbacks for all browsers, including those with limited capabilities.
7:00pm–??pm
Opening Night Party
Sponsored by (mt) Media Temple
Belltown Pub
2322 1st Ave (between Bell St. and SR99)
Seattle, WA 98121
(206) 448-6210
-->Media Temple’s opening night parties for An Event Apart are legendary. Join the speakers and hundreds of fellow attendees for great conversation, lively debate, loud music, hot snacks, and a seemingly endless stream of grown-up beverages. Venue details will be announced in April.
Tuesday, June 14
9:00am–10:00am
The CSS3 Anarchist’s Cookbook
Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.
A decade ago, Eric first showed the world how to use CSS for evil. Now, thanks to CSS3, we have even more powerful weapons at our disposal, and the time has come to make use of them. Join Eric for a live-without-a-net nuts-and-bolts tour of the dark side of CSS and see exactly how to torment friends, relatives, and co-workers with cruel tricks both subtle and gross. Start practicing your evil overlord laugh now!
10:15am–11:15am
Design Principles
Jeremy Keith, author, HTML5 For Web Designers
All software is inherently political, reflecting the biases and beliefs of the people behind it. These beliefs can be made explicit through the publication of design principles: pragmatic rules of thumb that underpin a shared endeavour. Find out how important good design principles are to any project, whether it’s a website, a framework, or the World Wide Web itself.
11:30am–12:30pm
Transforming Ideas into Interfaces
Aarron Walter, author, Building Findable Websites
You’ve got ideas swimming in your head about the next website or web app you want to make, but translating abstract thoughts into a usable, successful interface is no easy task. How do you make sure you’re designing something relevant to your audience? Should you wireframe, prototype, or both? How do you build an interface quickly while planning for the future? Aarron will share practical advice from the interface design school of hard knocks that will help you make your ideas a reality.
12:30pm–2:00pm: LUNCH
2:00pm–3:00pm
The Secret Lives of Links
Jared Spool, Founding Principal, User Interface Engineering
Links are the molecular bonds of our web sites, holding all the pages together. They are the essence of a web site. Yet, what do we really know about them? If you create great links, your users easily find everything they need on your site. If you do a poor job, your users will find your site impossible or frustrating. We never discuss what truly makes a good link good. Until now. Jared will show you the latest thinking behind the art and science of making great links. Join him for this entertaining and amusing look at the secret lives of our site’s links.
3:15pm–4:15pm
The Responsive Designer’s Workflow
Ethan Marcotte, co-author, Designing With Web Standards 3rd Edition
There’s been a lot of great discussion about responsive web design: merging media queries and flexible, grid-based layouts to create more adaptive, universal designs. But how does a responsive approach affect our design workflow? And when is responsive design right for your project? We’ll look at sites and strategies to try and answer these questions, and learn to become more responsive designers.
4:30pm–5:30pm
To Be Announced
Jeff Veen, author, Art & Science of Web Design
Jeff Veen’s presentation this year is so special, not even we know what it’s about. But we do know two things: 1.) It will rock. 2.) We’ll be as mesmerized as the rest of you, sitting there with eyes wide and jaws on the floor, drinking up the wisdom and inspiration Jeff Veen so masterfully dispenses.
6:00pm–??
Typekit Party
Sponsored by Typekit
Atlanta, GA
-->Our closing night party is sponsored by Typekit. Details coming soon!
Wednesday, June 15
A Day Apart: Content Strategy
Dealing with web content is hard. It’s complicated, expensive, time-consuming, and often overwhelming. Good news: the practice of content strategy gives us tools and processes that can help bring order out of your content chaos. But how does it work? Who can do it? What if your clients and boss don’t want to pay for it?
To answer these questions and more, Kristina Halvorson will spend an entire day with you doing a deep dive into the process and tools of content strategy. She’ll also speak directly to its challenges (how to overcome) and opportunities (how to seize them!).
- Learn about the fundamentals of content strategy and how to explain them to your stakeholders
- Get an up-close look at content strategy processes and associated key deliverables
- See examples of successfully executed content strategies on websites and cross-platform
- Work with other workshop participants to hone your new content strategy skills
- Discover Kristina’s secrets to selling content strategy to clients or within your organization
A Day Apart Atlanta follows An Event Apart Atlanta and runs 9:00am - 5:00pm on Wednesday, June 15. You can register online and save over $100 when you sign up for both An Event Apart and A Day Apart.
Connect Online
Stay in the loop! Follow us on Twitter, become a fan on Facebook, or subscribe to our mailing list.
Great Hotel, Special Savings
The InterContinental Atlanta has arranged a special room rate of $199 with complimentary internet for AEA attendees. To get these savings, call (404) 946-9000 and request the “special An Event Apart room rate.”
The InterContinental Buckhead Atlanta sets high standards of quality with international flair and southern hospitality. This non-smoking hotel on Peachtree Road puts you close to the Buckhead community’s thriving business and shopping districts, and provides easy access to attractions such as the Georgia Aquarium, the High Museum of Art, the New World of Coca-Cola, and the CNN Studio Tour.
Zeldman nirvana for web people
Just How Open Is Your Internet? [INFOGRAPHICS]
We in the US like to think our internet is completely open. Is it? How do we compare with other countries