Notes

Podmíněné komentáře efektivně

Ondřej Válka — Sat, 05 Jun 2010 11:00:36 +0000

Ani ten nejlepší kodér se bez nich neobejde. Podmíněné komentáře jsou mocný nástroj k ladění kaskádových stylů pro Internet Explorer. Rád bych zde předvedl, jak je efektivně používat.

Metoda Obelix

Klasický způsob použití podmíněných komentářů spočívá v připojení zvláštního kaskádového stylu v hlavičce HTML dokumentu (pro libovolné IE, pro vybranou verzi IE, příp. pro skupinu verzí).

Metoda Asterix

Pojďme to nyní zkusit trochu jinak. Na tento způsob jsem narazil kdysi kdesi. Popsán je také v SitePoint CSS Reference.



     
          
          Podmíněné komentáře efektivně
     
     
     
     
     
          
     

          ...

Veškerý obsah webu tímto obalíme do jakéhosi kontejneru, který obdrží třídy a identifikátor podle použitého prohlížeče. S kouzelným HTML nápojem tak přichází velká CSS síla.

     input.checkbox { position: relative; top: 3px; }

#ie6 input.checkbox { top: 1px; }
#ie7 input.checkbox,
#ie8 input.checkbox { top: -1px; }

Prakticky tak vzniká podmínka, s níž lze jakoukoliv CSS definici uplatnit pouze pro danou verzi IE. V praxi použito např. na webu ABS Jets.

Co s tím, Panoramixi?

Takto použité podmíněné komentáře zvyšují udržovatelnost a přehlednost kaskádových stylů.

Nemusím pamatovat na vytvoření zvlášních stylopisů. Mám je k dispozici, jakmile potřebuji začít ladit.
Veškěrý kód k jednomu prvku zůstává na jednom místě a netříští se do více souborů. Odpadá nutnost editace a správy takových souborů.
Snadnost použití umocňuje aplikace na prvek , jakožto prvek nejvyšší úrovně – podmíněný selektor díky tomu podmínkou vždy začíná. Sémantický kód není narušen nadbytečným
.
Vyjadřovací síla podmíněných komentářů dostává další rozměr – lze ji uplatnit např. při použití jQuery. Zacílit lze i např. všechny prohlížeče kromě IE 7.

Web site design process

Ondřej Válka — Tue, 25 May 2010 08:07:00 +0000

Just a few notes on the Web site design process. Try to get all the books mentioned and go through them.

Notes on Pain Free Design Sign Off

Ondřej Válka — Tue, 25 May 2010 07:51:23 +0000

Great talk named Pain Free Design Sign Off on handling Web site design process and clients and by Paul Boag at SXSW. Full length video is available via Boagworld.

Client knows his users and business. Ask him about it.
Client should like the web site.
Confrontation to collaboration.
Client searches for problems, designer finds the solutions.
Do have a strong methodology.
Include client early and often.
Educate the client why do you work in such a way.

Návrh GUI komunitního webu

Ondřej Válka — Mon, 24 May 2010 15:13:33 +0000

Dopsal jsem bakalářku. V textu nazvaném Návrh GUI komunitního webu se zabývám metodami uživatelského výzkumu, technikami návrhu webu a kódováním šablon. Plné znění mé bakalářské práce (PDF, 9 MB) zde dávám k dispozici, přílohy jsou na Flickru.

What Would Jacob Do?

Ondřej Válka — Mon, 26 Apr 2010 08:48:26 +0000

We know what’s under the hood. And we know how to polish the hood.

Pavel Maček and I were giving a short talk at UXCamp.cz last Saturday, 24th April. Delighted to announce the slides we recommend you viewing it via the SlideShare if you want to see the original version of the slides.

Thanks Optimal Workshop for the naming inspiration.

Díky za UXCamp.cz

Ondřej Válka — Mon, 26 Apr 2010 08:47:21 +0000

Díky všem účastníků za UXCamp.cz. Bylo to neuvěřitelné!
Díky klukům z Brna!
Díky za inovace: plyn se přidává emocema.
Díky Renči za výtečné buchty a bagety.
Díky panu majiteli Mikulka’s Pizzeria za nevšední gastronomický zážitek.
Díky za připomenutí zapomenuté bundy.
Díky Víťovi za zapůjčení mobilního internetu, zn. pošli účet.
Díky Davidovi Grudlovi za to, že nás vyhecoval!
Díky Martinovi Hassmanovi z Tajného klubu tancujících přednášejících za pohotové předtančení. Experieeence! Desiiign!
Díky Nette komunitě za vstřícně-plamenné přijetí.
Díky řidiči rumunského autobusu za bezpečné přepravení našeho Pátka.
Díky Tomášovi Obšívačovi za fotky.

Designing Web sites for iPad

Ondřej Válka — Mon, 08 Feb 2010 23:32:33 +0000

Our life is easier when facilitated by computers, not when facilitating the life of computers.

Some of the Web site UI design principles that are likely to change in the emerging screen-only computer era. Remember that these principles are just as appropriate for standard Web site UI design as for the iPad specific design.

Rest in pieces

:hover effect is gone.
Tiny UI elements such as small links, tiny carousel controls are out.
Fluid width would never return again.
In pixels we trust, in type-only resizing we don’t.
Cash? No Flash.
Stop the pop-up windows.

Welcome home

Zoom together with details that matter.
A page fold redefined.
The neverending story of 1024×768.
Change of navigation (within a page—horizontal scrolling).
More standards and more AJAX.

And not only the design itself will change—iPad can become a suitable prototyping tool too.

There is no silver bullet

Ondřej Válka — Sun, 31 Jan 2010 09:37:06 +0000

Your PC is a piece of crap because I can’t run my Mac OS X apps on it!

There is no silver bullet in any field. There is no such thing as the best Web browser, the definitive programming language or the ultimate operating system. Neither iPad is. The sooner you realize this, the better for you.

Everyday prototyping

Ondřej Válka — Mon, 18 Jan 2010 00:38:18 +0000

Prototyping is a must. No matter what business you deal with, prototyping should be a welcome guest that helps you figure out the right decisions in quick-and-dirty way. Today I’d like to reveal my prototyping techniques, related not only to Web sites.

Wearable mockup

Designing a T-shirt for signály.cz I have to find out which size of the illustration would fit best. A paper cutout (based on a quick sketch) together with an old blue T-shirt allowed me to show the final product to the client without touching a mouse/keyboard.

All the equipment I used was a pen, a paper, a scissors, a T-shirt and a half-assed mobile phone camera. Having finished the phone call with the client I was able to create an almost final design solution in half an hour.

From paper to computer screen

The text was originally published at Wireframes magazine. Thanks Jakub!

A part of a school project was to create a paper mockup. Having considered all the problems I’m going to resolve I’ve made a list of proper goals:

I have to create a paper prototype of an audio/video manager app. I already have the creative brief and the technical brief.
The prototype should contain all the screens and dialogue boxes of the app. It should be compact, easy to store, portable all-in-one solution.
It should provide quick and fancy user testing.

I wanted to have the whole app in a single notebook. Because the app would have a single window interface, the solution had crossed my mind immediately.

The result with all its benefits you can see below.

See all the cutouts photos at Flickr.

A page = a screen. Using such solution provides you with a lot of space around every screen. Put down some thoughts, notes and explanations.
The main frame of the app can serve as a stencil when drawing new screens. Speeds ups the drawing process and keeps the notebook full of drawings clean and consistent.
In addition, the space around every screen serves as a place for pop-up windows, dialog boxes and other elements made from post-it papers.
The main frame stencil can hide all the stuff around a screen and turns a set of described wireframes into a testable prototype in a moment.

Take such prototype anywhere, create new screens in a bus or train, test with your mates during a coffee break and finally archive it next to your past prototypes. Worth trying, isn’t it?

Keep your eyes on I ♥ wireframes—a popular wireframes showcase.

Off the wall prototype

Since signály.cz is a Christian organization, we wanted to have our very own cross. We’re a non-profit organization, so the design solution has to be low-cost and easy to produce.

Using 2 moodboards I’ve suggested a solution, but it would have been complicated to be produced and also quite different from our corporate design too.

Together with a couple of friends we’ve designed a cross that perfectly goes along with our design style. A few sketches came in handy.

Final production process included a paper prototype of the cross. In 15 minutes we joined some blank papers to show the final shape.

The cross was hand-crafted together with a few skillful friends of mine. Thank you, guys—the result was amazing.

The good, the bad and the ugly sketchbook

I can’t remember how many times a day a open one of my sketchbooks to draw a design concept or put down an inspiring idea.

Actually, I have 3 sketchbooks. The fat one is A4 format where I put every single possible sketch: wireframes, banner proposals, sketches etc.

The big one is A4 format too, suitable for text notes. While reading books or articles I put down notes, diagrams etc.

Don’t miss great Flickr group User Experience Sketches.

The little one is a pocket-size notebook that I try to take with me everywhere. The ideas and concepts I’d like to remember but I haven’t time to carry out now I keep here. Such notebook could one serve as a springboard when searching for ideas.

Show must go on

Now it’s your turn. Show off your projects!

Visibility of system status

Ondřej Válka — Sun, 03 Jan 2010 09:52:14 +0000

Original post Everyday Usability Heuristics: Visibility Of System Status was published at Usability post. Thanks Dmitry!

Two weeks ago, I was watching my 45-year old father browsing the Internet. Every time I watch him I learn a lesson in usability. I’m sure you know with situations like this one – valuable opportunities to learn from the ordinary users for whom we design.

As he is using Windows XP the very first thing he did was that he ran Firefox clicking an icon on the desktop. No response. Nothing happened so after a few seconds he clicked the icon one more time. With his eyes focused on the Firefox icon he clicked the icon again. Everything he got was three Firefox windows opened. Sounds familiar?

The moment I saw this process I realized how applications are launched at my Mac OS X. Being clicked, the Firefox icon starts jumping in the dock. It’s not just a fancy effect, but a really useful feature. Clicking an icon user gets apparent immediate response. Moreover realize what you do: anytime you want to click an element, your eyes sticks to it. You are not watching the pointer, you just use a mouse and click. The same did my father.

Is a small flickering sand-glass beside the pointer more apparent than a big jumping Firefox icon that user’s eyes are sticked to? Keep this in mind and try to design thoughtful user interfaces. It’s not just about applying the Nielsen’s rules.

Of course it doesn’t matter what, but it also matters how.