Archive for the ‘Visual Design’ Category

File Under: Visual Design

Create Smaller, Better Web Graphics With Icon Fonts

Creating custom icon font files with Icomoon. Image: Screenshot/Webmonkey.

Responsive images means getting high-quality, bandwidth-friendly images to the right screens. Currently that’s not nearly as simple as it sounds, but there’s a responsive images web standard in the works and plenty of smart developers working on the problem.

Implicit in the responsive images discussion is that the images in question are photographic images. For graphics, solid-color images and icons there are already better solutions, namely, either SVG or icon fonts.

Icon fonts in particular have been getting a lot of attention lately and for good reason — they make an easy, lightweight way to serve up resolution-independent images that look good on any screen. Indeed in most cases icon fonts can replace your old image sprites (though you can keep your sprites around for older browsers). And don’t forget icon fonts are fonts, so any CSS effect that works on text will work on your symbols.

There are dozens of great icon font sets available that you can just drop into your projects. Pictos, Glyphish and Symbolset are just a few popular options. There are high-quality free icon sets as well, but it’s also easy to create your own font file from any vector image you have.

Turning your vector files into icon fonts means you can serve your RSS, social icons and perhaps even your logo all from the same custom font file (or even straight from your stylesheet with base-64 encoded data). What’s more, when you roll your own, you can include only those icons you need, further reducing file size.

I’ve been using the OS X application Glyphs to package up icon sets, but, as developer Jeremy Keith recently highlighted in a blog post, there are a number of great (and free) online services that can turn your icons into font packs. Assuming you don’t need all the font editing features found in desktop apps like Glyphs, web services like IcoMoon will work great.

To create your custom collection IcoMoon has dozens of icon fonts to choose from (some free, some not), as well as an option to convert your own graphics. Once you have your set assembled the app will spit out the whole collection as single font file ready to use on your site. You can even get the resulting font base-64 encoded so you can avoid the extra HTTP request.

For more info on how and why to use icon fonts check out the nice overview on the Pictos blog, Chris Coyer’s Icon Fonts are Awesome, developer Trent Walton’s icon font write up and Jenn Lukas’ series on icon fonts.

Break Out the Scissors and Glue for Your Next Responsive Redesign

Building websites with scissors and glue. Image: Webcredible

Web developers are still figuring out the best tools and workflows for creating responsive websites, including falling back to good-old pen and paper. As we noted earlier, Zurb released a nice set of responsive sketchsheets — paper templates for sketching out responsive layouts.

That’s not the only paper trick we’ve seen lately. Alexander Baxevanis of Webcredible recently posted another idea about how paper can come in handy to mock up a responsive site. Baxevanis’ post walks through how he and his team printed out a paper model of their site to wireframe and mock up a new responsive website:

I started by printing out screenshots of some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.

Baxevanis touts the method’s speed and flexibility since the there’s less sketching and, with each content element cut out separately, it’s easy to rearrange everything and try various combinations.

Naturally there are some limits to how well you can mockup a site using paper, though Baxevanis does offer a clever solution to one problem — fold a piece of paper showing a long list of stuff to mimic a drop-down menu. The main caveat is that this probably works best if you’re starting with an existing desktop site; those adopting a mobile-first approach would probably need to make some modifications to the process.

For more details and more images of the mockups, head on over to Webcredible’s blog.

Put Your Responsive Ideas to Paper With ‘Responsive Sketchsheets’

Put pen to paper with Zurb’s responsive sketchsheets. Image: Zurb.

Building responsive websites means using fluid layouts and flexible designs to accommodate any size screen. Part of what makes responsive design more difficult than building just a fixed, desktop-friendly website is the lack of good mockup tools. Starting your mockups in apps like Photoshop means starting with a fixed-size layout and that’s not what responsive design is really about.

Designer favorites like Photoshop or GIMP can still be useful tools, but less so at the beginning of the design process. Lately we’ve been going old school — sketching in notebooks to outline basic layouts — and then jumping right into the HTML and CSS for actual mockups.

The only problem with pen and paper is that it’s a pain to draw out viewport sizes for showing how your design will reflow. That’s why we like Zurb’s new responsive sketchsheets. The sketchsheets are just that — templates for sketching out layouts. We suggest taking a mobile first approach, for which Zurb recommends starting with the full-size mobile sheets. Also very handy are the sheets for visualizing off-canvas content on small screens.

To give them a try, head over to Zurb’s playground and download the new responsive sketchsheets (which also include some older sketchsheets not geared toward responsive design) and start sketching out your ideas.

File Under: CSS, Frameworks, HTML, Visual Design

Bootstrap Framework Plans to Give Twitter the Boot

Web development toolkit Bootstrap is getting ready to part ways with Twitter. The open source project began life at Twitter, but with its two primary developers leaving Twitter for other companies, Bootstrap will be spun off on its own.

Bootstrap co-creators Mark Otto and Jacob Thornton are both leaving Twitter and have announced that Bootstrap will continue but as “its own open source organization.” For now nothing is changing; Bootstrap will remain a Twitter project on GitHub. But eventually the pair plan to give Bootstrap a life of its own.

The Bootstrap project is designed to help you get your website up and running as fast as possible. Somewhere between a framework and a “theme,” Bootstrap offers an HTML, CSS and JavaScript base for your designs, including built-in forms, buttons, tables, grids and navigation elements. Among Bootstrap’s more impressive tricks is the grid layout tool with support for advanced features like nested and offset columns. Bootstrap is also impressively lightweight, weighing in a just 10kb (gzipped).

Bootstrap 2.0, released earlier this year, added some much-needed responsive design tools for creating fluid layouts, including a new flexible 12-column grid system.

The move away from Twitter should be good news for Bootstrap users, particularly with Twitter’s increasingly hostile attitude toward developers. Otto assures anyone worried that Bootstrap will become abandonware that both he and Thornton are dedicated to Bootstrap. “The project has grown beyond us and the Twitter brand,” writes Otto on the Bootstrap blog. “It’s a huge project playing a pretty awesome role in the web development industry, and we’re excited to see it continue to grow.”

To see some real-world examples of what you can do with Bootstrap, head on over to the unofficial showcase, Built with Bootstrap on Tumblr.

Adobe, Google Partner for Edge Web Fonts

Adobe Edge Web Fonts service. Image: Screenshot/Webmonkey.

As part of its new Edge Suite of tools for web developers Adobe has announced Edge Web Fonts, a new free service much like Google Web Fonts.

In fact Adobe has partnered with Google to make most of Google’s open source fonts available through Edge Web Fonts as well. Both services also include the Source Sans Pro open source font family Adobe released earlier this year and the brand-new Source Code Pro.

The full list of fonts available through the service can be found on Adobe’s new Edge Fonts site, though sadly there’s no way to preview them. Previews of what Adobe’s Typekit blog calls the “more popular” options can be found on the Edge Web Fonts page.

Adobe also plans to work with Google to improve many of the fonts, adding hinting for better rendering at smaller sizes and optimizing other aspects for better-looking, better-performing fonts. The company plans to open source its improvements so even if you prefer to stick with Google Web Fonts you’ll still eventually have access to better looking fonts.

So why go with Adobe’s new Edge Fonts over Google’s existing service? There’s really no advantage if you’re already happy with Google’s offering, especially if you’re downloading Google’s fonts and serving them yourself, since that eliminates the chance that Adobe’s (or Google’s) servers will go down and take your fonts with them. Of course Edge Fonts is powered by Typekit, which has proved itself reliable over the years.

For more info on Adobe Edge Web Fonts head on over to the Typekit Blog, or check out the sample code to take them for a spin on your site today.

[Update: Developer Tony Stuck has put together a very nice preview page of the Adobe Edge Fonts for those that would like to actually see the fonts before diving in, which, presumably, is everyone.]