Skip to content

Scaling content with CSS vw units

Screenshot of desktop with content scaled
Desktop with scaled content

While experimenting with a new Pattern Library based workflow and I put together something to play with scaling content based on css vw units (viewport width) and full-page splashy design.

All it takes is…

font-size: 10vw;

…and the browser will calculate the size on the fly. There are 4 related properties, vh, vw, vmin, and vmax which can be used to scale most content base don the dimensions of the browser viewport. These units are percentage of viewport size, so 10vw == 10% of the viewport width.

  • vh = % of viewport height
  • vw = % of viewport width
  • vmin= whichever of vh or vw has the smaller size*
  • vmax= whichever of vh or vw has the larger size*

* As of Jan 2017, Microsoft Edge browser doesn’t support vmax, but you are safe to use vh/vw in all modern browsers

You can see the page in action here: spacegirl.co.uk or check out the source on GitHub here: spacegirl-patternlibrary.

Menu positioning

Screenshot of mobile first design
Mobile menu

This bare bones experiment also deliberately puts the navigation elements at the bottom of the page on mobile—in theory closer to the users thumb. This was sparked from a discussion at the studio this week over mobile menus. The ubiquitous hamburger menu feels increasingly unwieldy UX as we become more attached to our mobile devices, especially phones. The thumb reach from the bottom of an iPhone 7 Plus to the top right corner (traditionally where the burger menu resides) is a stretch for me. A struggle for folks with smaller hands, which could results in phone-fumble annoyance. There are solutions—more app-like behaviour (think iOS apps, icon bars), tile menus, InstaGram style slide-in/out menus to name a few—but there’s the risk of user confusion. People are used to burger menus, even if they don’t have the most elegant UX. Food for thought (hmm, burgers).

 

Leave a Reply

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