Media queries and your website = Good web marketing practice

Your website UX, down to how a page looks printed, should be part of your web marketing strategy

Nothing is more annoying than printing a page to only waste 6 pages because you didn’t see the endless comment thread.

How many “Great Job!” praises and misspelled critiques do we need when most of us just need the above-the-fold info?  As part of the UX (user experience) it’s important to test the print-outs of your web pages for more user-friendly output that will hide meaningless content and arrange your content to fit to standard 8.5″ x 11″ printer paper.

Here is a very useful link and guide to print style sheets:    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

To summarize for a quick reference, in your CSS you can create special rules inside this “@media print{ }” rule category.

Paying attention to your website’s UX down to the details like how your content prints just elevates your website to a higher level, which also fits into your web marketing strategy!

Here is a simplified example where you can hide all the HTML containers with certain classes or IDs from printing, so if all your ads are inside an “ads” class, and your sidebar has an ID of “sidebar”, here’s how you can make sure they don’t print.

@media print {
.ads{display:none}
#sidebar{display:none}

.obnoxiousAndLengthyCommentThread{display:none}
/*  Hide or resize other elements to make your website content print-out  */
}

Aaron Belchamber has written 247 articles

Leave a Reply

Your email address will not be published. Required fields are marked *