Het voordeel van Responsive web design is dat de klant niet meer perse voor ieder apparaat een aparte app of website hoeft te laten maken en het dus kosten kan besparen. Voor bezoekers van websites is het fijn omdat de website op ieder apparaat dat ze in handen hebben goed te bekijken is.

Tijd voor een paar goede ontwerptools voor responsive design. Zoals je gewend bent (zie hier eerdere tools) willen we graag ons steentje bijdragen. Eerder al heeft Matt Stow een goede tool voor Fireworks ontwikkeld.

Onze oplossing is iets eenvoudiger en ideaal voor als je snel een ontwerp met de klant wilt delen of een hele simpele oplossing wilt, of niet met Fireworks werkt (!?)

We willen ook niet beginnen met een lijst met voorbeelden, maar delen we een simpele “tool” waarmee je eenvoudig en snel je ontwerpen kunt presenteren op verschillende formaten en apparaten, zodat je direct je (responsive) design kunt demonstreren aan je klant of aan wie het maar zien wil.

Met de bestanden in het bijgevoegde zip archief is het heel eenvoudig één pagina in 3 verschillende formaten te presenteren.

Bekijk de demo op je mobiel

Hoe werkt het?

Je maakt je design in 3 verschillende afmetingen( 320px breed, 768px breed en 1024px breed).

Open het zip archief, hierin vind  je een HTML pagina, een css bestand en een viertal afbeeldingen. Vervang de afbeeldingen in de map ‘images’ met jouw eigen afbeeldingen (maar laat de spacer.png staan)

De HTML pagina is klaar voor gebruik, hier hoef je niets aan te veranderen. Het is misschien wel zo aardig en zo volledig om de naam van de klant of het project in de titel van het document te zetten.

De stylesheet is nu op 3 formaten ingesteld, 1024px (desktop en iPad in landscape ), 768px (iPad in portrait) en 320px breed (iPhone in portrait en landscape).

Het enige wat je in de stylesheet hoeft aan te passen zijn de bestandsnamen van de afbeeldingen zodat deze overeenkomen met de bestandsnamen van jouw afbeeldingen en het geheel online te zetten.

Dat is alles, het enige wat je nu nog hoeft te doen is je klant verbaasd doen staan van je ontwerp!

 Ok, vooruit een paar voorbeelden dan van responsive websites:

• Designmadeingermany.de magazin 5
• Hicks design
• Foodsense

Voor een volledige lijst kun je deze geweldige website er op naslaan:

• Mediaqueries

Vanaf vanochtend is hij te downloaden: de eerste echte digitale krant van Nederland: RTL Nieuws 365. Deze gloednieuwe iPad app van RTL brengt je, in woord en beeld, het laatste nieuws uit binnen- en buitenland en alles over sport, showbizz en lifestyle.

We vinden het een pareltje, maar dat is niet zo vreemd, want vanaf het eerste begin hebben we met UNITiD keihard meegewerkt aan concept- en interactie-ontwerp.

Ruim een jaar geleden trokken we ons met de redactie van RTL Nieuws terug in een heuse Hilversumse war room  om in een paar weken tijd visie en ideeën te ontwikkelen. En vooral om de eerste schetsen op de muur te krijgen.

Drie van die schetsen zie je hier. Ze gaan al aardig in de goede richting.

Intussen is er door heel veel mensen heel veel werk verzet en na vele meetings, review-sessies, wireframes, designsessies, usability tests, naamswijzigingen, visuals, slices, sound-effects en prototypes staat er een eindresultaat om trots op te zijn.

In onderstaand filmpje geeft hoofdredacteur Harm Taselaar een uitgebreide demonstratie van de mogelijkheden van de app.

Probeer hem zelf uit en vergeet niet om je waardering achter te laten. Onze suggestie (het zal je niet verbazen): 5 sterren

Op 2 Januari om 10 uur alweer aan de champagne! Martijn’s eerste voornemen direct aan duigen. Naast een toast op het nieuwe jaar openen we ook onze nieuwe locatie in Amsterdam. Een fijne, ruime plek aan het riviertje “de Schinkel“. Het pand heet ook “de Schinkel” en ligt om precies te zijn hier. De laatste week van het jaar blijkt een prima week om te verhuizen: de helft van het team is op vakantie, een kwart werkt in Den Haag en de klant laat ook even weinig van zich horen. Dankzij een uitstekende organisatie en wat extra handen van Fetch was de klus zo geklaard. Rondje lopen?

Foto vanuit de board room naar de keuken/kantine/huiskamer/...Hier maken we straks smoothies en hangen we wat op de bank met de Xbox

Vandaag (alleen vandaag!) Bagel & Beans lunch aangezien Albert nog niet is langsgeweest. Bureaustoel weer mee naar je plek nemen als je klaar bent

We kijken uit over de Schinkel waar vrijwel de hele dag de zon op schijnt (perfect voor een beamer volgens Daan)

De werkplekken! Die hebben we ook

En een prima gang met dito ondergrond

Let op! Inmiddels (het is nu eind Januari 2012) hebben we een aantal fijne nieuwe collega’s erbij! De vacature is hierbij dus niet meer vacant (of hoe zeg je dat). Mocht je nog willen reageren, dan moet je dat vooral doen, maar de kans is klein dat je nu wordt uitgenodigd.

Ben jij een grafisch talent met goede voornemens? Bijvoorbeeld:

• Ik wil in 2012 een nieuwe baan
• Ik wil mooie dingen maken en tegelijkertijd een hoop leren
• Ik wil meer lol in mijn werk hebben

Naast onze Amsterdamse vestiging hebben we nu ook een kantoor in Den Haag en wel in de Caballerofabriek, aka CabFab. We zijn op het moment  volop aan het inrichten, het klinkt nog wat hol en we moeten nog een espresso-machine uitzoeken, maar er wordt al gewerkt.

Waarom?

Zo’n tweede locatie is niet alleen een handig bezoekadres voor onze klanten in de regio, maar het scheelt voor sommigen van ons ook weer wat uren in de trein of auto. Minstens de helft van het team woont in Rotterdam, Delft en Den Haag. – CMD-ers uit 010 en IO-ers uit 015 blijven blijkbaar graag wat in de buurt wonen- . De gewonnen tijd kunnen we nu veel nuttiger en leuker besteden! Ook in Den Haag gaan we weer hard aan de slag met het ontwerpen van mooie producten. We doen hier dus precies hetzelfde als in Amsterdam.

Wie kan ik er verwachten?

Iedereen en niemand. Wij gaan daar werken waar het ons en de klant het beste uitkomt. Een beetje Wifi in de lucht en een fijne stoel is voldoende. We hebben dus geen vaste plekken, geen papierwerk, geen gesjouw, geen server in een kast. Binnenkort lees je hier meer over op ons blog.

Waar precies?

De Caballerofabriek, www.cabfab.nl, is een bedrijfverzamelgebouw voor innovatieve en creatieve bedrijven. Het is een oude sigarettenfabriek die geheel gerenoveerd is; strak en toch sfeervol. Met de auto is het makkelijk te bereiken. Als je Den Haag binnen rijdt via de Utrechtse baan is het afslag 4 ‘Voorburg’ en dan ben je er praktisch al.

Het adres is Unit 69, Saturnusstraat 60, 2516 AH Den Haag (google maps). Hier meer contact informatie.

Uiteraard hopen wij ook veel samen te mogen werken met andere bedrijven in de Cabellero fabriek. Voor CabFabbers, klop gerust eens aan!

Tot ziens in Den Haag!

Tijdens deze meeting hebben we de twee voorstellen kritisch bekeken en op- en aanmerkingen besproken. We zijn toen tot de conclusie gekomen dat beide voorstellen sterke punten bevatten. Sterke punten waren onder andere: het werken met tabs, wisselende verhalen in een banner op de homepage en de opleidingenwizard. We hebben de twee voorstellen samengevoegd in één ontwerp en deze tot in detail uitgewerkt in wireframes en hierbij een uitgebreide documentatie geschreven.

Tegenwoordig wordt er online erg veel geschreven, verspreid en gedeeld. Daarnaast kan nieuws op vele verschillende sites en platforms gelezen worden. Hierdoor is erg veel informatie beschikbaar en toegankelijk voor allerlei soorten mensen op allerlei soorten manieren. Soms komt er zoveel informatie op je af dat je niet weet waar je moet beginnen. Het zou natuurlijk ideaal zijn als al deze online beschikbaar nieuws verzameld werd op een plek, en dat je nieuws kunt verzamelen geselecteerd op jouw persoonlijke interesses.

Er zijn veel sites die zich bezighouden met het verzamelen van nieuws en aggregeren van feeds. Nine connections (www.nineconnections.com) is daarentegen niet alleen een netwerk dat nieuws sneller bij je brengt, maar gebruikers ook de mogelijkheid biedt om te exploreren en verrassend nieuws te ontdekken.

Het idee 

Via nine connections voeg je zoals de naam al zegt een negen maximaal aantal connecties toe aan je “grid”. Het idee is dat via deze negen connecties eigenlijk al het nieuws via de sociale netwerken naar je toekomt. Op dit moment is het alleen nog gekoppeld aan Twitter, later zal dit worden uitgebreid naar meerdere netwerken. Je kunt een grid maken waar je alleen maar connecties in hebt die bijvoorbeeld iets te maken heb met interaction design of met Egypte. Doordat je als gebruiker maar een beperkt aantal aan mensen mag toevoegen, kies je zorgvuldig je connecties.  Het nieuws dat je binnenkrijgt via nine connections is ook gebaseerd op hoe jij je gedraagt t.o.v. dat nieuws. Dus naarmate je het verder gebruikt zal het nieuws dat binnenkomt steeds meer verder worden gefilterd op je gedrag en dus op je interesses. Bij nine connections ligt de focus op het toevoegen van connecties. Wanneer je een connectie toevoegt, voeg je daarmee niet alleen het nieuws toe dat die ene connectie heeft gedeeld, maar krijg je dus ook automatisch het nieuws binnen dat via zijn/ haar twittervrienden is binnengekomen. Nine connections graaft drie lagen diep in het (Twitter)netwerk naar nieuws. Je connecties vormen gezamenlijk via een grid een nieuwskanaal waar doorheen nieuws naar je toe stroomt. Op die manier kun je als gebruiker artikelen ontdekken die jou anders niet zou hebben bereikt. Daarnaast hoef je zelf niet actief te delen want je voorziet de connecties die jou toevoegen altijd van nieuws door de connecties die jij hebt toegevoegd aan je grids. Je geeft als het ware passief het nieuws van je netwerk door.

Het ontwerp 

Qua interactie was het een uitdaging om met zoveel content een simpele en overzichtelijke tool te maken. Er is veel te exploreren in nine connections. De ontdekking moet soepel blijven en gebruikers moeten makkelijk terug kunnen naar waar ze waren begonnen.

Voor het ontwerp van nieuws lezen hebben we gebruikt gemaakt van panelen. De uitdaging van het gebruik van de panelen zit hem in het feit dat er via verschillende paden nieuws kan worden gelezen. De eerste manier om nieuws te lezen is vanuit de newsfeed van een van de grids. De tweede manier is om nieuws te lezen vanuit de newsfeed in het profiel van een van je connecties. In beide gevallen selecteer je een headline uit de newsfeed en ernaast opent het volledige artikel in een tweede panel. Samen vormen de panelen een booklet.

Onder de headline van elk artikel kun je zien via welke connecties van je grid het artikel is binnengekomen. Wanneer er op een connectie wordt geklikt opent zijn/ haar profiel in een nieuw panel waarin korte informatie en de newsfeed van de desbetreffende connectie in staat. Als de connectie ook een account heeft in nine connections kun je ook zijn/ haar grids bekijken. Je kunt weer op een van de connecties in een grid klikken en de newsfeed van de nieuwe connectie bekijken. Door de verschillende connecties die je tegenkomt, kun je dus blijven graven in het nieuws.

Terwijl je nieuwe connecties tegenkomt tijdens het nieuwslezen bestaat er natuurlijk ook de mogelijkheid om deze connecties aan je grid toe te voegen. Dit kun je doen door op het knopje “add” te klikken of door de connecties naar het gewenste grid te slepen.

In nine connections bestaat er ook de mogelijkheid om je connecties te “managen”. Vanuit deze functie kun je connecties zoeken en toevoegen aan je grids. Ook kun je in manage connections nieuwe grids aanmaken of grids verwijderen. Tegelijkertijd kun je zien wat voor invloed de nieuwe connectie heeft op je newsfeed.

Het visuele ontwerp is gerealiseerd door Resoluut.

Beta

Op dit moment is NineConnections voorlopig alleen nog te gebruiken via een invite- only Beta. Binnenkort wordt de site officieel gelanceerd.

Dit najaar introduceerde Ziggo nieuwe TV-abonnementen in Nederland. Ieder abonnement biedt nu de mogelijkheid om een aantal films en series On Demand te bekijken. Bij de nieuwe pakketten hoort ook een nieuwe On Demand gids, waarvoor wij het interactie ontwerp maakten.

Voor de nieuwe On Demand gids werkten we met de bestaande databasestructuur van Ziggo. Het uitgangspunt was de content centraal te zetten, en een catalogusgevoel te creëren. In de nieuwe gids kan je rondneuzen door het volledige aanbod, waarbij een tooltip je meteen vertelt wat de prijs van het item is, en waar het te vinden is op de interactieve ontvanger. Ziggo klanten kunnen met één klik de films en series zien die bij hun abonnement zijn inbegrepen. Daarnaast is het met behulp van uitgebreide zoek en filtermogelijkheden makkelijk om content naar smaak te vinden.

Ook voor dit project hebben we wireframes gemaakt in Adobe Fireworks, waar we vervolgens een protoype mee maakten. Het prototype hebben we gebruikt om een aantal snelle tests te doen, waarvan we de resultaten gelijk in onze ontwerpen konden meenemen.

De nieuwe catalogus vind aansluiting bij de iPad app, door onder andere het gebruik van dezelfde iconenset. Op basis van ons interactieontwerp tekende Resoluut voor het grafisch ontwerp. Ziggo zelf was verantwoordelijk voor de technische realisatie.

De afgelopen maanden is er flink gewerkt aan versie 2.0 van de Ziggo TV apps. Al vanaf de zomer konden wij met een prototype via de app TV kijken. Ideaal voor als niet iedereen hetzelfde wil zien of op kamertjes in huis zonder TV. Op dit moment is TV kijken via iPad beschikbaar voor Alles-in-een klanten van Ziggo.

Naast het TV kijken zijn er talloze verbeteringen doorgevoerd. Er zijn verschillende gebruiksonderzoeken gedaan en er is goed gekeken naar alle reviews en feedback die Ziggo heeft ontvangen. De grootste wijziging is de homepage. Deze is grondig aangepakt en biedt ruimte om in volgende versies mooie functies toe te voegen.

Er werd vandaag natuurlijk enorm veel getweet en geblogt over de de nieuwe versie. Voor zover wij kunnen zien wordt de interface nog steeds erg gewaardeerd. Uiteraard zijn er ook de nodige kritieken. Deze gaan met name over de beschikbaarheid van het TV kijken. TV kijken op de iPad is alleen mogelijk voor klanten van Ziggo, die minimaal een abonnement hebben op TV Standaard én Internet Z1, Z2 of Z3, dan wel een abonnement hebben op Alles-in-1 van Ziggo.

Wij zijn ondertussen weer druk in de weer met de nieuwe versie!

Andere sites over de update van de app hieronder. Lees ook de reacties!

• iPad club
• Ziggo.nl
• iTunes/AppStore
• Tweakers
• Nu