Free Web Development Online Resources: Useful Tools for Writing and Maintaining Code

Clean up your code!

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.

Building for mobile with HTML5, Mojito, node.js, and backbone.js (links and resources)

Articles from venturebeat.com on mobile development using HTML5, node.js, Mojito, Yahoo Cocktails, and other goodness.

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

Continue reading

Color Symbolism, Culture, and the Web (A few infographics)

Check out this nice infographic showing the meaning and associations of colors according to a variety of cultures worldwide. (Click on it to view the original full sized graphic on informationisbeautiful.net.
Colours in Cultures Infographic.

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.

Social Share and EMail: Share an Email by Pinning to Pinterest from Email (includes code examples)

New kinds of social sharing awesome: share an email by pinning it or content from the email to Pinterest from the email!
Pinterest is a new social sharing site on which users collect photos and images from around the web and then share them on themed and curated boards. Pinterest has grown exponentially as a social sharing destination on line, and is now the 3rd most popular social network in the U.S. in terms of traffic, with 10.4 million users as of February 2012. It’s usage has especially grown among the demographics that shop online. A 2012 study by Wayfair (www.wayfair.com) showed that shoppers referred by Pinterest are 10% more likely to make a purchase and spend 10% more on average than visitors who arrive from other social networks, including Facebook and Twitter. Even more impressively, they spend 70% more than visitors referred from non-social channels such as search.

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.
Continue reading

Free Stuff Sites: Free Web Design Resources – PSD Files, Photoshop Brushes, Web Graphics, Textures, Photos, and More

Here are some of my favorite sites for quality web design resources that are free for personal and commercial use*. This is by no means a comprehensive list, just ones that I have found and like.

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.

Free Online Web Site Testing Resources: Crossbrowser Testing, Screen Capture Generation, Site Performance, Robots.txt Analysis

These sites offer free resources to test a site across multiple browsers and platforms.

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.

Print a Web Page Using JavaScript and CSS (resources)

Some tutorials and articles:

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/

Create a mobile version of a website with CSS3 Media Queries and Flexible Grids

“Mobile devices are providing the base at which we completely reevaluate how we develop for the web.”

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.

Continue reading

Design Web Products and Sites for Mobile First. Simplify and Prioritize!

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. -Antoine de Saint Exupery

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.
Continue reading

HTML5 Resources

Like the title says. This is a link collection of HTML5 resources. By no means complete.

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
Continue reading