I strongly believe that mental models are the key to make better ideas, better products, more fun and more success. It’s only important to find out what goes with what…
A nice example on smashing magazine
Personal state in Responsive webdesign
I’ve currently made three websites for my employer using responsive webdesign principles and techniques. These websites are made according to the methodology described in the responsive webdesign book written by Ethan Marcotte(2010).
My current conclusion after making three website responsive design aware is stretching and frustrating at the same time. It’s stretching because you have to think outside the static pixelated 960 grids and building blocks like you did before in Lego. And thereby you have unlimited possibilities. It’s frustrating at the same time because you have to cover a fluid grid that works simultaneous in all different browser without making to many mediaqueries for different resolution. …I found out that it’s pretty easy to make a card house that falls apart easily using media query. Understanding the use of mediaquery properties is only possible if you learn it by doing it.
Developing responsive webdesign templates is about planning and anticipating like you driving a race car just before you heading a corner and than have to deside with which speed you can take the corner the best. If you take the corner once well it’s only your task to automate it.
My next-practices
- Ethan Marcotte wrote his book about Responsive webdesign in late 2010. I’m currently trying to step a bit away of his advances and combine it with more recent views.
- Explore responsive design patterns for example lukew
- Think outside the px to % fluid transformation. Start creating elastic grids using em.
- Using a starting point HTML boilerplate like 320up
- increase the file size and speed up everything.
- Tiles should make responsive design process easier: Stop designing visual designs pixel precise in fireworks. Start making tiles with elements and building blocks.
- Following workshops related to Responsive design
F1 onboard camera views ’95
I’ve f0und a few c00l on board camera views from the legendary year 1995. The year after Ayrton Senna died, where Schumacher became world champion for the second time, the last year of the v12 ferrari engines(see the red cars in this movie) and at least my first live F1 experience on the Spa-Francorchamps track.
Prize for our educational ipad app
29 march 2012 we won the IPON 2012 (dutch education innovation price) with our team at Waag Society for the project ‘Digital news collage’.
From april till june 2011 I’ve developed with the R&D team a tool for education. With this tool students are able to scan newspapers and annotate them with digital labels and a marker. After finishing the ‘collage’, they where able to throw their work to the digital teachers board and discuss it with the other students.
There’s one lesson I’ve learned while developing this project. I had one single target goal I wanted to share with the the rest of the team:
‘Deliver not just a few tools but an idiom to the end user, something that users can integrate in their daily life and that reflects them to a few well-known mental models.’
I did the interaction design and user interface design. Taco van Dijk did the iOs development and Emilie Resink was responsible for the development of the educational program.
How it works? Watch this 10min. movie(dutch) here
Responsive design patterns
screenshot from an example on bradfrostweb.com
Brad Frost did a nice research on Responsive Navigation Patterns. His documentation is really helpful because it shows a variety of possibilities. You can now choose which type of navigation fits the user needs the best. I think these lists will give more freedom in designing websites for different types of devices.
Watch the Responsive Navigation Patterns here.
Magic brain in css3
copyright acko.net
I was surprised this morning when someone posted this brain on Twitter . This is tremendous high performed css3 parallax/3d-transform sjizzle. Embrase this kind of stuff!
A more dated example from Roman Cortes is even cool. Have a look at this parallax example.
Ferrari car configurator
I become a child again of car configurators, especially for super cars, even more especially when it’s of the italian sports cars from Ferrari! At first sight this configurator feels like racing games as GT5 / Forza or even Need for speed stilo. …It changes when you experiences the slowness of the mouse in this flash application, pretty annoying. Vexation was complete when I once made a 1960 olive/gray coloured 458 italia. I was confident with the result so I pressed the misleading ‘explore’ button on the right(see picture). Then the application trows me back to the home screen. My dream then disappeared. And what a hell of a usability mistake.
Another annoying thing is that you can’t share you’re personal design on facebook, twitter or google +. Time to make some improvements for the nouveau riche, old boys….and off course happy dreamers as my own who can’t effort(current) these type of horse(s).
Improved football shoe
Photo(Fablab Amsterdam)
This is where modern facilitates like fablabs and modern design aspects like opendesign each of them are most effectively. In this project young designer Ivar added documentation for his improved football shoe on the Fablab Amsterdam website. It’s clear that this boy is talented.
quote:
“Hello, I am Ivar and I came to the Fablab with a question. My right leg is shorter but no shoemaker could adapt my football-shoe. So I sent a mail to Fablab Amsterdam and told my problem. They wanted me to help and I was happy.”
Responsive webdesign tool
Responsive webdesign is everywhere these days on blogs and in front of designers & developers. Remy Sharp created a tool and brings it to the next level with responsivepx . With his tool you’re able to find exact breakpoint widths in pixels when your’re using media queries for flexible grids.
New bus of london revealed
Nice and elegant design. The back of the bus looks like it has some sort of optical amount and the back functions as a hop-on-hop-off platform is back again. Design by Thomas Heatherwick, builded by Wrightbus.