Skip to main content


Showing posts from 2017

Scaling fonts by viewport with a minimum size

In a recent design we needed a giant button that would scale well from mobile to desktop.

By combining viewport width scaling and pixel scaling with a calculation you can make a font size scale, but never scale smaller than a minimum size.

<a href="#example" style="display: block; background-color: #5588aa; padding: 20px; color: #fff; text-align: center; font-size: 30px; font-size:calc(30px + 1.6vw);">Big Button Text</a>
Big Button Text

Both calc and viewport-units have wide support right now. Remember to set a fallback font-size for fringe browsers.

More information
Chris Coyier: Viewport sized typographyDavid Walsh: A Couple of Use Cases for Calc()Jen Simmons: Progressing Our LayoutsVasilis van Gemert: Create the perfect website layout system

Redirecting a list of paths in IIS to a new location

We often do redirects like the following to move all paths from one relative location to another.

If you need more fine grained control of what url goes where, you can use a redirect map. A redirect map allows one to define a key value pair of old locations to new locations.

Here's a simple example of a rewrite map.
<rewritemaps> <rewritemap defaultValue="" name="Redirects"> <add key="/full/relative/path/some-page" value="" /> <add key="/full/relative/path/another-page" value="" /> <add key="/full/relative/path/new-exciting-post" value="https://example/com/old/news" /> </rewritemap> </rewritemaps>

You can then define that map inside a web.config to be used to reroute traffic.

<!-- Web.Config Configuration File Example for a multiple page redirect map. …