A few useful tools for building and testing websites.

spoon.net/browsers: Virtual browser sandbox for testing webpages. It allows you to run any browser from the web without the need to install it on your computer. Spoon.net has additional productivity resources on their site, and provides a wide selection of additional cloud based services besides the browser tester.

dirtymarkup.com: Effortlessly clean up your messy HTML, CSS, and JavaScript. Just paste it in, choose your prettification, and Voila!

http://www.google.com/webmasters/tools/richsnippets: Google Webmaster Rich Snippets Testing Tool

cssfontstack.com: CSS font stack resource :: A complete collection of web safe CSS font stacks and font CSS, conveniently set up so that you can just copy to clipboard.

thedesigngrid.com: This links page has a nice collection of resources for designers, web developers, motion graphic artists and photographers. Resource links include books, plugins, templates, font foundries, blogs, and more.

This site, queness.com, has a post with descriptions of 16 Essential Web Development Online Tools. They have additional posts with tools and resources for HTML, JQuery, image editing, and more. Worth checking out.

The mobile app is going the way of the CD-ROM

Silicon Valley’s war for the mobile web

Yahoo dives deeper down the Node.js rabbit hole with open-source Mojito

LinkedIn’s new iPad app, which they developed using HTML5, node.js, and backbone.js.

How LinkedIn built its new iPad app

How LinkedIn used Node.js and HTML5 to build a better, faster app

The LinkedIn engineering blog, which has some very nice articles on how they used HTML5 in developing their iPad app

http://engineering.linkedin.com/blog

LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5

LinkedIn For iPad: using local storage for snappy mobile apps

Blazing fast node.js: 10 performance tips from LinkedIn Mobile

Resources

node.js
http://nodejs.org/

Backbone.js
http://documentcloud.github.com/backbone/

underscore.js
http://documentcloud.github.com/underscore/

Mojito
https://github.com/yahoo/mojito/

Here is a sweet interactive version of the same chart:

Interactive Colours in Culture Chart.

Fun comparison: Here is a chart from colorlovers.com showing the colors of the top 100 web brands: The Colors of the Web Infographic:

View other nifty infographics about color, the web, and social media on my Pinterest Infographics Board at pinterest.com/starwolf13/infographics.

It is definitely worth looking at how Pinterest can be integrated with emails, and leveraged to support email marketing campaigns.

One way to promote social sharing for a brand is to offer the option to follow the brand on Pinterest along with the brand’s other social network presences, including sites such as Facebook, Twitter, Tumblr, and/or the brand’s blog, and to share the entire email either by forwarding or by sharing a link to the web version on twitter or facebook.

A brand can also offer subscribers the opportunity to share the email or its content by Pinning it onto their own Pinterest boards.
With this option, marketers can specify the image being shared, what url that Pinterest will link back to (for example, a landing page, or the product page on a brand’s website) and a suggested description or Call to Action for the image being pinned . This is relevant, as A call-to-action pin description can generate an 80% increase in engagement.

Note that we have the ability to specify the URL of the image being shared. This enables the user to Pin a different version of the image from the one in the email: for example, the email image may contain a “Pin this” call to action, while the pinned version does not show it. The content to be pinned could be a copy of the entire email, the main visual of the email creative (the Hero image), or a selection of images from within the email (such as thumbnails of individual products). The image being pinned does not have to be exactly the same as the one in the original email.
Once the ‘Pin it’ button in the email is clicked, the user has the option to post the product onto a Pinterest board, and has the option to share that post on Facebook and Twitter.

This increases exposure for these mailings. On Pinterest, the shared content will show up on their news stream where it will be visible to their followers and potentially to anyone viewing Pinterest’s everything or category feeds. Other users can then repin the image onto their own Pinterest boards. These Likes and re-pins can then extend visibility. By including a visible link to the website in the description, there is an additional potential increase in traffic.
Pins can also be automatically cross-posted on Facebook and Twitter, if the user checks the appropriate options.

Note: While the image displayed in the email can be changed even after the email has been sent (by uploading a new image and overwriting the original version), once an image has been Pinned, you cannot change or update the image on Pinterest.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
How it Works:
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

You will need from one to three images, depending on what image you wish to be actually Pinned on Pinterest.
• If you want them to Pin the same image you are using in the email:
You need only the url of the image to be shared and the url you want it to link to once it is Pinned.
• If you are sharing an onsite image:
You need the url of the image for the email, the url of the image being shared, and the url you want it to link to once it is Pinned.
• If you are using two versions of the image, one in the email and one to be pinned:
You need the email and Pin versions both to be live, and the url you want it to link to once it is Pinned.
• If you want them to pin a copy of the entire email:
You will need the image in the email with the CTA and a jpg of the entire email to be pinned, and the url you want it to link to once it is Pinned.
Again: Once an image has been Pinned, you are unable to change the image on Pinterest, because Pinterest places on their site a copy of your image: it does not link to the image on your server.

++++++++++++++++++++++++++++++++++++++++++++++++
THE CODE: Writing the markup for Pin-able images.
++++++++++++++++++++++++++++++++++++++++++++++++
Adding a pin-able image in an email requires the insertion of a snippet of code (shown below) into the <a href tag for the image being shared. This can be set up similar to a standard <a href tag surrounding the image or with an image map so that different calls to action can be included on a single image. Note: while image mapping now works across most email clients as of March 2012, the standard <a href tag is the preferred implementation.

When implementing the code examples below, replace [1] with the url you want the pinned image to point to, [2] with your image url, [3] with your suggested description for the Pin (500 characters maximum) and [4] with your tracking code. If you are not using a tracking code, it is safe to delete the &[4] portion. also be sure to change the example image path to your actual image path.

The email Pin markup structure with the image contained in the <a href tag:
<a href=”http://pinterest.com/pin/create/button/?url=[1]&media=[2]&description=[3]&[4]”> <img src=http://yourdomain.com/yourimage.jpg alt=”Pin me to Pinterest” title=”Pin me to Pinterest” style=”display:block” ></a>

This code shows the email Pin markup structure with image mapping and a second area on the image mapped to a website url. Note that image mapping is NOT recommended in best practices for email code, as it is not fully supported in all email clients. I’m showing this here solely as proof-of-concept.

<map name=”PinableImage”><br /> <;area shape=”rect” coords=”12,15,295,95″ href=” href=”http://pinterest.com/pin/create/button/?url=[1]&media=[2]&description=[3]&[4]” alt=”Pin to Pinterest” title=”Pin to Pinterest” class=”border” /><br /> <area shape=”circle” coords=”243,177,48″ href=”http://yourdomain.com” alt=”your alt text” title=”your alt text” style=”border:2px solid #f0c0;” /><br /> </map><br /> <img src=http://yourdomain.com/yourimage.jpg alt=”Pin me to Pinterest” title=”Pin me to Pinterest” style=”display:block” usemap=”PinableImage” ></a>

Once you have added your own url, image, description, and tracking code, your Pinterest code should look similar to the example shown below. This code is what I used to generate the example Plant Hardiness Pin demonstrated here.

<a href=”http://pinterest.com/pin/create/button/?url=http://coyotecreation.com/garden/2012/01/usda-plant-hardiness-zone-map-updated-im-in-zone-6b/&media=http://coyotecreation.com/garden/wp-content/uploads/2012/01/OH.jpg&description=Updated USDA plant hardiness zone map, now with improved accuracy + detail, plus recent warming trends&navtype=newsletter&source=123456&c=email”>

Resources:
35 Statistics That Fuel the Battle Between Pinterest and Google+
http://blog.hubspot.com/blog/tabid/6307/bid/32362/35-Statistics-That-Fuel-the-Battle-Between-Pinterest-and-Google.aspx#ixzz1s8C6rkZL
ebook: Google Plus vs Pinterest
http://www.hubspot.com/google-plus-vs-pinterest-battle/
Pinterest marketing statistics:
http://socialfresh.com/pinterest-infographic/

Pinning to Pinterest from Email: toys-r-us case study
http://www.emaildesignreview.com/email-design-best-practice/pinning-to-pinterest-from-email-toys-r-us-case-study-1292/

www.fuzzimo.com: An extensive collection of beautiful high quality free resources for personal or commercial use. Photoshop files, textures, high resolution scans and photos. I used fuzzimo’s scans of old airmail envelopes on my current coyotecreation.com site design.

photoshopisland.com: Nice collection of layered PSD files, Photoshop brushes, and calendar templates. Regularly updated with new freebies.

www.obsidiandawn.com: I love love love Obsidian Dawn. Tons of Photoshop brushes, patterns, web graphics, tutorials..all kinds of graphic design resources, all for free. Serious awesomeness.

http://www.graphicsfuel.com/2010/07/free-resources-for-massive-collection-of-photoshop-brushes: Links to blog posts containing collections of photoshop brushes

*Note: Always check the terms of use on a site before using any resources.

browsershots.org: Browsershots is a free open-source online web application that makes screenshots of your web design in different operating systems and browsers.

http://alexw.me/ipad2/#!safari: This site is an iPad simulator for mobile testing, so you can get a nice general look of your mobile site.

snapito.com : Free site to generate a screen capture of a web-page. Snapito has options to take a screenshot and post it to Pinterest, or create and download a timestamped snapshot of the website. Also check out pinstamatic.com that you can use to add cool things to your Pinterest boards, such as Twitter profile links, Sticky Notes and Websites.

http://phpweby.com/services/robots: This free tool tests and analyzes a URL against the domain’s robots.txt file. The tool will fetch the robots.txt file from the domain and it will parse (pattern matching supported) it to check whether the URL is allowed to be accessed by robots like googlebot, yahoo slurp, msnbot and others.

http://www.websiteoptimization.com/services/analyze/: Website Performance Tool and Web Page Speed Analysis

http://tools.pingdom.com: Pingdom offers several site testing resources:
1: test the load time of a page, analyze it and find bottlenecks.
2: Test DNS servers and settings for a domain name to check if its DNS servers are configured correctly.
3: Test network connectivity to a server – perform a Ping or a Traceroute on a host name or IP address.

Boxes and Arrows
http://www.boxesandarrows.com/view/printing_the_web

Tutorial: Printing using JavaScript
http://nice-tutorials.blogspot.com/2009/05/print-using-javascript.html

StackOverflow on printing using JavaScript and dojo
http://stackoverflow.com/questions/764978/print-using-javascript
http://stackoverflow.com/questions/2396027/dojo-dijit-and-printing

Eric Meyers on A List Apart (old article but still has relevance)
http://www.alistapart.com/articles/goingtoprint/

Responsive Web Architecture and Design means that one reshapes the design and experience to accommodate what  site visitors need based on their screen size.

This approach utilizes media queries along with a flexible grid and flexible images to create a layout that is responsive and adaptable to the user. Using a flexible grid for the design allows the design proportions to remain intact.

Fluid Layouts and Flexible Grids

“fluid layouts are the new black” …and one good reason is that they work on any screen size, including mobile.

Pixel values may change but the proportions stay the same. For a Fluid Grid, express  the ratios of the grid in percentages instead of pixels.
Use the formula: Target / Context = Result (em)

Making Life Easier: This site contains a pixel to em converter: http://pxtoem.com/

Flexible Media CSS Syntax

Set the default font size to 16px.
body {font-size:100%}

Keep an image, video, audio, etc no bigger than its container.  This works in everything except IE 7 and below. IE 7 will require proprietary CSS selectors.
img {max-width:100%;}
video, audio, object {max-width:100%;}

CSS3 Media Queries

CSS2 allowed one to specific which website styles and content showed for different device types. This has been primarily used to offer a stripped down or text only version of a site’s content for printing.

With CSS3  Media Queries, one is now able to specify a design and layout by device capability instead of device type. With these, you can then check for and write the CSS to accomodate the specific requirements for devices like smart phones and tablets.

CSS3 Media Queries include checks for:

• width and height (of the browser window)
• device width and height
• orientation – for example is a phone in landscape or portrait mode?
• resolution

Media Query CSS: one rule-set for mobile devices:
@media only screen and (max-device-width:480px) {
[mobile layout rules]
}

By including this  at the end of the stylesheet, you are able to use the cascade to overwrite the previously set style rules for desktop PC.

Alternatively, it can be included in a separate stylesheet using the following:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device-only.css" />

Media Query CSS:  multiple rule-sets for different width devices (thanks to Eric Meyers):

@media all and (min-width:800px;) {
[wide layout rules]
}
@media all and (min-width:500px;) and (max-width:799px;) {
[narrow layout rules]
}
@media all and (max-width:499px;) {
[mobile layout rules]
}

Thanks to AnEventApart, San Diego. Nov. 2010. Much of this content is from notes taken at this event.

Resources:

Make CSS3 Media Queries work in all browsers:
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries.
Firefox 3.5+, Opera 7+ and Safari 3+ already offer native support.
http://code.google.com/p/css3-mediaqueries-js/

Fluid Grids
http://www.alistapart.com/articles/fluidgrids/
http://www.churchandwebdesign.com/2010/everything-old-is-new-again/

Pixel to EM Converter:
http://pxtoem.com/

W3C recommendations: Media Queries
http://www.w3.org/TR/css3-mediaqueries/

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Mobile Emulators for Testing a Site’s Appearance
http://app.protofluid.com/
Huge list of both downloadable and online emulators:
http://www.mobilexweb.com/emulators

Design web products for mobile first. This forces you to simplify and prioritize: to focus on the main function of the site. On websites as with iPhone applications, the main function should be immediately available.

Primary Rationale:

1. Growth = Opportunity
2. Constraints = Focus
3. Capabilities = Innovation

Considerations for mobile design:

• Multiple screen sizes and densities
• Performance optimization
• Touch targets, gestures and actions
• Location systems
• Device capabilities

Growth

On mobile web standards: What if mobile Webkit becomes the baseline?

Morgan Stanley Research’s Mobile Internet Report highlights: mobile internet adoption is outpacing the growth of desktop internet adoption; smartphones are expected to out ship the global PC market in 2012; and heavy mobile data users will triple to one billion by 2013.

There are more than 100 million active users currently accessing Facebook through their mobile devices. These users are twice as active on Facebook as non-mobile users.

• 1990s: 100 million  PCs
• 2000s: over 1 billion users for desktop internet.
• Near Future: over 10 billion mobile.
• AT&T mobile data traffic has increased 50 times in 3 years.
• Smartphone growth is huge.
• US Smartphone Market summary: http://www.lukew.com/ff/entry.asp?1228

Constraints

You lose 80% of your screen real estate by switching to mobile: going from 1024×768 to 320×480 = 80% of screenspace lost.

Know what matters most.
Function and focus in content is critical: What I need is *that* and everything else here needs to just pixilate and die…

• Screen size limitations  force focus on core actions, knowing your users. Use scalable design.
• Designing for mobile is a good way to start a content audit of your current site. Cutting 80% out, what’s most important?
• iPhone interface guidelines: in apps, the main function should be immediately apparent and the number of controls should be minimized.

Ensure that  what is on the screen is the most important set of features for your customers and your business. There is no room for non-essential or low value content .

You then apply the same principle to the desktop version of your web product.  What is most important for mobile is likewise most important for the website.

Apple’s iPad interface guidelines: You should not view the large ipad screen as an invitiation to bring back all the functionality you pruned when developing for the mobile phone.

Functionality should be consistent across platforms:  you should be able to accomplish the same things regardless of how you interact with the site.

To deal with different screen sizes and resolutions on mobile:

1. Define device groups
2. Create a default reference design
3. Define rules for content and design adaptation for each group
4. Ppi: Pixel Density: This is super important in design for mobile.
5. Focus on Web standards and flexible layouts: markup and presentation code will save you from ripping your hair out when creating device independent layouts.

Make the content the action. Content is everything

On the iPad photo album, the photos are the UI. You don’t navigate with buttons and icons, you interact directly with the photos.

Speed Constraints and Performance
“If it’s fast on mobile, it’s going to be blazingly fast on desktop.”
Keep site loading speed and performance a priority.

• Reduce requests to the server:
  • Eliminate redirects
  • Use CSS sprites
  • Consolidate CSS/JS (one file for each)
  • Minify code
• HTML5 / CSS3:
  • Evaluate data: Load data only when necessary, at the user request
  • Use the application cache for local content storage
  • Use CSS3 and canvas instead of images.

Capabilities

new capabilities for mobile devices include:

• Multiple orientations
• Location and orientation serve as input
• iPhones can be equipped with an RFID reader to interact with environment.
• Audio and image input
• Video

Usage patterns
“All of a sudden, the Web and the Internet are with people all the time, everywhere.”
Designing for mobile means designing for something that can be used all the time and on the go: at home, while shopping, at work…

During a typical day: 84 per cent of people will use their smartphone at home, 80 per cent during miscellaneous times during the day, 74 per cent waiting in lines, and 64 per cent at work. This use comes mostly in short bursts.

Read more: http://www.techradar.com/news/internet/mobile-web-design-tips-mobile-should-come-first-719677?artc_pg=2#ixzz19q1bcbxr

On average, 50% of people use an item for 10 seconds or less.

touch-based user interfaces.
Think about how to make things usable for fingers. Consider the size of your touch targets: screen size, speed, context, touch, orientation, location.

Additional Resources:
Touch gesture icon guide: http://lukew.com/touch.

Apple’s iOS Human Interface:

• iOS Human Interface Guidelines describes the guidelines and principles that help you design a superlative user interface and user experience for your iOS app.
• http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Windows Phone UI Design and Interaction Guide (PDF): http://go.microsoft.com/?linkid=9713252

The app should be simple to use with one-handed touch, or a combination of Qwerty and touch.

Apple’s recommended minimum target size for a touch icon/item: 29 pixels wide and 44 pixels tall. (Allows for fat fingers). The visual size of the item to be touched should be 60–100% of the actual active target area.

Touch gestures include:

• Tap
• Double tap
• Drag
• Rotate.
• Press
• Press and tap
• Press and drag
• Flick
• Pinch
• Spread

Thanks to AnEventApart, San Diego. Nov. 2010. Much of this content is from notes taken from the talk “Mobile first!” by Luke Wroblewski.. (with some additional content from related web research).

Additional resources:

Luke Wroblewski
http://www.lukew.com/

Oct 28, 2010 Article on Mobile First
http://www.techradar.com/news/internet/mobile-web-design-tips-mobile-should-come-first-719677

UI Design and Interaction Guide” for Windows Phone 7 (PDF)
http://go.microsoft.com/?linkid=9713252

Mark Drummond on An Event Apart Minneapolis:
http://marcdrummond.com/-event-apart/2010/07/31/event-apart-minneapolis-luke-wroblewski-mobile-first

Yahoo’s Developer Guidelines on the Best Practices for Speeding up a Website: http://developer.yahoo.com/performance/rules.html

Article on Accessibility for iPhone and iPad apps
http://mattgemmell.com/2010/12/19/accessibility-for-iphone-and-ipad-apps

45 Most Useful Guidelines for Mobile Web Design and Development
http://www.mobilexweb.com/blog/guidelines-mobile-web-design

The truly shiny HTML5 Boilerplate:
http://html5boilerplate.com/

HTML5 Reset: core website structure of HTML5 and CSS3 templates:
http://html5reset.org/

HTML5 site template:
http://github.com/dcneiner/html5-site-template

w3.org HTML5 specifications overview
http://dev.w3.org/html5/spec/Overview.html

HTML5 tag reference:
http://www.w3schools.com/html5/html5_reference.asp

Compatibility Tables for HTML5, CSS3, SVG, and other upcoming web technologies
http://caniuse.com/

Good Article on How to Use HTML5 on Your Website Today:
http://infoworld.com/d/applications/how-use-html5-your-website-today-220

In no particular order:

• http://www.w3schools.com/html5/default.asp
• http://www.alistapart.com/articles/get-ready-for-html-5/
• http://html5demos.com/
• http://html5doctor.com/
• http://diveintohtml5.org/
• http://html5.org/
• http://diveintohtml5.org
• http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
• http://media.focus.com/images/uploaded/fyi/wtf-html5-infographic/HTML5.jpg
• http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

• IE9 and HTML5/CSS3 support: http://www.webmonkey.com/2010/09/a-guide-to-internet-explorer-9s-html5css-3-support/
• MSDN: IE9-Beta Guide for Developers: http://msdn.microsoft.com/en-us/ie/ff468705.aspx

• HTML5 and Video: http://bit.ly/dp-html5-video
• HTML5 site: Video for Everybody! http://camendesign.com/code/video_for_everybody
• Rules and Regulations of the infamous iFrame:  http://dev.w3.org/html5/markup/iframe.html
• HTML5 and video in email: http://www.campaignmonitor.com/blog/post/2905/html5-and-video-in-email/