BlogmyQuery – BMQ

I sat down for a while with the excellent PeepCode folks and recorded a Play by Play — a real time video of me solving a design problem. A bit terrifying, a bit fun. Check it out if you’d like to see me bumble around.

Responsible responsive design demands responsive images—images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users. Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed—and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the picture element, and proposing a more complicated img set element. Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them� crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.

The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.

No raster images or sprites were used. Instead, vector icons were inserted using a custom font file, an @font-face rule and pseudo elements. For more information, John Hicks has an informative write-up on this technique.

Download The Button Set For Free

This button set is free to use and extend, personally or commercially. No attribution is required.

• Preview
• Demo
• Download the package (ZIP, 147 KB)
• GitHub repository (handwritten CSS)
• Sass framework (six buttons) (by @adamstac)

Features

• 100%-vector CSS3 buttons
• @font-face icons and custom font files
• 72 services supported
• Button and icon versions supported
• Em sizing for full scalability
• Generic primary and secondary action buttons for consistency
• Graceful degradation on older browsers

Preview

Screenshots of each set are below. Or view a live demo.

Usage

The button set was designed with simplicity and semantics in mind. No unnecessary or extra markup is required, and button types are called through class names. Call the zocial.css file on your page (make sure the font files and the zocial.css file are in the same directory). Buttons can be displayed with the following markup:

<button class="zocial facebook">Sign in with Facebook</button>

The parent element is agnostic, so you may use <a>, <div> or <button>, but it must contain a child <span> element. [Thanks, Lea!]

To choose buttons from the set, include the appropriate class name for the service, such as .dropbox, .linkedin or .twitter.

Icon versions can be displayed by including an extra .icon class, as follows:

<a class="zocial quora icon">Follow me on Quora</a>

More code samples are available on the Zocial page.

(al)

---

© Sam Collins for Smashing Magazine, 2012.

Editor’s Note: This post is the first in the new Smashing Daily series on Smashing Magazine, where we highlight items to help you stay on the top of what’s going on in the industry. Vasilis van Gemert will carefully pick the most interesting discussions, tools, techniques and articles that were published recently and present them in a nice compact overview. Smashing Daily #2 and Smashing Daily #3 are now published, too.

Vasilis goes through dozens of RSS feeds and hundreds of tweets so that you don’t have to. Do you find the new series interesting? What would you like to have? And what wouldn’t you like to see? Let us know! We’d love to hear your feedback in the comments!

A couple of words from Vasilis himself:

“Years ago I started collecting links, and once a week I would write an email to my colleagues with a small introduction to every link. Later on I decided that more people than just my colleagues might benefit from this collection, so I decided to publish everything on The Daily Nerd.

“Last November, during the Fronteers conference in Amsterdam, Lea Verou convinced me to start writing in English; up until then, I wrote my comments in Dutch. More and more people started following me, and I think that’s a good thing; I believe more talented people than me should know the things I know. By more talented people, I of course mean you, the reader, so you can understand just how excited I was when Vitaly Friedman asked me if I wanted to start publishing the Daily Nerd on Smashing Magazine. So, here we are, the first episode of the Smashing Daily! I hope you like it!”

Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs

Your local mobile device lab
Jeremy Keith started an open local mobile device lab in Brighton, and he urges you to do the same in your home town.

Web font performance: Weighing @font-face options and alternatives
An important part of design and UX is performance, so when you decide to use a Web font, you should definitely know what the negative impact that choice might have on your users. Here’s an excellent in-depth article about font performance. Yes, you should definitely read it (and the comments, too, because they’re actually quite good).

Miscellany #7,� Shady Characters
Here’s a short post by Keith Houston, with news and thoughts about unusual characters. A pleasure to read, like everything else on his blog.

TypeStacks: Instant font stacks based on your font
Here’s a nice tool that suggests a font stack based on your chosen font. It knows the fonts served by TypeKit, although it doesn’t seem to know too many Google Fonts. Still, a very handy tool.

Let’s Get Physical (Units)
There are a few occasions when we’d love to use physical units (such as cm and in), but unfortunately these units don’t work as expected in CSS. Boris Smus has written an extensive article about these units, how they should work, why we want them and why they work the way they work.

Cutting the Mustard
The BBC is working on a responsive news website, and it is sharing everything it finds out, which is extremely useful. In this article Tom Maslen explains how the BBC manages browser support. An absolute must read for anybody who is struggling with the growing complexity of browser support. This solution (or something similar) should be implemented everywhere.

H5BP
Here’s an overview of projects related to the HTML5 Boilerplate. Some excellent stuff is in there, but before you start using everything in there, remember the excellent advice of Rachel Andrew: “Stop solving problems you don’t yet have.�

html5shiv and Serving Content From Code Repositories
Never just link to scripts hosted on other domains, because you won’t always get the advantages, such as caching and Gzip. This is explained in detail in this excellent article. Yes, you should definitely read it.

Thinking Async
Loading an external JavaScript file can block the rest of the page from loading, which of course is a major performance and usability problem. The solution is to load scripts asynchronously, and Chris Coyier shows us ways to do that, extensively as always.

Experience Design Is the Future of Mobile Payments
“Holisticâ€� means something like “complete.â€� So, Perry Chan argues that a “completeâ€� user experience is the future of mobile payments. I actually think that right now, in the short run, whatever the future, the things we have right now are just terrible. Anything would less painful (at least here in the Netherlands). (I also think the future of UX on the Web is bigger fonts — much bigger).

Learn CSS selectors interactively
CSS selectors can be pretty hard to understand, especially the difference between nth-child and nth-of-type. There are many tools to visualize the difference, and this is another one by Ben Howdle.

Allen Tan on highlighting and focus,� Readmill Blog
My father always scribbles annotations in the margins of his paper books. He’s probably been doing this for more than 50 years now, and if somehow we could assemble these annotations, it would be an incredibly interesting and useful database. But as it is, it’s pretty useless. Allen Tan writes about this and more in this article on modern digital reading.

Browser Support
If, for whatever reason, you don’t like any of the tools or websites out there that tell you what browsers support what CSS feature, then this tool might be the one you’re looking for. I still prefer When Can I Use… or Mozilla Developer Network Docs, though.

Stamen
Your app needs a map, but you want something other than boring old Google Maps? You could try OpenStreetMap with one of these beautiful map tiles.

Browser Support? Forget It!
What does “browser support” mean exactly? Some think it means pixel perfection for a predefined set of browsers. According to David Bushell, it means something else. This is a good read for people (or clients) who struggle with the ever-expanding browser landscape.

The id Attribute Got More classy in HTML5
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time, which generates a string like 1336984564. The problem is that in HTML, an ID had to begin with a letter. Mathias Bynens tells us if this is still the case in HTML5.

Autofill City and State From Zip Code With Ziptastic
Filling out forms is a pain in the butt, especially on devices without a traditional keyboard. You should be asking users for as little information as possible. If there were a way to make things easier, you should probably do it. For instance, you could prefill parts of an address when the user enters their ZIP code. Chris Coyier shows us what a flow like that could look like.

CSS Layout Gets Smarter With calc()
A thing we needed desperately before being able to use box-sizing: border-box was the ability to mix different CSS units. There are still some use cases for this, though, and luckily more and more browsers are supporting the calc() property. Here’s how it works.

Last Click

The Origin of the <blink> Tag
Here’s the true story behind the blink tag by the guy who came up with the idea, Louis J. Montulli II. A nice anecdote on early browser history.

mr. div
Of course, you could use a simple Web technology like canvas or WebGL to generate beautiful animations, but why do it the easy way when you could use the ever-amazing animated GIF? Here’s a great Tumblr blog to follow if you’re looking for some random fantastic 4-D inspiration.

What Do You Think?

Do you like this new series? What would you like to see in it? Please provide some feedback, and let us know what you think!

(al) (vf) (il)

---

© Smashing Editorial for Smashing Magazine, 2012.

Editor’s Note – Though Noupe is affiliated with Smashing Magazine, this piece is strictly the opinion of the author.

When I was first contacted with a reviewer’s copy of The Smashing Book #3 I was both excited, and a little bit terrified. I was extremely excited to get a peek at the book before its release, and to get my hands on the content I had eagerly been anticipating since the project was announced. I was a bit terrified because the book’s theme of ‘Redesign the Web’, was not only one I had written on in the past, but after redesigning our own sites not long ago, I was afraid to find out that we had done it all wrong.

All the fears aside, with the first two books as part of our design reading library, I had no doubt that this third tome would live up to its predecessors. And I would not have to get too far into the book to be proven right.

A Smashing Introduction

As I dove right into the book’s first chapter on The Business Side of Redesign, I was inundated with so much practical, applicable advice on how to present a redesign project to clients and how realigning is the much better route. Which was nice to read after the initial fears of finding out we had redesigned our own personal sites incorrectly had surfaced, but as big believers in realignment, the book was somewhat reassuring. This was just an added bonus.

As the chapter went on, I found myself glad that I was reading a digital copy. Had it been an analog version, I would have been running through highlighters by the dozens. Nearly every page presented me with great information too mark and make note of. This trend did not stop at the first chapter’s end either. The entire book proved to be packed of notable advice from the crack crew that Smashing assembled for the team. And every single one of them, brought their ‘A’ game.

If you haven’t seen the breakdown of the authors and reviewers for each chapter, then you really are in for a treat. It reads more like a web design and development dream team than an actual book roster. But when you look at all that went into the book, the budget, time, and the expertise, you begin to understand just how fantastic a book it has the potential to be. And with each chapter I took in, those expectations of the book’s potential were constantly exceeded.

The Chapters

As previously mentioned, the first chapter deals with the business side of the website redesign, which is a really great introduction because it hints that the further chapters beyond it will help complete the picture, and that all aspects of the redesign will be handled. And that is one of the best things about the book. It does such a good job ensuring that you get the whole picture.

Each of Smashing Book #3′s 11 chapters goes through all facets of a redesign, from beginning to end, with a fine tooth comb. No detail is overlooked, and if you get your hands on ‘The Extension’, Smashing Book #3 1/3 you also get a case study of the Smashing Magazine redesign to show all of the thoughtful advice applied in a real world setting; which sounds like a very intriguing companion read. Admittedly, I have not had the chance to check that out yet.

One of the most information packed chapters that I was really surprised by, was chapter 7 ‘Designing for the Future Using Photoshop’ from Marc Edwards and Jon Hicks. The chapter was as unexpected as it was informative, and really grabbed my attention. Not that there were any chapters where the content felt lacking, but this chapter just seemed to really overflow with its detailed dissection of Photoshop. And in a completely accessible way.

Which is actually one of the highlights of the entire book. The accessibility it provides to the subject at hand. Redesigning the web. No matter what element you are tackling, or if you are in charge of the whole thing, all that you need to steer your redesign project towards success is contained in the chapters of this book. And with information geared towards all parties involved, it really should be required reading for anyone working or hiring for a redesign. I can see it being something of a survivor’s guide to future projects. Always within reach.

Chapter 8, Redesigning With Personality from Aarron Walter and Denise Jacobs, contains one of my favorite sections that really challenged me to think of websites in a different way. Products Are People Too did a good job of taking a complex issue, and boiling it down into a very digestible manner. We are often told that we need to build trust through brands and design, and this chapter delivers the goods on cementing that trust by adding in personality. From the chapter’s first line, “Redesigning a website can be the seven-layer taco dip of hell” I was sold. Because I knew that feeling.

The last chapter I will talk about specifically before I move on, was Chapter 10 Workflow Redesigned: A Future Friendly Approach by Stephen Hay and Bryan Rieger, which was another example of challenging me to approach future projects differently. With responsive web design being an important aspect of any web design project these days, this chapter comes in and lays out a plan of attack that I am sure readers will be adopting for themselves. It will certainly at least get people talking about it.

The Fun

Just like Smashing Magazine and the team behind it, Smashing Book #3 is loaded with personality and a lot of charm. From the title of the book being spelled out through the chapters colorfully illustrated drop caps to the playful nature’s of many of the book’s authors, the book is as much fun as one would expect. They have even said that there are hundreds of animals hidden in the book’s illustrations, so that you can go on a bit of a scavenger hunt to see if you can find all 623 of them.

Overall, the journey it takes you on from beginning to end is entertaining, well constructed, highly communicative, and as mentioned challenging. It doesn’t just make you want to be a better designer or developer on your projects, it gives you actual steps to take and ways to accomplish it. And where some books tend more towards theory, with so many talented experts coming to the table to offer real world advice and examples, this book takes the theories and arms you for putting them into practice.

The Conclusion

I thoroughly enjoyed the Smashing Book #3 and would recommend it for anyone in the field or with a site of their own. It gives great insight into where the industry currently stands, and how to take on these often monster projects with a bit more ease and confidence. Are you planning on grabbing a copy, or do you already have one on the way? What entices, or intrigues you the most about this newest Smashing book?

(rb)