Introducing Responsive Web Typography With FlowType.JS

It's our great pleasure to support active members of the Web design and development community. Today, we're proud to present FlowType.JS that allows a perfect character count per line at any screen width. This article is yet another special of our series of various tools, libraries and techniques that we've published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb and Jelly Navigation Menu. — Ed.

While working on an image-heavy site for Simple Focus, a couple of our designers, John Wilson and Casey Zumwalt, noticed how images always scaled perfectly. Pull the corner of the browser window and the images expand to fill the space. Push back the corner, they shrink and fall into place. The line length of hypertext, on the other hand, changes based on its parent element's width, which has a negative effect on readability.

Introducing Responsive Web Typography With FlowType.JS

"Wouldn't it be nice," John asked, "if text worked more like images?" Casey assured him that it could, with a jQuery plugin, if only they could figure out the math.

Read more...

Introduction To Polygonal Modeling And Three.js

When the third dimension is introduced into an entertainment medium, it forever changes the way that medium is presented and consumed. The photorealism of the CGI dinosaurs in Jurassic Park opened the doors for film creators to use computers to create visual environments that never would have been possible otherwise.

Introduction To Polygonal Modeling And Three.js

VeggieTales spawned a new type of cartoon, one that uses 3-D objects instead of drawings and which inspired the creation of everything from Pixar and Dreamcast blockbusters to Saturday morning cartoons. Computer software was greatly affected by this new trend in visual media.

Read more...
Advertisement Advertise with us!

Addressing The Responsive Images Performance Problem: A Case Study

Five-inch mobile devices are on the market that have the same screen resolution as 50-inch TVs. We have users with unlimited high-speed broadband as well as users who pay money for each megabyte transferred. Responsive design for images is about optimizing the process of serving images to users.

Addressing The Responsive Images Performance Problem: A Case Study

In this article, we will share our responsive image technique, the “padding-bottom” technique, which we researched and implemented on the mobile version of the Swedish news website Aftonbladet.

Read more...

Freebie: E-Commerce Icon Set (33 Icons, PNG, PS, AI)

Today we are happy to feature a set of 33 flat e-commerce icons, created exclusively for Smashing Magazine by Responsive. The icons are ideally suited to e-commerce projects and include many popular payment providers, including Bitcoin.

Freebie: E-Commerce Icon Set (33 Icons, PNG, PS, AI)

The icons come in different-sized PNGs (32 × 32, 64 × 64, 128 × 128 and 256 × 256 pixels), and the set includes Photoshop and Illustrator files containing all of the icons.

Read more...

Designing The Words: Why Copy Is A Design Issue

The relationship between copy and design has been covered many times on Smashing Magazine. Working in a content-focused industry, we need to keep this issue pretty close to heart; creating great copy is pointless if it is visually uninspiring or unreadable. Likewise, if the content doesn’t deliver, then even the most attractive page won’t hold the reader’s attention.

Designing The Words: Why Copy Is A Design Issue

Yet much of the discussion so far has concentrated on issues such as microcopy — the small bits of text that instruct the reader on how to interact with the website — and the minutiae of user experience. This stuff is essential, of course, but in this article we’d like to broaden our focus to look at some of the fundamental mistakes behind bad copy.

Read more...

Responsive Navigation On Complex Websites

Central to a solid user experience is a well-structured, simple navigation system. Over the past few months, I’ve been involved in launching two large institutional websites with complex navigation systems.

Responsive Navigation On Complex Websites

Maintaining simplicity on such large websites becomes increasingly difficult as content requirements grow and tiers of navigation are added, not to mention the extra complexity added by small screens.

Read more...

Smashing Conference Live — Day 2

Today is the second and last day of the Smashing Conference. As promised, we've collected insights, photos and highlights just for you — live from the conference venue. You can also track the tweets from the conference by following the hashtag #smashingconf and the permalink for live updates.

Smashing Conference Live — Day 1

Please note that no live stream is available, but all videos will be made available for free after the event. You might want to check out the schedule of the conference as well and the report from day 1.

Read more...

↑ Back to top