I spoke at an HTML5 Code Camp the other day on HTML5 forms because HTML5 forms are cool! They’re so cool you can use most of them today anywhere you have a text field to increase functionality for your users!
Sample form.
Finished form (no peeking).
Basic Introductions
CSS
Compatibility Specifics
Shim
Print styles are the original responsive designs. Using media queries we pare down the content, focus on readability, and design with different device capabilities in mind but when was the last time you took a good look at your print styles?
Yes, people still print web pages. Extrapolating from these numbers about 10,000 pages are printed from bcit.ca every month. The print experience is an important part of a good site and relying on your screen styles to print properly is foolish:
Printing can really screw up a web page.
One of the most common problems I saw when doing my survey of print styles was white text printing on a white page. To save ink the browsers will strip all background colours and background images before printing so in your print style sheet be sure to over-ride any light coloured fonts. I also add a thin border to elements where the background colour is used on the screen to differentiate the content and reinforce the grid.
There’s a variety of common layout bugs everything from floats to absolute, fixed, fixed-width, and semi-opaque elements can get cut off, misplaced, or disappeared entirely especially when the element flows across a page break. If it’s too wide some browsers will shrink your page until it fits and others will crop it. Where possible do away with your layout and make your content linear and fluid.
Web fonts introduce a new quandary to the world of print styles. FireFox and Chrome don’t print web fonts. Have you ever seen a site with the word-spacing, line-height, and font-size picked for one font displaying its fallback font? It’s not usually a pretty picture. I recommend over-riding web fonts in favour of a common font, especially for body copy.
While you’re stripping your web fonts out, consider the readability of the rest of your typography. How does it look printed? If your page is being printed chances are someone is going to spend some time reading it – more time than they’d spend on your site. Do what you can to make that pleasant.
Layout elements like headers, footers, banners, ads, and menus distract from the information the user is trying consume, are un-usable on a printed page, and take up extra paper. It’s very common to remove these elements when printing. A three-column page layout doesn’t look so bad on one short page but if your site has a substantial amount of content those columns will likely be empty from the second page onward leaving large fields of empty space or worse your columns will spread onto a second page when your content only filled the first. What’s your user going to do with that printed navigation menu anyway – click on it? How does that logo in your header look in black and white? Removing layout elements makes it much easier to make your remaining content fluid to avoid common print bugs and fit the page. Think about a better way to communicate the other information – more on this in a bit.
Print doesn’t work like a web page. The user can’t interact with it anymore all they can do is read it. Consider what that means for content on your page that you can’t normally see.
There’s some pretty fancy CSS tricks you can use to add the URL of links to the page in brackets after the link. I think I’ve seen it done best by the HTML5 boilerplate but I prefer to add footnotes with javascript. This is much less disruptive for readers. Either way make sure you consider how you’ll handle links that aren’t URLs: javascript hooks, in page anchors, mailto or tel. These same tricks can be applied to abbreviation titles and other attributes.
Not all interactive content can be exposed. There’s no CSS trick to print a video or Flash file and frequently this missing content will just leave a big white gap in your page. Your options are pretty much: hide it, provide a place holder, include a short summary, or include a full transcript. I’ll leave the method up to you.
For content revealed by javascript my suggestion is to do your best to print the content that the user sees. If they’ve toggled open two out of ten of your FAQs, just print the full text of those two and leave the others closed. I’ve seen several sites which don’t include their global styles when printing but forget to include the styles their pages are dependant on in print stylesheets (this is most common with javascript). I can only imagine how frustrating that would be to a user.
The most basic print styles make a page more readable at the expense of some of its character but we don’t just have to take away. You can include a print specific header and footer hidden in your HTML or add them later with javascript. This gives you a chance to include a black and white version of your logo and any other brand cues you feel are important. You might already be using a grid to maintain visual consistency between desktop and mobile, here’s your chance to do it in print too.
Other information you might consider adding in a print header or footer is: way-finding clues like a section or category name, general contact information like a 1-800 number (more useful than a link to a contact us page), and a short URL to help the user get back to that page. Some sites even include a QR code but use your best judgement.
It boggles my mind that browsers will still delay rendering a page until it has loaded a style sheet with the media type of print. #seriously #testyours. This article on Browser Performance Problem with CSS “print” Media Type outlines the problem really well.
If you’re just trying to avoid the extra http request and your print styles are very small you can always just add them into your main CSS file.
@media screen {
/* screen styles here */
}
@media print {
/* print styles here */
}
Otherwise you can look at techniques to load them asynchronously. There’s a couple ways to do this.
On the left is our site on a screen, on the right how it looks formatted for print. In the middle, without any print styles, you can see it goes boom:
Did you see what happens to the Bebas font we used on our section names? You caught me, this is a screen cap not a scan of a printed page. Bebas wouldn’t actually print and the 6 pixels of word spacing we have to apply to it to get it to play nice looks kind of silly on Arial Narrow.
Our print style sheet is loaded asynchronously after the rest of the page and at the same time I run functions to add a print header, print footer and the URLs of the links on the page as footnotes.
The screen header, sidebars, banners, and footer are hidden from display and I force the main content to become fluid again. Other than that the actual body of the page needs only minor work because these styles are layered over our global styles. I darken up some text, remove videos and Flash elements, and on pages which don’t already have outdented headings I outdent the headings. If this page had javascript elements everything would print as the user left it before printing.
The print header includes a black and white version of our logo which prints nice and crisp compared to a colour one and uses a few thin lines to re-establish the grid creating a visual tie back the way the website looks on a monitor. It also includes the name of which section of the site the page is from and a shortened URL to return to the page.
The footnote function is complex enough to re-use a footnote if there are multiple links to the same page, provided a shortened URL if it’s an internal link, include fallback text for javascript links, and skip footnoting an email address if the address itself is all that’s included between the anchor tags (our style guide mandates this but the odd one slips through the cracks).
The very basic footer was a victim of time constraints. We couldn’t include our 1-800 number on all pages because it’s specific to Student Enrolment and wouldn’t be appropriate on business services pages, for example.
If you have a large constantly evolving site I recommend making your global style sheets apply to both screen and print. It saves you the trouble of keeping two sets of stylesheets up to date when changes are made. That leaves you the task of over-riding some of the screen styles in the print style sheet. This will be much easier if you’re already avoiding IDs for styling. If you’re not it seems to be acceptable to sprinkle your print styles with !important declarations.
Test until it’s perfect in print preview.
Then test until it’s perfect when you print to PDF.
Then test until it’s perfect when you print it out on paper.
There is no other way to be sure you’ve got it right.
I needed a loading spinner for a side project the other day but I was too lazy to steal someone else’s off the internet or try to re-learn making an animated GIF so I just coded my own in CSS (CSS is my hammer).
On the bright side it works on any background colour and is a little transparent which is neat. And it’s way faster to adjust the colour scheme than an image file would be.
It’s one <div> containing 8 <span>s, styled to be little grey lozenges:
.spinner span{
display:block;
height:13px;
width:5px;
border-radius: 2px;
background-color:rgba(77, 77, 77,0.5);
...
In anticipation of rotating them I moved the transform-origin to the middle of the element and then a significant way down beneath it. Later, when I rotate the lozenges this spaces them further apart.
...
transform-origin:50% 160%;
...
They all have a simple animation applied to them that makes them fade in and out (it has a bit of an opacity on it just for fun):
...
animation-name: fade;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode:backwards;
}
@keyframes fade {
0% {
background-color:rgba(77, 77, 77,0.8);
}
40% {
background-color:rgba(77, 77, 77,0.8);
}
100% {
background-color:rgba(255, 255, 255,0.8);
}
}
Using nth-of-type each lozenge is rotated 45degrees more than the last and has a delay of 250ms added to the animation on it. Unfortunately there is no easy way to do this program-magically so they have to be specified for each. Here is an example of the code for the second one:
.spinner span:nth-of-type(2){
transform: rotate(45deg);
animation-delay:-750ms;
}
Did you know that you can provide a negative value for animation-delay? Cool, eh?!?! This means I can make it appear that the animation is beginning in the middle, otherwise the first time it’s run it looks funny.
I added some absolute positioning to the <span>s, so the origin of the transform is at the top left of their parent <div>. This means the spinner fans out from the top left of the <div> and you can absolutely position it to exactly where you want the middle of the spinner. Handy if you want to place the spinner in the middle of something, like I did.
.spinner{
position:absolute;
top:50%;
left:50%;
}
.spinner span{
position:absolute;
top:-20px;
left:-3px;
...
Changing the colour is as simple as creating a new animation and applying that to your special spinner spans.
.special .spinner span{
animation-name: specialfade;
}
Yeah, ideally they would have been created using :after but I couldn’t find a way to style all generated content at once so I would have had to repeat the entire declaration for each :after element and it’s long enough already (you should see it with the browser prefixes).
I’m comfortable with that trade off because a loading spinner is only going to be used in association with javascript in which case you can generate the spans dynamically and remove them when you’re done.
Here’s the loading spinner with the moz and webkit prefixes. Of course, it only works in browsers that support animation and transforms but there’s more and more of those these days.
Also, yes, totally, please use it. Tweet me if you make any improvements.
I got a little carried away and made a few more. They only have the vendor prefixes to work in FireFox 6 right now: other styles.
EDIT 2011-09-15: All of this applies to <script> in the body as well.
I have some bad news and a fix (I hesitate to call it good news).
HTML5 introduces a way for us to include <style> elements on the page, we just need to give them an attribute of scoped. So, for example, if you have an SSI included widget you can include the styles in the widget file instead of trying to devise a way to add them to the head.
A Problem
But it causes an itsy bitsy problem with the styles. The <style> counts as an element, and if you put it first, it becomes the first-child. The styles I’d defined for the first-child in that block were not applied to the (now) second child.
In other words this:
div p:first-child
stopped working when I added the style to the HTML here:
<div>
<style> p{color:#00F;} </style>
<p>Text!</p>
</div>
A Fix
Fortunately we can include style in our CSS declarations (and even style it if you want, I gave it a width, and garish background colour in both FF3.6 and Chrome) so an adjacent sibling selector is the fix:
div style:first-child + p
I’m not keen on going through my styles sheets and adding this rule to every place I have first-child declarations but we don’t use scoped style elements too much so hopefully I won’t have to.
The other option would be to not put the <style> first in the parent I pretty clearly remember reading that the style has to be the first-child, of course, I can’t find where I read it.
Side Note: using <style scoped> today.
As of August 2011 there are no browsers that support the scoped attribute but if you’re using an HTML5 doctype you can still use <style scoped> today. Browsers have been happily rendering style elements inside the body for quite some time, it just wasn’t valid HTML before ;)
The old browsers will apply the styles in your scoped tag to the entire page so I combine it with a class to get the effect I intended.
<div class="foo">
<style scoped> .foo p{color:#00F;} </style>
<p>Text!</p>
</div>
Twitter is an amazing tool to catch a glimpse of the collective consciousness. I’ve seen it during the Olympics and I’ve been apart of it at conferences like An Event Apart. Jeremy Keith once said that Twitter was the closest he’d ever come to feeling as though he’s jacked into the Matrix.
Most of us use Twitter to keep in touch with people we know and keep up with things we care about. It makes sense, it’s familiar and comforting but it blocks out people and ideas we disagree with and it ignores some of the most powerful potential of Twitter.
What are we missing by insulating ourselves with the familiar? A recent episode of CBC’s Spark discussed the benefits of following a stranger with Joel Johnson who wrote a gizmodo article on the topic.
Not only can it help us avoid groupthink but Joel mentions a study that suggests exposure to other view points can make us more creative.
So I had the idea to create a twitter account that will add a random tweet to my feed now and then and when I mentioned it to Daniel he took a few minutes and built it.
You should follow a @perfectstranger on Twitter, and let me know what you think.
There was a rash of black and white April Fool’s Day sites this year. We weren’t the only ones to do it but I think we did it best, if I do say so myself. There were three parts to our little switch and it wouldn’t have been the same without any of them:
Desaturating the colours in the stylesheet.
I captured the colours in the stylesheet using the Web Developer Extension in FireFox. Information > View Color Information produces a list of all the colours used in the styles and their hex codes. I took a screen shot of that and then desaturated it in Photoshop by adding a desaturation layer.
Once I had the desaturated colours I did a find and replace for the original hex codes in the style sheet, sampling the new hex codes from my Photoshop document.
Desaturating all the images.
All the images? Yep, all the images.
For this I tried out a couple different javascript libraries but ultimately went with PaintBrushJS by Dave Shea because it was the only one that could handle background images and didn’t add any extra elements to the page. PaintBrushJS uses a combination of javascript and canvas to alter the images.
For backwards compatibility I manually converted all the header and footer assets to black and white, this also meant I could restrict the desaturating javascript to running on just the content and leaving these pieces alone, taking a bit of a load off the client.
I actually had the easiest time getting it to work in IE… there’s a filter. I wouldn’t have used an evil evil filter if it hadn’t just been for half of one day but it was so I did.
I think this kind of photo manipulation has a place in web design since it means we can keep the unaltered versions of files and change their rendering when we change the theme, that’s pretty powerful.
Authentic Content.
We were lucky that the BCIT Archives have begun digitizing much of their collection. We got a great deal of source material from the 1968-69 Program and Course Catalogue. We listed courses like Punch Card Systems and Fortran VI for the day – both sold out of course.
Nope, the logo wasn’t a Star Trek knock off, that’s what the future looked like in the 60s and both BCIT and Star Trek ran with it.
The content about campus events came from copies of the student news paper from the same era. My favourite of the new stories was about how BCIT was getting its second computer.
It was a lot of fun and I’m glad we work at the kind of place that was keen to let us do it.
I hate form styling on the best of days. This is a good example of why:
Firefox’s buttons are wider than IE’s or Webkit’s. Why? This little gem in the browser’s style sheets:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px 2px 0px 2px;
}
That’s right, it’s 4px wider. Thank you FireFox.
Fortunately, we can fix it!
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px;
}
That was easy :)
We have a class on our site that is applied to every button. I call it “formbutton” (I didn’t get to pick it. My boss picked it 8 years ago. It’s a great name isn’t it? Epic and enduring.) So I can simplify that code up to this:
.formbutton::-moz-focus-inner {
padding: 0px;
}
Want a little more info:
I found this with a little help from this article on viewing FireFox’s default style sheets. The observant among you may notice there is another style in there. It is for keyboard navigation. Use your new found powers wisely, don’t remove it without replacing it.
Also, here’s a link if you’re wondering what is up with the double colon notation.
And so far it does not look like there are equivalent pseudo elements in Webkit or IE, but I will admit to not looking very hard since this fixed my problem ;)
Know how IE and FF display list-style-image bullets at two different heights and it drives us all nuts?
Did you know it was possible to use vertical-align on any inline element? Did you know that first-line is an inline element?
If you’re working on displaying the bullets at the same height, this might be the fix for you.
Nothing teaches me how to do something like a project and I was trying to learn CSS3 so I tried to make a CSS only cover flow.
Some of it works in FireFox but all the cool stuff works best in webkit: here’s as far as I got.
Have fun with it :)
© Abstract Sequential. Powered by WordPress using the DePo Skinny Theme.