What is box-sizing: border-box;?

BOX-SIZING: BORDER-BOX;

box-sizingThe “box model” in CSS looks like this:

width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box.

The border and padding values go inwards into the width/height of the box rather than expand it. Expansion of an element is always mind bending.

Block level elements – a div inside a div – the child div defaults to 100% size of the parent, without any CSS styling. If you add padding or border and declare the child to be 100% width, it will blow out of the parent from adding those values to the original width amount (default).

So that’s where the border box value (as opposed to the content-box default), which keeps the styling inside the box.

html {
box-sizing: border-box;
}
*, *before, *:after {
box-sizing: inherit;
}

According to Paul Irish, the need to state prefixes for Webkit or Moz is no longer necessary, and most browsers and devices are totally onboard.  The universal (*) selector works great, too, and is a great CSS tool.

article reference: http://css-tricks.com/box-sizing/

related article on Box-Sizing as explained by Paul Irish: www.paulirish.com/2012/box-sizing-border-fox-ftw

Advertisements

Opening New Tabs for External Links

tabs

WHAT’S YOUR LINKING STRATEGY?

Why make your users “backspace” their way back to your site from an external link? This is not only bad User Experience, it also hurts your Analytics.

Owners and developers of websites need to think about how to handle links. Many understand the theory behind handling links, but not everyone thinks about it, and many are so sure they know something that’s based on history, but no longer applies.

Browsers nowadays open new “tabs”, not “windows”, allowing the user to view the new page while leaving the page they left on your website available to them. Browser tabs are very easy for your visitors to use. Most users have many tabs opened when they are browsing.

If you have links that lead visitors away from your website to another’s website, why not open their site in a new tab? What if your visitor decided to X out of the page? If you didn’t set up target=”_blank”, your site is gone, too. Makes no sense. Xing out of both tabs is always an option for them, but without it, they are gone, maybe forever.

Sometimes users browse for information purposefully leaving tabs open to reference back to, and actually collect these pages to consume information as they continue to scan. When users want to go back and forth, the tabs make it easy.

You can also save resources by opening external links in new tabs and users won’t need to load your site again.

This tactic of not opening a new tab also hurts your Analytics. If your user clicks an external link in the same tab, it is saying he/she is leaving your site, when perhaps they just wanted to read the outside article, and come back to finish something on your site.

Of course, internal linking inherent to the navigation of the site, should never open in a new tab. Surfing your website should be an easy user experience. Why make your user “backspace” their way back to your site? Makes no sense.

Making your links open the right way is important for Analytics and User Experience.