I’ve recently revamped my employer’s website, www.bauerbuiltmfg.com, meaning I changed the look, design, and most photos of the site, but much of the typed content has been left untouched.
This is the first website I’ve created with an “elastic layout,” which I got the idea from this excellent post: The Incredible Em & Elastic Layouts with CSS. My elastic layout states the size of almost all elements (including images) in “ems”. This is so that if someone resizes the webpage’s text, then the containers and images also change proportionally in size.
Elastic Layout is important to me because in an era where one viewer may have a 800 x 600 pixel monitor, another may be viewing it on a wall-sized display via high-def projector. I wanted a design that will render consistently across all displays (with the possible exception of mobile-phone browsers), and it seems that entering sizes in pixels or percentages presents other limitations.
Tip: I created a simple spreadsheet with the formula from the Jon Tangerine article that allows me to enter the pixel-size of images and get the em size out. You can download it below.
Download “Pixels to Ems Calculator” by clicking here.
Topical Cloudarchitecture art artistic basement remodel biology blog CAD computer custom decorative design DIY drawing entertainment fabrication feed furniture graphic design health care history home humor HVAC infographic install instructions kids Lawn Care marketing media music Parenthood photography pop art PSA science sculpture search engine optimization SketchUp SolidWorks steel tutorial video weather web design