Archive for december, 2012

SVGWEB – javascript hack från google

december 21, 2012

A List apart skriver om hacket här:
Kortfattat så kollar man av om browser stödjer SVG eller inte. Om det inte gör det, så skickar man upp FLASH (!).
http://www.alistapart.com/articles/cross-platform-scalable-vector-graphics-with-svgweb/

Googles SVGWEB community:

http://code.google.com/p/svgweb/

Huvudanledningen till hacket är förstås att enbart version 9 av IE stödjer SVG..

Inspiration – trend 2012

december 21, 2012

Fokus på fonter

newyorker.com

 

Sticky menu:

friendsarena.se

spritmuseum.se

 Sticky bilder vid scroll – Upplevelse – bBild byts ut vid nytt content..

bonnier.com

Favorit!
ats-vs-world.cadillac.com/#!/morocco

theabsolutcompany.com

checkyourpaper.panda.org/paperbuyingtips

jessandruss.us

http://www.creuna.se

sämre exempel: oddkavodka.com/cocktails

 

Mer upplevelse – smooth animering:

squareup.com/careers/creative

Meny animeras in + animering…:
ats-vs-world.cadillac.com/#!/morocco

Scrolling som bara fortsätter: (infinitive scrolling)

google.com/imghp

pinterest.com

lookbook.nu

Anpassning till breda skärmar – stora bilder

nyrens.se

deezer.com/en

bra vid större skärm…
microsoft.com/Surface/en-US/surface-with-windows-rt/home 

Bilden förstoras på snyggt sätt:
creuna.se

Favorit!
ats-vs-world.cadillac.com/#!/morocco 

En sida och ankar meny:

ipolecat.com

Dessutom vanlig meny, men ändras efter att man hamnat på plats nedåt i sidan. (scrollar nedåt…)

pellybutik.se/(lite rörig)
simple.com (mer clean)

Ikoner och enkel tvådelad
squareup.com

Stora layoutytor – långa sidor

sunnyatsea.se
iittala.com/home 


Stora bilder som bakgrund, byts ut vid ny sida
Animation i bakgrund

Design patterns för e-handel – responsive + mobil

december 21, 2012

Smashing har skrivit artikel, med lite dumpar och ideer om design patterns för mobil e-handel.

Intressant är att 67% är mer benägna att handla via mobilen om man gör sajten anpassad för formatet.

http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/

Jeremy Keith: The Spirit of the Web

december 11, 2012

Jeremy pratar på Smashing Conferens 2012 om The Spirit of the Web.
Här finns videon på Vimeo.

Referat från föreläsningen:Har webben en själ?

Webben är routers, servers, inte ett cloud.  Men det vårt att förklara vad webben är. För vissa är det shopping och andra är det information.

”The web is agreement”.Vi kommer överens om att använda standarder, protokoll osv.

Men, filer, URL, HTTP…

POST är det viktigaste verbet. handlar om adda saker, deleting saker.
GET är inte delete.

Basecamp använde delete links. Men google accesselorator tool som folk hade installerat hämtade länkar i förväg och så plötsligt så deletades deras filer… Så helt fel att använda länkar för deletes. det är post.

Log out är inte heller länkar utan knappar!

GET – man hämtar filer. Mest html filer,css, javascript som vi hämtar. Vi pratar om webbsidor, webb app. Men de här sidorna kan presenteras på olika devices och vi vet inte vilken kapacitet, storlek, nätverkshastighet som betraktarna har. Webben handlar inte om att skaparna har kontroll, utan en massa saker vi inte vet. Förr bestämde vi att alla sajter skulle vara 640*480, sen 800*600 och därefter 1024*768…
Kontroll är inte en del av webbens själ!

Läs ”A Dao of Web Design” av John Allsopp som han skrev för 12 år sedan på A List Apart. Handlar om att acceptera att vi inte vet hastighet, skärmstorlekar och att vi inte har kontroll som designers och utvecklare.

Photoshop – innan du ens har börjat så måste du ange storlek. Så innan du ens kommit igång så kräver verktygen att du ska vara i kontroll. CMS gör också antaganden av hur content ska vara och se ut.

Style Tiles – använd inte layout och inte bestämd storlek. Börja med de individuella bitarna som ska skapa sajten, som byggstenar. Som ett mood board. Jeremy visar upp ett bibliotek med html/css element.

Börja med content istället för skapa ett ramverka att hälla i content i. Börja inifrån och ut med responsive design. Det betyder inte att man ger upp kvalitet för att man ger upp kvalitet. Responsive är mer en konversation mellan användare och content.
”My website will meet you wherever you are”

”Fluid is in the spirit of the web” – jeremy visar den första webbsidan som gjordes i olika skärmstorlekar.. (bara text förstås.)

Keeping a website responsive. Progressive enchancement, starta med det lägsta och ge nya devices allt det där som de klarar av i olika lager. Byggstenarna är strukturer, beteende och presentation. Tex vid javascript – fråga webbrowsern om den förstår geolocation och om den klarar det så bygger vi vidare på det. Progressive enchancement är att  webbsidor behöver inte se likadana ut i varje browser. Då accepterar man att man inte längre har kontrollen. Testa istället om det fungerar.
Men du kan inte testa på alla devices… Jeremy köpte en massa och de låg bara där, så han skrev på Twitter att de var fria att använda. Inom 24 -4 8 h så hade massa andra kommit över med deras devices till hans labb i Brighton. Share är just vad som är internets spirit. GitHub är absolut sharing, där du kan ta upp ngn annans arbete och använda det.

Responsive images. Vi började med hacks och workarounds, men det funkar inte i längden, därför behöver vi en standard (Srcset) eller filtypernas format (JPEG2000) ska vara responsive i sig. Men just nu måste vi använda oss av hacks och javascript.De flesta hacksen följer dessa regler – börja med den lilla formatet och ladda sedan ned det stora om det behövs. Men vi vill ju inte ladda ner båda båda två. Men tänk så här:

I CSS kan du säga att den lilla bilden ska skalas upp till en större bild, men du kan via javascript sedan byta ut bilden till det stora. För användarens är upplevelsen bra även om man laddar ner två. För de får ju snabbt upp en bild, om än den först ser lite hackig ut innan den byts ut mot den nya som laddats ner. Kommer ni ihåg lowsrc? Visade en mindre filstorlek medan man laddade ned den större bilden. Det är samma sak här, som när vi inte hade höghastighets internet.
Jeremy lägger inte ned energi på att göra olika bilder, utan på att göra filstorleken på bildstorleken mindre istället. Använder ”content-is-first” metod. Vad är viktigast i bilden? Ansiktet? Ok, då kan du göra det andra mer blurrigt och spara på kb. Förr i tiden hade vi ett mål på 100 Kb per, men nu är vi uppe på 1 mB istället. Vi har alltså samma problem nu med responsive som förr då vi hade sämre hastighet på nätet. Det värsta som finns är när ngt är slött och tar lång tid att ladda ner – performance!

Steve Sauders.

Conditional loading for files. Vilka MÅSTE vara med i på webbsidan? Lägg sedan till saker. Jeremy lägger till mer grafiska element med javascript. Te x video att titta på. Reducera antalet http requests.  Tänk inte att ni måste ha med Bootstrap, jQuery osv. Vänta tills ni har problemen! För CSS finns det massor av ideer för att minska storlek request te x; CSS Sprites, base-64 encoding, gradients, rounded corners. Det här är varför man pratar om MOBILE first

Glömt inte att URL är delar av hur man hittar fram till dokumentet, dvs filstrukturen och vad sökvägen har döpts till. Ex: /things/add/
URLer är definitiv internets själ.

Filmer från konferanser – smashing och front end trends

december 10, 2012

Video från Smashing magazines konferens 2012 finns här.

http://www.smashingmagazine.com/2012/12/07/the-smashing-conference-exclusive-videos-interviews/

Front end trender på Vimeo:

http://vimeo.com/user9986068/videos

 

Lösenordsskyddad: Workshops föreläsning

december 7, 2012

Det här innehållet är lösenordsskyddat. Vänligen ange ditt lösenord nedan för att visa innehåll:

Öppna mind map filer utan rätt program.

december 2, 2012

FileViewPro är gratis och säger sig öppna alla möjliga filer så att man kan se dem trots att  man inte har rätt program installerat…

Jahapp, bara för Windows, så det får bli att spara denna länk till nästa gg jag har VMWare installerat…

www.fileviewpro.com

Stastik för UK och USA

december 2, 2012

Skoj sajt som man gillar statistik. Visar statistik för banking, holiday, retail mm och vilka devices som användarna använder för att ta sig fram till tjänsterna. Te x så är handlar folk semestrar via webben. I åldern 35-45 går 72% av köpen av semestrar via laptop, hela 13% via tablet – vilket är nästan lika mycket som köps via resebyrå (16%). Åldersklassen 35-45, plus de som är över 55 är de som är mest benägna att handla via tablet.

 

The Leaf