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/

Posted in Uncategorized | Leave a comment

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

Posted in CSS3, Mobile, Web Design | Tagged , , , | 1 Comment

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

Posted in Mobile, Web Design | Tagged , , | Leave a comment

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

Posted in cool links, HTML5 | Tagged , , , | Leave a comment

Breadcrumb Navigation, Rich Snippets, HTML5 MicroData, and Google

Google has added an experimental HTML5 rich snippet / microdata format for breadcrumb content and hierarchy on a webpage that will enhance identification and search presentation on pages in Google search results. Google already includes breadcrumb navigation in their SERPS (since November 2009); this enhancement has GREAT potential for enhancing website usability and SEO.

Continue reading

Posted in MicroFormats, Rich Snippets, SEO, Technical SEO | Tagged , , | 4 Comments

Testing Your Site in Multiple Browsers and Browser Versions

In a perfect world, you could peacefully write the code for your site, knowing that it will look consistently beautiful and work perfectly no matter what browser or browser version you are using.

Sadly, in the real world of changing and inconsistent CSS standards implementation by the various web browsers and browser versions, it doesn’t work that way, so your site that looks great in Safari looks broken in Internet Explorer 7 and 8, maybe a little off in Firefox 3.5, and we won’t even go there about the train wreck that happens in Internet Explorer 6.

Testing for this can be a challenge without the right tools, and setting up multiple machines or virtual machines with multiple installs of web browsers just makes you want take some aspirin and go lie down somewhere quiet.

Fortunately there are some useful tools out there to help. A favorite of mine for testing Internet Explorer is the IETester, which can be downloaded at www.my-debugbar.com. ETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Another great tool I found is at www.spoon.net This site allows you to run multiple web browsers and browser versions from the web, without having to install them. It looks like a nice tool for testing. Currently it offers the ability to test against multiple versions of Internet Explorer , Firefox, Chrome, Safari, and Opera.

And it’s free. Totally awesome.

Posted in Uncategorized | Leave a comment

Search Indexing and Rankings with Sub-domains and Load Balancing

Google treats subdomains differently based on how you treat them. If you treat the sub domains as separate sites with distinct and non-duplicated content, Google will treat them differently and index them differently.

You can see this on sites like wordpress.com, in which many people have unique domains, all with the variant subdomain names structured as yourblogname.wordpress.com. However, if you have a subdomain with unique content, such as for example a blog as a subdomain on your primary site www.yourblog.yourprimarydomain.com but you link heavily back to your primary domain’s content, Google will treat this as part of the main domain, the same as it would treat the content in a sub-directory like www.yourprimarydomain.com/yourblog/

To minimize the dilution for sub-domains that are not mirrors of the parent domain, each site or subdomain should contain as much unique content as possible, including meta-tag content, and pages targeting different keyword strings.

If there is duplicated content as a result of load balancing using www, www1, www2, and so forth, then this can adversely impact search results for both site sub-domains. This is because such uses introduce URL canonicalization issues and split page rank. Continue reading

Posted in SEO, Server Load Balancing, Sub-Domains, Technical SEO | Tagged , , , | 1 Comment

Awesome css classes on a minimalist site design

This site is awesome and just chock full of win: http://noahstokes.com/
First: view the page and read the promo copy. Then view source, read the source, comments, and somewhat non-web-standards based CSS classes.

After a day spent working on a white-paper on coding HTML newsletters, that site was a breath of fresh air, and good for more than a few giggles. :)

The site author is actually the owner of a Web Design / Development shop in San Francisco, but that makes it even better.

Posted in cool links | Leave a comment

@font-face, Access-Control-Allow-Origin and Cross-Origin Resource Sharing in Web Typography

Suppose you have a site, and you want to use a beautiful and awesomely shiny font that you have purchased on the site, but you also want to put that font on a separate domain or  server instead of in a sub-folder on the same domain, and you would like it to work on multiple browsers and browser versions and maybe even use the font on several sites, but restrict access to it to only those sites (ambitious, I know).  At this point, you will need to use additional code besides @font-face.

Note: You can view my demonstration page for this at http://coyotecreation.com/code/cross-domain-typography.php

Continue reading

Posted in Apache Web Server, CSS3, Web Fonts | Tagged , , , | 1 Comment

HTML5 tutorials: Flamingos, Palm Trees, and Canvas. How can you go wrong?

So this weekend presented a choice: write a white-paper on coding electronic newsletters, or play with HTML5′s <canvas> feature. Tough decision. After much internal struggle and torment the choice was resolved in the following manner:

  • I’m drinking coffee out of my favorite summer coffee cup (with flamingos on it, and I love flamingos and beach scenes).
  • It’s summer, and I’m looking at my computer wallpaper of a beach (with flamingos on it).
  • I can play with code and make a picture of a beach with a certain pink bird on it, or I can write about coding nested tables and line-height. Now, nested tables do have a certain aesthetic appeal (hey, I’m a UI and electronic newsletter coder with a taste for “old school” concepts and, ok, so I have “issues” <joke>), but seriously. Let’s go with the bird.

You can see it’s development here: http://coyotecreation.com/code/html5-canvas.php

Continue reading

Posted in HTML5 | Tagged , , , | Leave a comment