Archive for the ‘Visual Design’ Category

File Under: Responsive Design, Visual Design
Oct
18
2012

Put Your Responsive Ideas to Paper With ‘Responsive Sketchsheets’

By

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
Oct
4
2012

Bootstrap Framework Plans to Give Twitter the Boot

By

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.

Tags:
File Under: Visual Design, Web Services
Sep
25
2012

Adobe, Google Partner for Edge Web Fonts

By

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.]

Tags: , ,
File Under: CSS, Responsive Design, Visual Design
Sep
6
2012

Drink in the Responsive Grid With ‘Bourbon Neat’

By

CSS grid frameworks are awesome. They simplify development, eliminating a ton of math and letting you focus on what makes your site your site rather than the underlying structure.

Sadly, it’s nearly impossible to create a reusable, responsive grid that doesn’t litter your HTML with grid-specific class names. Even if the non-semantic class names don’t bother you, there’s no getting around the fact that it’s a pain to update and maintain that code.

The solution is to step back from the CSS and turn to a CSS pre-processor like SASS.

That’s what Bourbon Neat does to create one of the easiest to use SASS-based fluid grid systems we’ve come across. The clever name comes from the fact that Neat relies on the Bourbon SASS library and extends it to create a fluid, em-based grid framework.

The project was created by the developers at Thoughtbot.com. Here’s what the docs have to say:

Why another grid framework?

Because we are not happy with other frameworks. We built Neat with the aim of promoting clean and semantic markup; it relies entirely on SASS mixins and does not pollute your HTML with presentation classes and extra wrapping divs.

Using SASS 3.2 block mixins, Neat makes it extremely easy to build responsive layouts… Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and even store these values in project-wide variables to DRY up your code.

To give it a try, just install Neat and its dependencies and check out the guide to using Neat over on GitHub. Be sure to look over the example page to get an idea of what you can do with Neat and how it works. If you’re a Rails developer there’s a Neat gem you can install.

The power of Bourbon Neat lies in some new features in SASS 3.2, namely block mixins, which allow you to use the @mixin syntax to “name” media queries. To see how Bourbon is using that feature, check out the source code on GitHub.

File Under: Responsive Design, Templates, Visual Design
Aug
29
2012

WordPress Embraces Responsive Design With New ‘Twenty Twelve’ Theme

By

Meet Twenty Twelve, the latest default WordPress theme. Image: Screenshot/Webmonkey.

The default WordPress theme is quite possibly the most widely used design on the web; the minute you sign up for or install WordPress you have a website that uses the default theme. Every year WordPress unveils a new look that will grace every “just another WordPress site.”

This year’s theme, Twenty Twelve, is the first to embrace responsive design, adapting its layout to fit any screen. The WordPress admin pages are already responsive, and the last few default WordPress themes have accommodated small screens, even using some responsive design tools like CSS @media, but this is the first default theme to fully embrace responsive design and fluidly adapt to any screen.

Twenty Twelve marks something of a departure for the default theme. Gone are the banners and featured images atop posts. Instead Twenty Twelve sticks with a largely black-and-white look that puts the emphasis on typography and a new typeface, Open Sans.

If you’d like to use Twenty Twelve on your WordPress.com site, just head to the dashboard and select Themes, (under Appearance). If you’re hosting your own WordPress install, you’ll soon have access via the Extend theme directory. And of course the new theme will be bundled with WordPress 3.5 due later this year.

This year’s theme was designed by former NFL player Drew Strojny, though as with all things WordPress there was plenty of help from the WordPress community. The WordPress blog has more details about Twenty Twelve and there’s a live demo you can check out as well.

Tags:
« OLDER POSTS