jspm.io is a frictionless browser package manager. If you haven’t heard about package managers, they are nifty little tools that organize the packages your software is depending on. So instead of downloading the same favourite script package every time you need it, you can configure the project to depend on the script and then stay in sync with the latest version using jspm install.
However, when downloading packages from github, there is a limit as to how many requests you can issue. You’ll quickly get the message github rate limit reached. To fix this do:
Go to github.com, login and click settings
Click Personal access tokens and then Generate new token
Copy the token and start command line inside the project folder
Type jspm registry config github
During the config process, you will be asked to enter the token. Do so, and you’re good to go.
Responsive web design beskriver design som tilpasser seg forskjellige skjermer (mobiler, netbrett, PC-er osv) slik at alle får en god opplevelse av nettsiden.
70 % av mobilene er smarttelefoner
Husker du hvordan mobiltelefonene våre ikke støttet HTML i gamle dager? I begynnelsen hadde de jo ikke en gang en nettleser. Men etter hvert begynte de å støtte et eget mobilt markupspråk som hette WAP. Heldigvis varte denne perioden ganske kort tid, og vi fikk raskt mobiler med god kapasitet.
I dag er mobilene så kraftige at hovedbruksområdet ikke lengre er å snakke i telefonen, men digitalt konsum. Allerede i slutten av 2012 var andelen smartmobiler på det norske markedet kommet opp i 70 % (jeg spurte Telenor og Netcom). Som du vet er det også kort avstand mellom nettbrettene i Norske hjem.
Innholdskonsumenter vs. innholdsprodusenter
Vi surfer på mobiler, nettbrett og (stasjonære)/laptopper med forskjellig hensikt og til forskjellige tider. Du har sikkert selv fisket frem mobilen i køen på Rimi, rett etter du våknet om morgenen, i et skikkelig kjedelig selskap (vær ærlig nå) eller på do. Så mobiler bruker vi til raskt informasjonskonsum og når vi måtte føle det for godt.
Nettbrett bruker vi i sofaen. Når vi skal slappe av. Noen ser på film, andre surfer, leser nettaviser, ser på bilder. Og mange av oss bruker nettbrett til læring (TED, app-er for barna, NRK…) Nettbrett inviterer til konsum av innhold med mer lengde enn mobiler.
Så hva da med laptopper og stasjonære maskiner? Laptopper har vi ennå, men stasjonære maskiner på vei vekk. Uansett representerer maskiner med skikkelig tastatur og relativt stor skjerm innholdsprodusenter i større grad enn innholdskonsumenter.
Knotete referat
Jeg skal være den første til å innrømme at jeg har prøvd å skrive møtereferat på en iPad. Spesielt da den var ny. Den var så annerledes og kul og representerte en helt annen angrepsvinkel enn de tunge, gamle laptoppene. Vi hadde ingenting som hette ultrabook den gangen, så å knote på en iPad var liksom litt elegant.
Nettbrett er best for innholdskonsument og ikke for produksjon av innhold. Selvfølgelig finnes det tastatur du kan klipse på nettbrettet, og det finnes nettbretthybrider som Microsoft Surface, som kommer med tastatur, og det finnes mange mennesker som produserer innhold på nettbrett, men på generelt grunnlag er nettbrett for konsumenter og ikke for produsenter.
Let’s get down to business
Nå er vi endelig inne på kjernen av Responsive Web Design (RWD). Hvordan kan vi tilpasse innholdet på en nettside, slik at det utnytter skjermbredden på alle de forskjellige enhetene? En mobil er jo fryktelig mye smalere enn en laptop.
Responsive Web Design bruker noe som heter Media Queries til å plukke opp bredden på skjermen og så tilpasse innholdet på siden tilsvarende. Strukturen endrer seg men innholdet endrer seg ikke.
Hvilke enheter er relevant
Når jeg tar ut oversikten over antall sidevisninger på kryss av en mengde norske nettsteder, får jeg følgende enheter, rangert etter mest brukt (disse enhetene utgjør 22 % av den totale traffikken):
Apple iPad – 50 %
Apple iPhone – 25 %
Samsung (Galaxy Tab 2, Galaxy S2, S3 og S4)
Jeg har også tilgang til data som viser omsetning i nettbutikker pr. enhet, og også her følger enhetene samme rekkefølge som i listen over. Med andre ord er det Apple som er den store lederen i Norge, med Samsung på en OK andreplass. Alle de andre er ikke verdt å nevne. Dette kan riktignok forandre seg over ganske kort tid, men sjansen er stor for at Apple eller Samsung/Android vil være blant de største også om noen år.
Tilgjengelig på alle plattformer
Så hvordan påvirker dette RWD og strategi for store organisasjoner som en kommune? En kommune har ennå større krav til å være tilgjengelig for alle brukere enn det en kommersiell side har. Du kjenner kanskje til Direktoratet for forvaltning og IKT sine krav til universell utforming? Fra 2013 gjelder de også kommersielle nettsider, men i praksis er det kun offentlige organisasjoner som i dag har et visst press på å følge retningslinjene.
Tilgjengelighet via RWD handler mer om å tilgjengeliggjøre informasjon på andre enheter enn å nå alle brukertyper. Du må fremdeles følge kravene til universell utforming, men du når målgruppen i andre situasjoner enn foran PC-en.
Adaptive Web Design
Den alternative måten å levere enhetstilpasset innhold heter Adaptive Web Design (AWD). I stedet for å levere samme HTML til alle enheter, leveres spesialtilpasset HTML til to eller flere type enheter. En AWD-metode som brukes hos oss i Avento, er å levere forskjellig malverk under samme adresse. Du slipper med andre ord den gamle videresendingen fra www.kunde.no/produkter til m.kunde.no/produkter (som jo har irritert mange av oss).
Mange roter med begrepene AWD og RWD, noe som er forståelig, siden det hele tiden dukker opp nye begreper for å beskrive den eksponensielle digitale utviklingen (jeg har også rotet med begrepene). Nå er du blitt en av de som skjønner forskjellen.
Gull og grønne skoger
RWD er ikke bare gull og grønne skoger. Den “gamle” generasjonen webdesignere har fokus på realisme og fantastiske bilder. Det fungerer dårlig hvis du skal levere til alle plattformer. Det blir rett og slett for mye data for mobiltelefoner å laste ned.
Skal du lage en responsiv nettside som fungerer godt, må du basere den på en UI-pakke med et grid-basert layout, slik som Twitter sin Bootstrap. Kort forklart så gjør grid-et en del av tilpassningsjobben for deg, så du slipper å legge inn så mange timer for å få de forskjellige enhetene til å vise nettsiden din skikkelig.
En nettside som bruker grid-basert layout trenger ikke å se ut som masse firkanter ved siden av hverandre. Det viktige er at elementene følger størrelsene til kolonnene, slik at de enkelt kan kolapses på smalere skjermer.
Mobile First
For å kunne levere godt responsivt webdesign, må du bruke designere som skjønner den nye designretningen som kreves. I 2010 sa Eric Schmidt at Google fra nå av ville utvikle med Mobile First som motto. Han gikk så langt at han sa “I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” (sitat) Skal du lage godt responsivt design, lønner det seg å tenke mobile first, og skalere opp derfra.
Credits http://www.digitalbookworld.com/
Poenget med mobile first er at du begynner med å laste inn det mest essensielle for de små plattformene. Dette gir oss en kjappere opplevelse av siden og tar vekk unødvendig lasting. Videre ressurser som trengs på større skjermer lastes kun når de trengs.
Konklusjon
Det finnes mange meninger og mye forvirring rundt responsiv vs adaptiv web design. Jeg skal ikke gi deg noen fasit, annet enn å si at mobiltelefoner og nettbrett også i framtiden vil utgjøre en stor og voksende del av innholdskonsumentet, så uansett hva du mener om RWD eller AWD eller hvilket buzzword som er det neste, må du forholde deg til at en stadig voksende del av brukerne dine kommer fra mobile enheter.
Sjekk gjerne ut noen av referansesidene. De går dypere i materialet. Du kan også se på noen av eksemplene må RWD og AWD.
Referanser
Les om forskjellen mellom adaptive og responsive web desing:
http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/
Netlife Research om responsivt design:
http://iallenkelhet.no/2012/01/25/responsiv-design/
Mobile first design: Why it’s great and why it sucks:
http://designshack.net/articles/css/mobilefirst/
Noen norske sider som bruker responsive web design
I watched a documentary the other day, about a stealth-plane developed by the Germans towards the end of the second world war. The plane was an answer to the British radar system, which gave the Brits an early warning when the German bombers came to attack airports and cities like London. The plane was stealth much because it was built of wood and painted with radar wave absorbing paint.
What struck me was; we tend to believe we are so far advanced that we can’t discover new things in the simple. Wood is simple.
Perhaps you’ve read the quote by former Chairman of IBM who allegedly said “I think there is a world market for maybe five computers” (Thomas J. Watson, 1945), or maybe you’ve laughed at some of these statements:
“A rocket will never be able to leave the Earth’s atmosphere.” — New York Times, 1936.
Rail travel at high speed is not possible because passengers, unable to breathe, would die of asphyxia.” — Dr Dionysys Larder (1793-1859), professor of Natural Philosophy and Astronomy, University College London.
X-rays will prove to be a hoax.” — Lord Kelvin, President of the Royal Society, 1883.
Today we look at these statements and laugh to ourselves, saying “people were stupid then, but now we know better.” Or are we? The things of it is: We have a tendency to become overly self confident about our own understanding and level of knowledge. We think we are at the top of humanly achievable knowledge and understanding.
I believe Thomas A. Edison was correct when he said: “We don’t know a millionth of one percent about anything.” Let me show you an example: Graphene. This super material is bascially a 2D structure of carbon, yeah, a one atom thick sheet of carbon, and it has enormous potential in areas we are continually discovering. One will most likely be the tinyest transitors you’ve seen this far, or what about the strongest material ever made? Graphene has tremendous potential, and for that reason nations are investing billions as we speak.
How did we ever find a way to create graphene? You might think it was a complicated process that involved the best brains in the world? Well, it was discovered using regular adhesive tape. Russian physicists Andre Geim and Konstantin Novoselov and the lead from pencils. Six years later, they won the Nobel Prize for their work.
So my plead is:
Don’t overlook the genious of simplicity.
Don’t stick with status quo.
Don’t be arrogant about your knowledge or insight
Or people might laugh at your alleged truths in the future.
Customers seldom attack the company regarding their social strategy. They complain about your bad trains, bad customer service or your meanness in general. Social Media amplifies the customer’s voice.
– Arnt Christian Scheele
Train wrecks
Digital productions used to be an add-on to the general campaign, ending up not exploiting the strengths of digital media, but as a half product. Though this is changing, the same trend is present for social media: 5 % of the budget is used to create the social media product – at the end of the digital production.
NSB had enormous problems with their local trains, and therefore also got a tsunami of complaints on their Facebook page – about their bad trains – not about their social strategy. If you are evil, creating a Facebook page won’t make you less evil (NSB is not evil).
Conclusion: If your train is wrecked, you need to fix the train.
“Why not tell that we also make mistakes? I love negative news! Whenever one of our 6 000 employees does something wrong, I rejoice. It shows that there are people behind the logo. People don’t care about Sparebank 1 – but they care about people.
Christian Brosstad, Information Director, Sparebank 1
Negative is positive
“A few years ago, we dreaded telling about the many phishing mails. Now we proactively tell the users about these threats before they manifest in full.
Banks are no longer only a bank, but a media house. Big newspapers like VG read our blogs to get information for their articles. The old communication strategy is dead.”
Sharing
The younger employees work totally different from most of the old work force, that hold unto the accumulated knowledge. The new generation love to share their knowledge. Give them freedom to share. They are royal. Treat them thus.
Ask the customer for help
Thank you for engaging, thank you for participating. Instead of denying the employees access to the social dialogue, we establish guidelines for how and what to talk with the users about.
Why Sparebank 1 is the best bank
What is the difference between Sparebank 1 and all the other banks? Nada. The difference is in the people and how they relate to the customers, which again concludes with the same as Elin Lind in NAV and Cecilie TS: It’s about people.
This is one of the articles published directly during each of the 20 minute speeches that are held during Social Arctic 2013 in Tromsø.
Elin Lind at NAV owns the first governmental Facebook page that has ever had success. During Social Arctic 2013 she shared the recipe on how to create a greenhouse for trolls and how to become the most popular Facebook page in the country.
In 2009, NAV tried to establish a Facebook page with the strategy “let’s just jump into it”. It became a green house for trolls. I believe the success of our current social strategy lies in the difference between the old and the new Facebook page. – Elin Lind, NAV
Elin started from scratch, this time with a strategy, and created a page for paternity pay, which was by far the most discussed topic in social media. Everyone who has children – you’ll understand.
We use most time to give answer requests. We don’t really push information. Without any hidden agenda, we simply provide service.
The plan is everything
Since the first approach of “fingers crossed” did not work, Elin established a social strategy for the paternity pay page, containing some of the following keywords:
Language policy
When and how to delete posts
Dialogue vs Information:
Talk with, not to the user.
Niche vs the monster organization
We have almost three million customers. Creating one Facebook page for this amount of users is very hard. Therefore we decided to focus the attention on paternity pay. Internet is all about niche. Don’t believe me? Read Copyblogger on niches.
It’s all about people
As Cecilie TS said, let the user have speak with people that can talk with the user from their heart, rather than letting the communication advisor own the dialogue.
Four years ago, Cecilie TS had never touched Facebook, Twitter or Instagram. No wonder, really. Since Instagram didn’t exist then. She uses four keywords to tell her tale on how to relate digitally: text, timing, presence and time.
Personal relation
We are all humans (right?) Customers are people too. They want to speak to someone human, genuine. When texting on G+, Facebook or what more social services to be born, let your communication be genuine, not synthetic, dyed in your strategy, rather than copy-pasted from a document.
Why do people follow my Facebook page? Likes are good, but we want to know about your backstage life. Even if people follow your company’s logo over time, they really want to know who you are, how you think, what you drink and perhaps the color of your eyes.
Fun
Humor engages. Let it be – yeah you guessed it – genuine, not put on. If you are a funny-bunny by birth, use the humor to draw attention. If not, don’t try. People will realize you’ve been bluffing when they meet you in real life.
Presence
People want to be seen. If they’re not visible in your eyes, they won’t believe you. Building relations take time. Build relations rather than spewing out information.
You will fail
Sooner or later, things will go wrong. You will end up hurting or disappointing one or another. One of your employees will post something one late Saturday night – that should not have been posted. No wonder. You are human, right? Ask for forgiveness, that’s human.
How to succeed in social medias
People who succeed in social medias are people who see other people, as humans.
Disclaimer: This is my personal interpretation of the speech. I might have intentionally or unintentionally left out parts or details.
Let me tell you my story. Many years ago I was religiously validating all my sites in the W3C validator. That was back when HTML 4.01 was so 2000 and XHTML 1.0 was the new cool kid in town. I vigorously taught my fellow developers to code all sites so that they validated with XHTML 1.0 STRICT. I liked the word STRICT, capitalized! Also, semantics was a beautiful word in my head. I conveyed a mystery layered on top of the regular deadly HTML, giving meaning to the words scattered around tags and javascript. Elevating the site above the rest.
However, one day I faced reality. Met a light, so to speak. I read an article by a very wise guy, that basically said: We make websites to help the customer do their thing better. Now to validate in W3C. I was, like, WHAT?! I thought W3C validator was for the customer, and not the developer. I came to realize, however, that everything comes at a price. XHTML is by nature strict. X stands for XML, so to have valid XML, everything must be validatable. So without validation pass, XHTML made no sense.
I also got in contact with reality when I started validating big sites like google, microsoft and – hold your horses – the validator itself. And they all turned out invalid. Surprising, eh? I sent a mail to the developers of the validator, where they replied something like this: “eh, hehe, hihi. didn’t see that coming – oh the irony”.
The motivation of the validator is to make sure the sites follow W3C’s recipe for HTML5, XHTML, HTML 4.01 etc. The thing though is that many times it’s impossible to validate and do cool things at the same time. Many plugins and cross browser compatibility fixes actually break the validation.
Another fun motivation for validation is SEO and semantics. Semantics is a word that describes the addition of meaning to content, so that search engines, screen readers and other tools without (well functioning) human eyes can understand the meaning and importance of the content. However, it turns out that search engines don’t really care about validation. It doesn’t mean that they don’t care about semantics, but not validation. Read this article to gain more insight. This topic is however religion. And you will find many SEO expert calling this heresy.
So, to conclude this essay: Validation is mostly never relevant to user experience. I will run the validator and fix relevant errors, but I will not make the site validate.
Well, in fact, to me, debugging PHP has been an ugly mess. I know this probably is because I just think I know how to program PHP. Really good programmers interpret the feeling of the server by holding their hand over the screen and analyzing the heat pattern that emits from the irritated pixels.
But to us normal, deadly developers, we need help. Help is found at www.phperror.net, a simple class that outputs beautiful error messages. Not only beautiful, but also very, very informative. Play the video, download the class, and become a happy debugger!
