Krizz's shared items

Zanim w Polsce spopularyzuje się dokonywanie zakupów za pomocą telefonów komórkowych, sprzedawcy mogą wykorzystać potencjał tabletów. To prawda, że ich użytkowników jest jeszcze niewielu (pewnie z 60 000 – 80 000) ale korzystają oni z tabletów w schemacie lepiej pasującym do zakupów on-line. Tablet kojarzy się z konsumpcją mediów, tablet oznacza iż jego użytkownik ma trochę czasu aby usiąść na kanapie i oczekuje by go czymś zainteresować. Przeglądanie ciekawej oferty sklepu? Jak najbardziej.

Tablet ze swym rozmiarem zbliżonym do książki, idealnie nadaje się do prezentacji oferty w stylu katalogu. Pozwala to szczególnie silnym markom tworzyć aplikacje w stylu IKEA Catalogue.

Oczywiście zaraz ktoś wpadł na pomysł agregowania tego rodzaju treści i powstały tabletowe przeglądarki katalogów – jak Google Catalogs, Catalog Spree, Catalogue by TheFind i wiele innych.

Rynek tradycyjnych katalogów się kurczy – z danych jakie podaje Internet Retailer ze stycznia 2012 wynika, że w USA w 2010

• wysłano blisko 13 miliardów katalogów, co stanowi znaczny spadek eo ponad 19 miliardów wysłanych w 2006
• szacuje się, że sprzedaż z katalogów to łącznie 1,4% całego retailu, dla porównania szacuje się, że Internet odpowiada za 22%

Dotychczas próby przenoszenia katalogów do Internetu nie powodziły się gdyż:

• użytkownik przy komputerze ma wiele dystraktorów dookoła i przyzwyczajony jest do wielozadaniowej pracy, co jest mentalną blokadą do poświęcenia się luźnemu przeglądaniu katalogu
• zupełnie inaczej przegląda się katalog papierowy i tego doświadczenia nie odda się za pomocą klawiatury, myszki i monitora – potrzebna jest bezpośrednia interakcja

Firmy, które eksperymentowały jako pierwsze z katalogami na tabletach raportują (znów za IR), że:

• średni czas interakcji z katalogiem to 10 minut!
• konwersja jest dwukrotnie wyższa od konwersji z katalogów on-line realizowanych dla klasycznych komputerów

Tablety mogą być dla katalogów tym czym Kindle dla książek – game-changerem, który w kilka lat zmieni cały rynek. W momencie gdy te dwie krzywe się przetną (mniej druku, więcej tabletów) rynek papierowych katalogów z pewnością przeniesie się szybko na nowe medium.

Czy znacie rynek katalogów drukowanych w Polsce? Jak to wygląda?

Hey User Interface Designers, this UI Toolkit looks like a handy resource.

(Via @cameronmoll)

As a designer, I use iconography in nearly every project I work on. Whether it’s just one arrow icon, social media icons or an entire site filled with badges (like Treehouse!) – icons are something I could never live without. I tip my hat to the illustrators who create such invaluable resources for the rest of us to use. (While we’re at it, let’s thank the typographers and photographers, too!)

There are endless amounts of free and paid icons all over the web, but finding a set with a large quantity of icons that that are customizable, scalable, and of high quality can be hard to come by.

Simplicity

Detailed, glossy icon sets – while they’re pretty to look at – aren’t the best investment to start building your versatile collection. Their complex shapes with layer styles and masks can be tricky or even impossible to manipulate. Something as simple as changing the color (the right way!) or adjusting paths can turn into a painful endeavor.

Don’t get me wrong, they can be great for a specific project, but don’t expect to use them over and over again unless you want your work to start looking redundant.

In my experience, I find that when purchasing simpler sets you get sharper, more pixel-perfect icons, since there’s no gloss, glow or shadow to distract from the quality of the shape. Start with a simple icon as your base, and then add the gloss and glows if you so desire.

Scalability

I prefer to invest in icon sets that contain entirely vector shapes, so I can scale the icon to whatever size I need – for web or for print.

PNG or GIF icon sets can be great for the web if they’re at the exact size you need them to be, but scaling down (and up, of course) will distort the shape. This is unavoidable, because any transformation made to a raster file will ultimately bring down the quality of the image.

Recently we’ve been seeing more and more icons that are actually web fonts, completely eliminating the need to export icons as images for your website. Small file sizes and scalability? Awesome. The only downfall is that you’re limited to styling the icon with CSS. (Which really isn’t too much of a limitation these days!)

Quantity

Quantity is super important when looking to purchase icons. Make sure you have enough to work with so you don’t have to worry about mixing too many different sets of icons in one design. By purchasing a large set of icons with lots of variety (or a series of sets from the same illustrator) you know the general style will stay consistent throughout your design.

Quality

I used to scrounge the web for free icons. There are good free icons out there, but they’re hard to find. It wasn’t until I started freelancing that I realized I was spending quality time trying to find the free ones, when I could have been working and earning money.

You’ll notice many of the free icon sets aren’t crafted with the same level of detail as the ones that will cost you. Why should they be if they’re not being compensated for their time? If you pay for a quality set, you can almost guarantee it’s quality.

So invest in a few great sets and you won’t need to scrounge like I did. Not to mention you support the illustrators for their hard work, say thank you for all the time they saved you, and fund their efforts to make more great icon sets!

Sets to Invest In

These are some sets that will get you some serious bang for your buck. There are tons of icon sets I could list, but I wanted to keep it short to include only sets that contain a significant amount of beautifully crafted, simple icons. If there are any icon sets you swear by that aren’t on this list (vector and/or type) please let me know and I’ll add it!

Helveticons – $279 for 245 icons (Vector)

Helveticons by Goodbye Horses

Pictos Complete – $240 for 4 sets (Vector & Type)

Pictos by Drew Wilson

Symbolicons – $35 for 400 icons (Vector)

Symbolicons by Sensible World

Glyphish – $25 for 400 icons (Vector)

Glyphish by Joseph Wain

Tipogram – $18 for 90 icons (Vector & Type)

Tipogram by Tom Creighton

Gedy’s Social Media Icons – $5 for 107 icons (Vector)

(Best 5 bucks you’ll ever spend.)

Social Media Icons by Lifetree Creative

Iconic – FREE 177 icons (Vector & Type)

Iconic by P.J. Onori

The Noun Project – FREE (Vector)

The Noun Project

Companies and consumers trying to decide which mobile/smartphone OS to adopt might want to look over Michael DeGusta's Android support history chart. DeGusta paints a sad story indeed, demonstrating that no Android phone has consistently received timely OS updates over its lifecycle. In fact, some phones have never been current at all, shipping with Android releases that were two major versions behind, and never receiving updates.

Sponsor

The best Android phone to have, says DeGusta, is the HTC Nexus One. At nearly two years after release, the Nexus One has only suffered a brief two-month period of being just one version behind the major Android release.

Assuming most phones are sold with a two-year contract period, only two Android phones sold in the U.S. are out of contract. The HTC G1, the HTC MyTouch 3G and HTC Hero have all entered their third year. Several Android phones are reaching the two-year mark, including the HTC Droid Eris, Motorola Droid and Cliq, and Samsung Moment.

The numbers are ugly. Seven of the 18 phones never had a current Android release, and 13 of the 18 phones stopped receiving updates entirely before the device stopped selling. Not just major OS updates, but security updates.

The Ice Cream Sandwich (ICS) update you've been hearing so much about? Yeah, you probably won't be seeing that on 16 of the 18 phones that DeGusta examined.

Why This is Bad

Now, as long as the phone continues to work as well as it did when it was purchased, you might think this is no big deal. The consumer gets what they paid for, and they have all the features they signed up for, right?

As DeGusta points out, and should be obvious, there's a small matter of security updates. These aren't just phones, they're computers sitting in your pocket. Computers that have security vulnerabilities.

But this also hampers developers because they're stuck targeting old, old, old releases of Android. So all the nifty new features that Google likes to talk about with major releases, like ICS? Yeah, no go. You would think that the Android folks would want to keep developers happy. But Android developers are stuck targeting ancient releases of Android if they want to be compatible with the majority of phones on the market.

This is one major argument in favor of Apple and iOS: It doesn't depend on the carriers or other hardware vendors to do updates. Apple releases a new version of iOS, you get it whether you're on AT&ampT, Verizon or Sprint. No doubt some users are still using old releases of iOS, but that's by choice. Unless you're willing to resort to rooting your phone, you're stuck with the old.

As a long-time Linux guy, I really want to like Android. A year ago if you'd asked me about Android fragmentation, I would have said there's no way it would be this bad. But the situation is really, really bad. If security and OS updates are high on your list of priorites, iOS seems to be the best choice.

Editor’s note: This article is the second piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community (the first article covered PrefixFree, a new tool be Lea Verou). ZURB are well-known for their wireframing and prototyping tools and in this post they present their recent tool, Foundation, a framework to help you build prototypes and production code that’s truly responsive.

You’ve probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. It’s a hot topic right now, and with good reason: alternative devices outsell desktop PCs 4 to 1 already, and within three years more Internet traffic in the US will go through mobile devices than through laptops or desktops.

All of this is forcing a convergence on what Jeremy Keith calls the “one Web”: a single Web that doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it.

What we found at ZURB was that while the concept of one Web is strong and the need for responsive websites great, the tools to help us quickly build that way just didn’t exist. That’s why we built Foundation, a framework to help you build prototypes and production code that’s truly responsive.

The Problem with Global CSS

For years at ZURB, we used and refined a global CSS file that included a nice 960 grid, typography styles, buttons and other common elements. The trouble with our global CSS was that none of these pieces were written to be used by others, so they required a good deal of ramping up and training, with no great documentation.

Our CSS style guide had a lot of good global elements, but it wasn’t well documented, and it certainly wasn’t ready for other devices.

The bigger problem was that it wasn’t designed to be responsive or mobile-friendly in any way. We were stuck in the same rut that a lot of designers are in: creating a 1000-pixel-wide canvas, putting a 960 grid on it, and calling it a day. Our tools were built to support that workflow. So, we rewrote it into Foundation, a framework for everyone to be able to rapidly prototype in a responsive way.

Foundation is an MIT-licensed framework that includes a nestable arbitrary-width responsive grid; mobile styles, buttons and typography; layout affordances such as tabs and pagination; forms; and useful JavaScript plugins. We wrote or packaged all of these pieces to achieve a few goals:

1. Quickly train new designers, inside and outside ZURB, to use a common framework;
2. Rapidly prototype websites for desktops and any mobile device;
3. Easily customize and complete the prototype to turn it into production code for particular projects or clients.

The first goal can’t be overstated; the value of having a single set of styles and best practices that the team can iterate on as a whole and communicate to our clients is tremendous. We can ramp up new designers much more quickly, build things faster and work together more easily. On one recent project, we even got a volunteer sufficiently up to speed on Foundation that we could collaborate on code — and it took only about 15 minutes.

So, How Does Foundation Work?

The core of Foundation can be summed up in a few points:

• A 12-column, percentage-based grid with an arbitrary maximum width.
  The grid can be nested and used for quite complex layouts, and it works all the way back to IE 7. The grid reshuffles itself for smaller devices.
• Image styles that disregard pixels.
  Images in Foundation are scaled by the grid to different widths.
• UI and layout elements.
  Foundation includes common pieces such as typography and forms, as well as tabs, pagination, N-up grids and more.
• Mobile visibility classes.Rapidly prototyping is partly about having built-in functionality to tailor the experience.
  Foundation lets you very quickly hide and show elements on desktops, tablets and phones.

We deliberately built Foundation as a starting point, not as a style guide. We’ve included some styles to help you rapidly build something clickable and usable, but not something stylistically complete. Everything in Foundation is meant to be customized, including button styles, form styles (even custom radio, checkbox and select elements), typography, and layout elements such as tabs.

The Grid

A lot of grids are floating around, including some very good ones right here on Smashing Coding. Grid systems have a few issues, though, and we built Foundation to tackle them… well, some of them.

Fluidity

One of the critical pieces of device-agnostic design is having a fluid layout that conforms to the size (and orientation) of the device. Foundation’s grid is completely fluid, with percentage-based widths and margins, and it works all the way back to IE 7 (but not IE 6 — philosophically speaking, acting like IE 6 doesn’t exist makes sense at this point). The HTML markup is pretty simple. Here’s an example of the grid in use, where we nest it for a more complex layout:

<div class="row">
  <div class="eight columns">
	<p>…</p>
	<div class="row">
	  <div class="six columns">
	    <h5>Another Section (.six.columns)</h5>
	    <p>…</p>
  </div>
	  <div class="six columns">
	    <h5>Another Section (.six.columns)</h5>
	    <p>…</p>
	  </div>
      </div>
    <p>Now the nested row has been closed, and we're back to the original eight-column section.</p>
  </div>
</div>

You can check out the above code on this example page.

Here are some of the built-in grid constructs, all of which scale with the browser window.

Responsiveness

The second critical piece is for the grid to be able to easily adapt to small devices and their unique constraints. We tackled this in three ways:

• On small devices (such as phones), the grid simply stacks vertically, with every column running the full width.
• We’ve also included block-grid classes, which are definitions for ULs that can be two-up through five-up and that remain a grid even on very small devices.
• And we have mobile visibility classes. These are a group of styles that enable you to quickly try things out by hiding and showing elements on different kinds of devices. You can attach classes like so:

<div class="hide-on-phones">
	<p>This is a paragraph that we don't want to see on small devices.</p>
</div>
<div class="show-on-phones">
	<p>This paragraph will be shown only on phones, not on tablets or desktops.</p>
</div>

Another interesting use for the classes is to prototype a common mobile consideration: placing mobile navigation at the bottom, as opposed to its more common placement at the top. You could do this:

<nav class="hide-on-phones">
  <ul>
    <li><a href=#>…<a></li>
    <li><a href=#>…<a></li>
    <li><a href=#>…<a></li>
  </ul>
</nav>
…
<nav class="show-on-phones">
  <dl class="mobile tabs">
    <dd><a href="#">…</a></dd>
    <dd><a href="#">…</a></dd>
    <dd><a href="#">…</a></dd>
  </dl>
</nav>

Foundation lets you write code once and show it on different devices easily.

Semantics

This one is tricky. A very compelling case is to be made that grid systems are by nature not semantic. This is partly true; they’re still descriptive of their function, but they do break the separation of data and display.

We didn’t want to base the Foundation framework on another extension, such as LESS. LESS is a great tool enabling you to use variables, shortcuts and more in your CSS, but we didn’t want to have to rely on it and add another barrier to using Foundation. The recent article we mentioned above actually fixed the data and display issue of grids by using LESS, which is awesome, but Foundation doesn’t fix that. Here’s why…

All of these methods are a stopgap. The replacement technique might come out next month or next year, but really all of these tools will change drastically in the very near future. Tools like LESS help us get a little closer to a very clean solution, but at a higher technology and learning cost. We wanted Foundation to be the fastest way to prototype for all kinds of devices, so we paid a small price for truly separated markup.

Rapid Prototyping Examples

Let’s look at a recent example for which Foundation was used. Every year, we do a 24-hour design marathon for a local non-profit, usually producing new marketing collateral and a new website. This year, we chose Rebekah Children’s Services, a great organization that helps with adoptions and takes care of disadvantaged kids.

This year, we wanted to build a website that was really responsive, and we had very little time to do it. Using just Foundation, we started prototyping the website based on some sketches we had done. In two hours, we managed to build this prototype.

Using Foundation, we built the prototype on the left in two hours (including every screen), and then started modifying it until it became the final website on the right.

It’s not terribly pretty, but it did give us something we could click around in, add copy to and iterate on. In the prototype, we used only a bare minimum of custom styles to more accurately represent the intended visuals.

Once we completed the prototype, we were able to complete the visual design and apply it to the existing Foundation code base to produce the final website. The final website retains all of Foundation’s framework, with the new styles applied on top of it.

How to Further Tailor the Experience

We recently launched an app through which to give traditional design feedback on mockups and websites. It’s called Spur, and it has been great fun for us; not only is it in our wheelhouse (for design feedback), but building a responsive Web app was an awesome opportunity.

Spur has a number of tools and actions, as well as some simple forms and a fairly complex JavaScript- and HTML-loading animation. Adapting all of this to mobile devices could have been really painful, but by starting with Foundation, we cut down on that considerably and prototyped the app quickly.

Spur on a desktop is different than Spur on a mobile device such as an iPhone.

Spur helped us get more comfortable with the constraints of a given device, including screen size, orientation, tap target size and copy. Spur is simpler on smaller devices, but it’s not stripped down. You can still capture a page, view it through the various filters, and share it with someone else.

Rapid Prototyping Is Required Now

The days of creating a blank Photoshop canvas and laying down a 960 grid are over, even if some of us are still working in that shared fantasy world. Mobile devices — or, let’s just say, devices beyond just laptops and desktops — are already prevalent and will only become more ubiquitous.

Don’t build a desktop website that’s pixel-perfect before thinking about other devices; get used to designing for several different sizes, and then quickly prototype your design to get a feel for the flow, function and interaction.

We built Foundation to help us do this faster and to develop better websites and apps for us and our clients. We feel so strongly about the need for this that Foundation is MIT-licensed and completely free to use, forever. If you try it out and have success with it, let us know. We’d love to hear about it, just as we’d love to hear about bugs or issues that you’ve run into.

We’re excited about this watershed moment in Web design (and in connectivity and data availability), and you should be, too: our industry will change more in the next three years than it has in its entire history. We hope this helps.

(al)

© ZURB for Smashing Magazine, 2011.

Care to see just what Apple means when they talk about Android’s fragmentation problem? Check out this incredible chart put together by Michael Degusta. Not only are most Android phones out of date, but almost half of the smartphones on this chart have never been up-to-date with the latest version of Android OS, even at release!

Comparatively, every release of iOS has been backwards compatible for at least three years. No wonder the iPhone developer community is so strong: devs and users alike can count on almost every iPhone owner being on the current, most bug-free version of iOS!

• Apple Releases iTunes 10.5 Beta 6, iWork for iOS Beta 2, Xcode 4.2 DP 6 and New Apple TV Beta Software To Devs
• Epic To Release Unreal Development Kit To iOS Devs For Free
• CrossLoop Brings Remote Support to Macs
• Report: OS X Lion, Sandy Bridge MacBook Airs To Be Released July 14th
• Updated Seas0nPass Supports Untethered AppleTV Jailbreak