My Swedish edition of the book has got some recognition since its initial release in 2014. Until now the English edition has had a bit more obscure existence even though it has sold better than I expected.

Yesterday, after some vanity-searching on Google I found out that Buffer wrote an article on The Chicago Tribune – “14 quotes that celebrate a more accessible world”.

“When speaking of disabilities, the blind and their needs are most often used as an example. It is deceivingly simplistic since accessibility is something most of the population can benefit from.”
– Marcus Österberg, Web Strategy for Everyone

Most startlingly is the names of the others they chose to quote. Among others are my personal hero in usability, Steve Krug, author of the magnificent book Don’t Make Me Think. Also, the creator of the Web is quoted, Tim Berners-Lee. To top it off we also find Stephen Hawking, a theoretical physicist perhaps most famous for his work on cosmology.

Maybe the book, Web Strategy for Everyone, contains more quote-worthy passages. Find out for yourself, it’s available in print, PDF and E-book at my publisher Intranätverk

The post Quoted on accessibility in Chicago Tribune appeared first on Web Strategy for Everyone.

Where I work, our public facing website went responsive in 2012, but our intranet is still lagging behind. Well, on the few occasions when I create content for our intranet I manually input code to make my images responsive. 

Why responsive images on a non-responsive intranet?

It might not make sense to everyone why you’d like the images responsive when the intranet itself is not. One argument is that you like the image to fill the available width, not caring what that width might be. Some intranets is actually fluid in their grid system, but not responsive in their imagery, making for a less than optimal design with today’s standards.

Also, some of your users might have a high resolution screen. For them some images look blurry compared to the adjacent text. You can alleviate that blurriness with an unnecessarily high-res image, which by CSS-code is made to fit the width of its container.

The code to accomplish this is actually not that complicated, at least if you settle with an image scaling down in accordance with the column width it resides in. The most difficult part of this operation might be locating the image in the HTML-code in your CMS editor.

Images are tagged with a <img> tag. Your job is to figure out of its the right image, and if it is, then look out for an existing style-attribute. If there is none you paste the code below inside the <img> tag.

style="max-width: 100%; height: auto;"

Afterwards, it can look like this:

<img src="myphoto.jpg" alt="Fabulous photo of mine" 
style="max-width: 100%; height: auto;">

This instructs the web browser to let the image use all available horizontal space and the height automatic – keeping the aspect ratio, that is.

Potential problems

Perhaps, the most obvious potential problem is that you happened to mistype or alter the code in a way that is not according to the HTML-specification. If the image disappeared when switching back to WYSIWYG-mode you probably messed up the code, then switch back to the code and look through the code carefully.

If your <img> tag is stating width or height attributes like the code example below, then you have to remove that part for the style attribute to be effective.

<img src="myphoto.jpg" alt="Fabulous photo of mine" 
height="300" width="500">

If you still struggle with making your images responsive, please post a comment and I’ll try to help out. Whether or not your <img> tag is ended with a /> or just a > is contingent if your website is using the XHTML standard or the HTML standard. When in doubt, include another image using your CMS and look for yourself how the CMS prefers it. Most tools I’ve used don’t really mind how you write code in this regard.

Going all in with responsive images

There is much more you can do to achieve responsive images. For instance, you can serve different images for different sized screens. Smaller screens often need cropped images for the content to be conceivable, while you can serve a similar image to tablets and large screens. Also, you can serve high resolution images to retina screens, especially on intranets since bandwidth rarely is an issue.

The most apparent advantage working with intranets is that you now more about the user’s context, and their equipment tend to be somewhat standardized. So going all in with high resolution images for users with big screens is a decision easier made compared to the public Web.

Some of the responsiveness need support in you CMS. To learn more about the possibilities of responsive images, and responsive web design in general, check out the brand new book Web Strategy for Everyone – initially released with an extra friendly price ›

The post Ad-hoc responsive images for your intranet appeared first on Web Strategy for Everyone.

 “It is all about lowering the threshold for decisions and guiding a series of micro-decisions towards the goal you have. Here the concept of dark pattern introduces itself. That, by design, you control what happens in a way that is not in the user’s best interest, or intention. It could be moving around buttons so the user happens to give an app a five-star rating in an app store, without warning, adding additional products to the shopping cart, or services sending e-mails to your contacts claiming to be you.”
– Web Strategy for Everyone, chapter Persuasive Web Design

Defining a design decision as a dark pattern is when it’s not in the user’s best interest. Thus, one can actually speak about certain design decisions being evil. Of course, it is not always entirely clear what is a dark pattern and which isn’t. To work with persuasive methods is a most natural consequence of competition.

Current example: Microsoft changes the convention of the close button

That Microsoft has a tough time now, no one can have missed. The former software giant, the ‘monopolist’, is undergoing their own digital transformation. We as users seem less and less engaged about the software platform we choose, and beyond that, Microsoft has at least 2-3 times completely failed to become a major player in the mobile space. Just yesterday they fired almost 2000 employees from the mobile division, formerly Nokia, which Microsoft bought only two years ago.

Somewhere where they still dominate is the classic desktop computer space and the software related to it. Their latest operating system, Windows 10, apparently needed a little extra boost in the number of users. Interestingly, they chose to run with the ugly trick of a dark pattern to get more people to upgrade from Windows 7 and Windows 8 to Windows 10.

What do you think happens if you click on the red button in the dialog that asks if you want to upgrade to Windows 10? Normally, the convention is unmistakingly obvious that close the dialog and you are ignoring the message, and nothing happens.

Microsoft’s creative solution, on the other hand, when the user closed the dialog the user gave their consent, which for the majority of users feels shady to say the least. Microsoft is simply ignoring the convention they would always adhere to, what the button is there to do. Since only Microsoft is to gain from such a design decision it is an archetype of a dark pattern. Shame on you, Microsoft!

In other words, as long time Microsoft journalist Paul Thurrot puts it:

Last week, Microsoft silently changed Get Windows 10 yet again. And this time, it has gone beyond the social engineering scheme that has been fooling people into inadvertently upgrading to Windows 10 for months. This time, it actually changed the behavior of the window that appears so that if you click the “Close” window box, you are actually agreeing to the upgrade. Without you knowing what just happened.

Previously, closing this window would correctly signal that you do not want the upgrade. So Microsoft didn’t change the wording in the window. It didn’t make an “Upgrade now” button bigger, or a non-existent “don’t ever upgrade” button smaller. It pulled a switcheroonie.

Do you have any examples of dark patterns? Tell me!

Do not forget to take a look at the book Web Strategy for Everyone, it talks a great deal about how to design convincing but with usability in mind.

— update May 29th – Verizon Fios

As Twitter user Mixonic exposed, Verizon Fios is using a randomized number to tell how many agents are waiting for your call. Lying is a great start for a long-lasting relationship, right?

The post Dark patterns: Designing with bad intent appeared first on Web Strategy for Everyone.

You who have read my book Web Strategy for Everyone notes at the end of the web design section that I, a little unexpectedly, am lumping together usability and accessibility with game-based learning, so-called gamification. It is not a coincidence. In addition to the fact that each user’s abilities are highly individual in its mix its fundamental, for all users, to show that it’s worth the effort.

Accessibility is all about empathy

It can sometimes be difficult to find support for working with accessibility even though most people agree that it is important. My most common argument is that accessibility will benefit all of us – at some point.

“What will you send an Iphone 6S with its retina display locked in landscape mode when on a medium fast cellular connection and located outdoors at noon?”
– Web Strategy for Everyone

Anyone using their mobile phones out in bright sunlight will notice that they need a lot of contrast in order to have a chance to orient themselves on a website. All of us have motor impairments sometimes, you’ll notice it when on a touch screen when the finger you’re accustomed to have a patch, or whether using someone else’s computer where the mouse is not as you expect. Such as a gaming mouse with a “high sense”, then the mouse pointer moves far too fast for an inexperienced person.

Accessibility is beneficial for all users – at some point

Also, most of us suffer from cognitive impairment once in a while, at least it must be common having a reduced function at the end of the working day. We get tired and easily distracted, in other words. But we can also be under emotional stress, as Eric Meyer explains in the podcast episode The Web Ahead – Designing for Crisis, all those interfaces not being helpful, when all he wanted was to see his daughter.

Some users of these needs all the time. To convince those being doubtful you can also invite them to a usability test. Or show them some of all videos online where you get to see how these problems affects the user experience for actual users. The web standard organization W3C has compiled a list of examples, videos for us to gain insight on accessibility.

Tips on tools and an accessibility checklist in the book

Don’t miss out on the DIY-section of the book. I suggest tools you can use to check if your website is okay accessibility-wise. Buy Web Strategy for Everyone at introductory price ≈ 25 $ + VAT from Intranatverk ›

The post Global Accessibility Awareness Day today 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.

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.