Do we still have that digital head start that we fought so hard for in the 1990s? Obviously, this blog post won’t give a definitive answer to that question. But this is my contribution to the subject of an eventual Scandinavian lead in the mobile industry and perspective on mobile tech, usability and the need for speed. How do Sweden as a nation compare to the US regarding the, once again, popular concept of “digitization”. Well, this post is a attempt to start comparing, and to give you as a reader some data to begin benchmarking your website against the really big companies of Fortune 500, and the biggest ones of Sweden.

My book, Web Strategy for Everyone, deals with the issues of both speed and user needs when on mobile. Also a lot on design principles such as mobile first, responsive web design, adaptive, single page applications (SPA) and progressive web apps. Buy the book Web Strategy for Everyone directly from the publisher Intranätverk.

This comparison is how well major Swedish companies embraced usability and website speed. Today, we’re in a mobile first setting. Often attributed to the release of the Apple Iphone back in 2007. Almost ten years ago Apple contributed to – in a major way – making the Web accessible to mobile, for the masses!

Benchmarking method: OMX Stockholm 30 duel with the financial magazine Fortune’s list of America’s 500 largest companies

Since Sweden is a pretty small country, I have selected the 30 biggest companies on the Stockholm Stock Exchange in 2016, the so-called OMXS30. In the contending ring corner, for the US, is the 500 largest US companies according to the financial magazine Fortune. Biggest based on their annual turnover. No method is perfect, this one is no exception. But on some level, this comparison is the giants from one country to the giants from another.

Since the company Atlas Copco is listed twice on the Swedish list, there’s just 29 companies. The same problem exists multiple times with the Fortune 500, for instance the different incarnations of Time Warner, and others. In addition, this type of test is blocked by the security settings of some websites. That’s why the Fortune 500 simply became “Fortune 425” in this evaluation. Still, I think there is probably enough data to suffice as an acceptable average. But of course, it’s up to you to reflect upon the precision and if it is good enough for what you decisions you intend to make based on these data.

Measuring rod = Google PageSpeed API

The analysis is based on Google’s API called PageSpeed. If you’d like to make spot checks on any single webpage Google’s PageSpeed Insights web service will prove useful. The difference is that, with the API, one can automate checks of up to 25,000 pages per day. Thus one can approach a more quantitative analysis.

For those of you who want to know how much data is the basis of the analysis, there were 2,155 webpages evaluated for the 29 Swedish websites. For the American companies I evaluated 28,162 webpages from the 425 websites.

The average values were then stored as per website, which you can inspect in the Excel file linked below. After this, all Swedish companies’ averages were calculated, as well as all US companies averages, in order to be compared. It’s the way you should regard the tables below – as averages first calculated per site, then combined averages for OMXS30 as well as for F500. This double average calculation is necessary since the sampling of the websites differed.

Below is how an average webpage looks like. Besides Pagespeed and Usability, low numbers are generally a good thing.

Potential for improvement

As a bonus, when using Google PageSpeed via the API we get figures on what can be improved. In this comparison, the relative improvement is Google’s suggestion to the average Fortune 500 company website. Averages are calculated just like mentioned above.

Low figures are to be preferred, it means that the craftsmanship of the website is a professional one. The measures are pretty much obvious to the web professional, but please refer to Google PageSpeed API dokumentation for reference.

Being a Swede, I might after all be a tiny-wee bit biased, but I’d like to claim that the almost imperceptible country of Sweden came out as a the winner of this comparison.

What do you think? Give me your best counter-arguments in the comments!

Some things on these lists are easier to resolve than others. When you do this kind of evaluation on your own website, you might find a treasure trove of easy improvements. Such as, on this list, we find enabling GZip and leveraging browser cache early on in the list. Some things are very easy to resolve. For instance, dramatically improving those two takes about an hour each. Its all about the configuration of the website in the file .htaccess for WordPress, or web.config in a Microsoft environment, for instance.

More about the evaluation

For those of you who want to inspect the data behind the result, I have compiled an Excel file. In the Excel file you can filter individual websites’ performance, or comparing metrics for the different websites. Check out the Excel file here

You’d like to learn more about web performance?

Want to learn more about the variety of tools? Well, I’m pretty biased but perhaps you’d like the book Web Strategy for Everyone. In addition to its introduction to the Web, information architecture and web design principles It also discusses web performance and tooling.

In stark contrast to most English books, Web Strategy for Everyone is more dense, rich in insight, less repetitive. That’s how we Scandinavians roll

Buy the book about web strategy and performance optimization from the publisher intranätverk

Challenge: Earn your discount

If you’d like a coupon code worth 25 % discount on all books at Intranätverk’s bookstore, all you have to do is figure out below Python rebus ( yeah, it’s a simple concatenation):

‘{}{}{}’.format('friends', 'of', 'intranatverk')

The post Mobile performance and usability of Fortune 500 companies appeared first on Web Strategy for Everyone.

These figures is something we encounter on a regular basis on the Web. 404, 410 and numbers like 500-something. They are so-called status codes from the Web’s protocol HTTP, you know that found in the beginning of the addresses on the Web.

On my most recent trip to Stockholm, I got room number 404. Imagine my geeky surprise when I arrive on the fourth floor and the door is actually there, plus there was a room behind the door

Amusing error 404 pages

The book Web Strategy for Everyone show, among others, how Spotify has a cute mascot to divert the attention and relief any visitor’s frustration. In this blog post I will show a bunch of entertaining and well thought-out Error 404 pages.

See these as inspiration and consider what you can do with your own error 404 page. Unfortunately, many still require having Adobe Flash installed to see the 404 pages , there is not really smart when fewer and fewer do not have it, and it definitely does not work for those who get 404 on a cell phone. Another quite common blunder is that you failed to make the 404-page responsive, so sometimes it is both fun and rewarding if you are browsing with a computer browser in full screen. That’s too bad!

Technology

Github

Github is the service where virtually all open source projects are now located. Sometimes the projects are renamed and then we land on this Error 404 page. I’m not sure if there is a Star Wars reference with the craft and the sandy landscape. What do you think? Anyway, it is nicely coded with parallax scrolling when you move the mouse pointer over the image.

Sitespeed.io and their cute mascot

Sitespeed.io is consistently showing their mascot in all kind of roles. Of course the mascot is helping out with the 404, in a Batman-themed setting.

Google Search

Google has a robot that seems to have dismantled itself.

Airbnb drops the ice cream

Airbnb makes the small effort and puts at least an image to lighten their error 404 page up a bit.

CSS-Tricks shows the underlying CSS

A bit like the CSS code punctured the cloth of the HTML code and made the CSS code take a peek at the user.

Dropbox allows an impossible variation of its logo

Guessing I’m not the only one to get headache when looking at that kind of sketches with impossible angles. Creative, though!

Tableau has found sasquatch

Visualization company Tableau has found sasquatch in its visualization engine. Now there ought to be no opposing the evidence that they are in fact real?

Public sector

American space agency NASA

NASA say that the reason why the page has disappeared is because it is behind the event horizon. Certainly a blast for those who are more knowledgable in physics than myself, but at least appropriate to talk about something they themselves are good at.

Delaware jokes about its name – Dela-where?

Certainly a cheap joke, and something those who live there often hear, but it cannot be that common for the public sector to be joking in this way – it could of bores be perceived as frivolous.

Other sites

IMDB brings appropriate movie quotes

Film service IMDB offers quotes from movies on their 404 page. It is hard to stop reloading the page to see what suitable quotes they’ve found.

Hillary Clinton failing

Hillary Clinton’s campaign site for the presidential campaign 2016 shows a GIF when she fails to swipe her card to open a gate. It looks to be at a subway somewhere.

IKEA Sweden excels, but a bore internationally

In the Swedish part of the IKEA website, a person who literally painted himself into a corner. Maybe they could not find something similar figuratively to the international site where they did the bare minimum. Internet seem to suggest that ”paint into a corner” is also and idiom in English, so perhaps they just didn’t dare?

Comedy Central brings out their characters

Comedy Central vary the characters they show up so it is easy to click the refresh button a few times.

The New Yorker and the labyrinth

A rat that got lost in a maze, yeah, why not.

Amazon showcases employees’ dogs

Amazon chooses to showcase a new dog every time you land on their error 404-page. These dogs are “working” on Amazon and they also explains that there are dog treats and fountains in the appropriate height for dogs. Why not tell us what a great offices they have and that employees are welcome to bring their four-legged friend to the office.

Dilbert: The pointy-haired boss is fooled

The manager, the pointy-haired boss, is fooled that the Internet is full. Appropriate to have a special series just for error 404 in Dilbert.

As previously mentioned, it is also important that your error 404 page is usable and properly designed. It is one of many topics in the book Web Strategy for Everyone – available for about 10 $ + VAT.

The post Design the error 404 page to be entertaining appeared first on Web Strategy for Everyone.

You can lay you hands on the e-book today, it is sent to you shortly after you check out your order. The printed book, though, will take a few weeks before it is sent. The e-book’s formats are ePub, PDF and Mobi, they cover virtually all mobile phones and tablets, and Mobi is specifically for you with an Amazon Kindle. If you’re looking for a different format I can recommend that you download the program Calibre, then you can convert to many more formats yourself.

The best offer is, I think, to purchase both the e-book and the printed book. It costs about 25 $ + VAT. Then you get 90% discount on the e-book.

Order the book at Intranätverk – from 10 $ + VAT ›

What is Web Strategy for Everyone covering?

It is 60,000 words and 80 pictures spread over 212 pages. The amount of images and the layout makes it not so burdensome to read, like many other similar books. At the same time it is written in a very ”condensed” manner and to the point, so it’s like most Swedish literature – rarely repeating itself over and over again. Or, as one reader put it:

”Recently read your book and it is an achievement how much value you have managed to put between the covers. Very good!”

– Håkan Liljeqvist, founder at Kreejt

The subject of the book may seem obvious given the title, but at the same time there is no real definition for what is meant by ’web strategy’. So I chose to make the book to cover the fundamentals in many areas a web strategist must know about. Partly, the Web’s history, a lot on information architecture, different approaches to web design, some about the increasingly hyped topic of web performance and last a do-it-yourself with hygiene factors to check on your own website.

Not just a translation from the Swedish original

The book is not really just a translation of my Swedish book. The English book has more international image examples and it turned out to be unexpectedly many cultural references that non-Swedes would hardly understand. So pretty much of the book is rewritten for an international audience.

Interestingly, several Swedish friends and acquaintances are waiting to buy the English book, despite the fact that the second edition of the Swedish book have been out for several months. Many Swedes, myself included, are probably more used to read in English and may have more benefit of an English version when in a multilingual business environment.

Better English in the book compared to what I write in the blog

A first turn of the translation work was done by a Englishman who is very knowledgeable in web development and intranets. After that, a language agency also had their way with the book to raise the quality even further.

Needless to say, my publisher has really invested in the book and I think it’s going to be great even for you guys having English as you with English or American as your native language. For obvious reasons we can not afford to make the same effort with every blog post I write in this blog, so do not be too quick to review its language if you find peculiarities in my blog posts.

Table of Contents

Since we’re not going to judge a book by it’s cover over the Internet I’ll share the ToC. Perhaps this content gives you an idea if you’d make use of reading the book.

• Before we begin
  • Why you should read this book
  • About me
• The Web’s history and future
  • Web 1.0 – a network of documents
  • Characteristics of Web 1.0
  • Web design 1.0
  • Web 2.0 – the engaging web
  • Characteristics of Web 2.0
  • Web design 2.0
  • Web 3.0 – a network of data (also known as the semantic web)
  • Characteristics of Web 3.0
  • Web design 3.0
• Information architecture
  • Content choreography
  • Examples of poor content choreography
  • Master Data Management prevents unnecessary duplication
  • The importance of marking up information with metadata
  • Metadata specification makes your data more standardized and interchangeable
  • Controlled vocabulary
  • Folksonomy
  • Architecture using APIs and open data
  • Public APIs, open data and the PSI Act
  • Background to the European Union’s PSI Act
  • Some take issue with the PSI Act – cumbersome access to data
  • What then is open data?
  • The benefits of an API for a startup business or when building anew
  • Design a public API with the developers’ experience in mind
  • Friendly terms and a free license
  • No surprising the developers with unforeseen breaking changes
  • Provide data in the expected format and in suitable bundles
  • Error handling and dimensioning of the service
  • Provide code samples and showcase success stories
  • Promote via data markets and API directories
  • What is the quality of data needed?
  • Microdata – semantically defined content
  • So, what is the problem?
  • The potential of semantic information
  • Microdata standards such as Schema.org and Microformats
  • Digital Asset Management (and Adaptive Content)
  • Adaptive Content
  • Image and media banks in your publishing system
  • Personalization of information
  • URL strategy for dummies
  • Common excuses for breaking established URLs
  • Ok, how to then?
• Web design
  • Gov.uk design principles
  • Start with needs
  • Do less
  • Design with data
  • Do the hard work to make it simple
  • Iterate. Then iterate again.
  • Build for inclusion
  • Understand context
  • Build digital services, not websites
  • Be consistent, not uniform
  • Make things open: it makes things better
  • Keep it simple, stupid – KISS
  • Do not break the web
  • Persuasive web designs (PWD) – design that convinces
  • Be clear in everything
  • Be very careful of what is the default setting
  • Visual hierarchy is important
  • Focus on the common goal you and your visitor have
  • Try not to overexert your users’ attention
  • Responsive web design
  • The mobile moment
  • The elements of responsive web design
  • Arguments for responsive web design
  • Notes on responsive construction
  • Responsive typography
  • RESS – Responsive Server Side
  • Adaptive web design
  • Design with data – a data first-approach
  • Get started with design with data
  • What you know about your visitors
  • Continuous A / B testing
  • Examples of A / B tests for monitoring the website, and other communications
  • Mobile first
  • Mobile first vs. responsive web
  • The mobile opportunity
  • Mobile restrictions
  • The mobile moment – when mobile users are in the majority
  • SPA – Single Page Application
  • Design of SPA websites
  • Challenges of SPA
  • Web standards, and usability
  • Progressive enhancement and graceful degradation
  • Usability vs. accessibility
  • Gamified design
  • Design and plan for errors that will occur
  • Your website is a magazine, not a book!
• Web performance
  • Planning for the unplanned
  • Performance optimization of databases, web servers and content management systems
  • General troubleshooting
  • Planning for high load – use cache!
  • Content Networks (CDN – Content Delivery Network)
  • Databases
  • Web servers, content management, own source code and external dependencies
  • Measuring and improving interface performance from the user’s perspective
  • Helpful tools
  • Editorial performance impact
  • Technical settings for performance
  • Recoup an investment in web performance – is it possible?
• Test your own website
  • How to document your test
  • SEO
  • Indexable for search engines
  • Duplicate content
  • Page title’s length is under 60 characters
  • Page title is readable and understandable in the search engine results page
  • Page title contains relevant keywords that describe the page
  • Correct headings are used
  • Search engine friendly URLs
  • Descriptive text on all important pages
  • Reasonable number of links
  • Pictures have alternative texts
  • Structured description of the information
  • Web analytics
  • Current visitor tracking scripts
  • Tracks the use of website search
  • Performance
  • Reasonable time for loading the page
  • Compression of text files
  • Usage of the browser cache
  • Scripts and style sheets are sent in a compact format
  • Images are optimized for fast transfer
  • Reasonable number of background images, scripts and stylesheets
  • Requesting files and pages that do not exist
  • Minimal amount of scripts and CSS in page code
  • Images are not scaled down using CSS or HTML
  • Identical files are not referenced
  • Reasonable amount of scripts in the page head
  • Content networks are used when necessary
  • Accessibility and Usability
  • Website validates the chosen code standard
  • Using correct header structure
  • Anchor-texts are descriptive
  • Link titles not used for non-essential information
  • Favorite icon is present
  • Possible to navigate with keyboard
  • Texts are written to be read by a human – not with exaggerated SEO
  • Language set in the source code
  • Not depending on browser features
  • Specifies image sizes in HTML
  • Works with and without the www prefix
  • Only one domain is used for the website
  • RSS subscriptions can be detected
  • Useful error pages
  • No surprises when scrolling
  • Enough distance between links, buttons, etc.
  • Acceptable text size
  • Zoomable, also on mobile
  • Icons for the website
  • Useable printouts
  • Others
  • Forms and other sensitive information is sent through a secure channel
• Tips on in-depth reading
• Sources & references
• Thanks goes out to…

Check out the Web Strategy for Everyone by the publisher Intranätverk. It costs from 10 $ + VAT ›

The post Web Strategy for Everyone released today appeared first on Web Strategy for Everyone.

How to qualify for a review copy

First of all, you have to have somewhere to publish your review, of course. It is not a requirement that you have a lot of visitors or followers. But preferably your publication/blog is tech or web related.

You are expected to have written your review within a month, and please let us know when you have and we’ll post a link to your review on Twitter and our other channels.

Get in touch via Twitter if you want a review copy.

Some facts about the book

All in all, there are 80 pictures and 60 000 words spread over 212 pages. The printed book will be released late this summer. The book is published by Intranätverk, they also offer books about the digital workplace, intranet governance, and more.

The post Want to review Web Strategy for Everyone? appeared first on Web Strategy for Everyone.

I suspect that they would ideally spend all their focus in their new browser, Edge, but it might give too many angry corporate customers.

Some of us still remember Internet Explorer 6

We, old-timers in the web, is still upset over Internet Explorer 6, even though it is a couple of years since it disappeared from even the most slow organizations in the public sector in Sweden. Internet Explorer 6 was really good when it arrived, but was woefully poor during the last years of its life. The bottom line is that no browser version should live more than a year.

For us working with the web, it really is nothing new.  We should not design anything to work in one or a few browsers that happens to be current right now. If we follow the design principle of progressive enhancement, ensuring a design’s usability in both new and old browser. As icing on the cake we are then not:

• Dependant of Javascript.
• Do not make it complicated for the search engines.
• Set up barriers for those with disabilities.
• Most likely, it has also resolved about half of the challenges of web performance without even focusing on it.

If you’re looking for a longer rant on the advantages of progressive enhancement? This is that concludes the chapter on web design in the book Web Strategy for Everyone.

My web developing friend Filip expresses his feelings for Internet Explorer 8-10 this way:

???
Very nice to once and for all throw out all the old fallbacks. Right now it actually feels like Safari is the elephant in the room, which will be harder to ignore …
– Filip Andersson

More on Internet Explorer <11’s death

• Gizmodo: Internet Explorer 8-10 finally dies >
• The Next Web on that web developers rejoice now that IE 8-10 dies >

The post Hooray! Internet Explorer died today… appeared first on Web Strategy for Everyone.

An unusual number of interesting books has been published recently. These book I’ll be reading shortly:

1. Designing for performance by Lara Hogan
2. Measuring the User Experience by Tom Tullis and Bill Albert
3. Going Responsive av Karen McGrane
4. Responsive Design: Patterns & Principles by Ethan Marcotte
5. Lean websites by Barbara Bermes
6. Design for Care by Peter Jones
7. Service design by Andy Polaine
8. Managing chaos by Lisa Welchman
9. Content Everywhere by Sara Wachter-Boettcher
10. Search Analytics for Your Site by Louis Rosenfeld
11. Why: A Guide to Finding and Using Causes by Samantha Kleinberg
12. Relevant Search by Doug Turnbull and John Berryman

Do you have any interesting books you look forward to reading this year?

The post The web strategist’s bookshelf appeared first on Web Strategy for Everyone.

I usually have to point out that I, also, prefer tools like Google Analytics, but when I try to exclude my own needs out of the equation, the recommendation becomes obvious – we should focus on the visitor’s integrity, first and foremost.

In Sweden, the Swedish Post and Telecom Agency is late to come up with a guide on how to adhere to this law (which virtually all sites violate today). The origin of law is an EU directive, so the same law is probably in almost all European countries. There are plenty of material for the curious, but I thought I’d summarize it for you at EU level.

Legal interpretation summarizing the Cookie Act in Europe

During my research, I have found a pretty good summary of how we probably should interpret the law and its intent, that is, a reasonable outcome the guidance will clarify. The four points are taken from a report produced by the Data Protection Working Party wrote in 2013, it is also something that a lawyer at our national Post and Telecom Agency tipped me to read while waiting for the guidance. The following points is on how to handle the informed consent of a visitor of a website, you know, those messages asking for your consent when visiting many European websites.

1. Specific information.

To be valid, consent must be specific and based on appropriate information. In other words, blanket consent without specifying the exact purpose of the processing is not acceptable.

2.Timing.

As a general rule, consent has to be given before the processing starts.

3. Active choice.

Consent must be unambiguous. Therefore the procedure to seek and to give consent must leave no doubt as to the data subject’s intention. There are in principle no limits as to the form consent can take. However, for consent to be valid it should be an active indication of the user’s wishes. The minimum expression of an indication could be any kind of signal, sufficiently clear to be capable of indicating a data subject’s wishes, and to be understandable by the data controller (it could include a handwritten signature affixed at the bottom of a paper form, or an active behaviour from which consent can be reasonably concluded)

4.Freely given.

Consent can only be valid if the data subject is able to exercise a real choice, and there is no risk of deception, intimidation, coercion or significant negative consequences if he/she does not consent.

— end citation

Probably we’ll return to this subject in the future. If you want to start blocking content like cookies or other form of trackers then check out Ghostery for your computer and content-blockers such as 1Blocker if you have a Ios device.

Also, listen to The Big Web Show episode about digital law and web design. 

The post The European cookie law explained appeared first on Web Strategy for Everyone.