Confirmshaming: Stay away from the Dark Side

Confirmshaming is a very aggressive type of marketing, where the general idea seems to be that if the carrot doesn’t do the job, the stick will.

Using web design and web content in this negative way is called “confirmshaming”.

Confirmshaming is done by adding short texts that shames, blames or are just simply rude to the website visitor. Sometimes the effort of confirmshaming is enhanced by deliberately creating a web design and UI that makes it difficult for users to decline an offer or close a pop up window.

Even though click-rates and other metrics might get boosted by using these manipulative patterns, confirmshaming is in our opinion basically bullying, and should not be used.

Read an in-depth article about the phenomenon on our blog.

Close

Getting from Idea to App

Have a listen to this podcast episode if you want to know what the most common pitfalls are when trying to realizing your application ideas, and how to best avoid making those mistakes.

Listen to the whole episode: How to go from a great idea to a reliable application

Boagworld Show is an industry leading UI, UX and web design podcast. When season 18 was opened to the public, we immediately decided to contribute.

Close

Staying Safe with SSL

Have you ever noticed that some website addresses start with “https” and not just “http”? The extra “s” stands for Secure and indicates that the website has a so-called SSL certificate installed.

Just like Google announced in 2016, the browser Google Chrome will from now on show a warning on web pages that handles logins or credit card information and not using SSL.

WordPress has also been moving towards SSL during 2017, which adds yet another incentive to get the “s” in your “http”.

Learn more about this on our blog.

Close

Checklist for Publishing Images on the Web

• Make sure you have the right to use the image!
• Choose the appropriate image size. Adjust the image size to how much space it will occupy on your website.
• Choose the appropriate image format based on the motif of your image.
• Compress your image before publishing it on the web.

Read more about publishing image online on our blog: Guide to publishing images on the web

Close

Choosing the Right Font

If you haven’t already seen the Saturday Night Live sketch where Ryan Gosling freaks out over the choice of using the typeface Papyrus on a movie poster, you’re in for a treat. Apart from Papyrus, check out this site before deciding on using another (in)famous font, Comic Sans.

Guide to picking a font:

• Make sure the font mirrors the message of the text it will be used for. If you are going to use it for a comic book, by all means, go ahead and use Comic Sans if you must.
• Make sure to pick a font that makes it easy to read where it is used. Headings often use bolder and more decorative fonts, compared to fonts used for large, dense blocks of texts. For longer text sections it is better to use fonts that are designed for legibility rather than pure aesthetics.
• Don’t limit yourself to the fonts that happen to be installed by default on your computer. There are millions of fonts to choose from, and some are even available for free.
• Fonts, just like any other designed products, are influenced by the time and context when they are created. When trying to find matching fonts is to look for fonts that represent roughly the same historical period, although they have different features. Think of it like pairing an outfit with the appropriate attire – you generally don’t want to wear a 1980s Hawaii shirt with a pair of medieval hosen.

Close

What are Progressive Web Apps

Progressive Web Apps (PWAs) can be seen as a mix of native and web applications.

PWAs can make use of some of the technologies that previously have been available only to native apps, and most importantly – they can function without being connected to the Internet.

PWAs can programmatically be created using technologies that are used for building websites, which makes them cost efficient compared to creating multiple native apps for different platforms.

With that said, the big drawback is that the technology is not yet fully available on all platforms.

On Edge and Safari at the moment of writing (late 2017), parts of the most crucial technology are available only if you actively change the settings.

Close

Stay Updated

Tech and the web are fast-moving businesses. An easy and lazy way of keeping tabs on what’s going on is subscribing to curated newsletters, that bring the latest and hottest news right to your inbox.

A few suggestions are:

• Sidebar: 5 daily links about web technologies, UI, UX and digital design
• Smashing Magazine: web design, UI, UX and development articles, focusing mostly on front-end. The magazine itself is one of the most reputable publications in the web business, and the newsletter content is of equal quality.
• Codrops: links to the most popular articles, highlighting things that have been trending in the community. In spite of always offering a free font or iconset each email, the content leans more towards the tech than design.
• Versioning: a mix of tech, design and business articles focusing on the latest in the web business.

Close

The Controversial Notch

When Apple launched the new iPhone X, the “notch” at the top of the screen caused a lot of discussions and upset amongst designers.

The reason for the upset was that the notch pushed website content around awkwardly. This lead to the question of whether or not the behavior should be specifically targeted in code and dealt with, or if the idea of creating a different set of rules just to handle one device was mal-practice and backward thinking.

If you’ve splurged on the iPhone X and want to hide the notch, our tip is to use one of these screensavers to hide it – at least until you need a topic for conversation.

Read more about the notch discussion:

• ‘Notch’ crazy, iPhone X mad: What designers think of iPhone X
• The iPhone X Notch is All About Branding

Close

What about AMP

AMP stands for Accelerated Mobile Pages and is a new format for serving websites to mobiles invented by Google. Maybe you’ve seen “AMP” next to a small icon of a lightning bolt in Google searches (on mobile) that indicates that this is a link to an AMP site.

Google actively promotes AMP sites to end up higher in their search results.

The supporters of AMP claims that the technology behind AMP sites makes them much faster to be viewed on mobile devices. That will, in turn, lead to happier visitors and companies making more money because shorter wait times lead to higher conversion.

AMP critics are concerned about Google gaining too much control over which sites search results show, as well as not being happy with where Google claims the AMP pages are really hosted.

Read and decide for yourself:

• www.ampproject.org
• AMPersand by Ethan Marcotte
• The meaning of AMP by Jeremy Keith
• Distributed and syndicated content: what’s wrong with this picture? by Hadley Beeman, W3C
• Embrace AMP or AMP wins by Dennis Forbes

Close

Firefox Quantum & Send

Mozilla Firefox is challenging Google Chrome with the latest version called Firefox Quantum, which is impressing users with its speed.

The Firefox dev tools are already considered the best option for inspecting the newly added CSS Grid, and rumor has it the Firefox team will be dedicating even more time on browser dev tools in 2018.

As icing on the cake, Firefox just launched a new service called Send, which creates a secure, private and encrypted download link to files that, for exampe, are too large for being emailed.

The service is a Test Pilot Experiement, and should work in all modern web browsers.

Close

GDPR

The General Data Protection Regulation is a new law, affecting all EU nations from May 25, 2018. The purpose of the law is to secure and protect the personal data of EU citizens. Companies or organizations failing to meet the new regulations risk substantial fines.

The new rules for handling personal data concern both how data is stored, how it is protected, routines for handling security issues, users being able to access their data and to have it deleted. It is also required to be able to report what the data should be used for, and why it is collected.

TL;DR

There are a lot of new rules that lead to a lot of extra work for anyone who is handling any form of user data.

Close

Animating the Web

There are different ways of adding movement to your websites.

• Animated GIF: an image that acts as a small video loop in itself. The drawback is that the loop should be kept short not to make the file size too heavy. Also, the image itself should not be too large in terms of width and height to keep the file size down. These types of images are often perceived as a little bit choppy. Animated gifs are often found in emails, as signatures in forums and on social media.
• Video: apart from embedding YouTube or Vimeo videos, you can also use videos that you host yourself. For some time, large video backgrounds were very popular on landing sites. Just remember to keep an eye on the file size of your videos. For best result in different browsers, make sure to upload the different file formats needed.
• Code animations using CSS on texts, images or other web elements. Especially useful for micro animations when you want to draw a little extra attention to for example updating the shopping basket or clicking a button. These types of animation work in modern browsers.
• Code animations using canvas or SVG or javascript animation libraries. Using these types of techniques make it possible to add more complex animations. See this example of animated olympic rings. Browser compatibility depends on which technique is used.

Close

Style Guides
& Pattern Libraries

Style Guides or Design Pattern Libraries are collections of design rules that help designers and developers create consistent experiences for users. This documentation also helps consolidate branding.

The difficulties of not deviating from the decided look and feel grow with a project. Creating this type of documentation is, therefore, more important for large web applications or brands, who also have the resources to make serious efforts.

Some examples of public Style Guides / Design Pattern Libraries from large organizations:

• Audi
• BBC
• Mailchimp
• Salesforce
• Yelp

Close

Accessibility

Accessibility on the web is about making web content available to people with different kinds of disabilities. The most obvious handicaps for accessing web content are perhaps different kinds of sight impairments. Color-blindness, impaired sight as well as blindness needs to be taken into account. Colors and contrasts need to be adjusted to make content easier to see, and special code needs to be added to make the site even better for screen readers.

The growing possibilities of adding movement to websites – like the popular parallax effects – can also cause problems for people who are sensitive to motion sickness. Sites with these types of effects should, therefore, have a way of accessing the content with the effects turned off.

Some visitors could also have dyslexia, or be handicapped in ways that limit their cognitive skills. It would therefore be important not to use too complicated language or too long sections on websites that expect parts of their visitors have these disabilities.

Visitors could also have motor impairments, meaning they could find filling in forms or moving the cursor challenging.

The more people need to be able to use your site, the higher are the accessibility requirements. The toughest requirements are often placed on government websites that need to be accessible to all citizens.

Close

Tune in To Web Podcasts

Multitask like a pro and make chores less boring with a good podcast in your headphones. Stay updated with our pick of newbie-friendly, web focused podcasts:

• Boagworld Show: focusing on marketing, UX and the business side of both freelance and running an agency. One of the very first web focused podcasts, and still going strong. A very easily digestible podcast which we are happy to have participated on.
• CTRL+CLICK CAST: bringing up topics that are important to both agencies as well as their clients. Example of topics is branding, Google Analytics, and Web Maintenance.
• Syntax: More tech-oriented, focusing on the latest in web development.

While there are certainly many more high-quality web focused podcasts out there, a lot of them are quite deep-diving and require that the audience already have significant technical knowledge.

Close

Performance

Web performance is how fast websites are downloaded and displayed in a browser. Faster websites have shown to increase user happiness as they provide a better user experience.

How fast a visitor reaches a page is also important when it comes to so-called bounce rate, meaning that visitors leave the site almost instantly, in this case presumably because it takes too long to load.

If visitors leave an e-commerce website, they will not make a purchase. If the site is instead loaded really fast, they might stay and buy something. Might sound trivial and simple, but to e-commerce companies this is vital, and to engineers, performance has grown into an area of expertise in itself.

Several case studies have been done on the topic, for example by e-commerce giant Wal-Mart. See the slides from a presentation by Cliff Crocker, Wal-Mart Senior Engineering Manager at the time.

Close

Perceived Performance

Perceived Performance is how fast visitors think your site is, which can differ from how fast the site is in reality. Since it is the user who will determine when loading a webpage takes too long, how long waiting times are perceived is really what matters.

Some tricks to keep user attention while waiting (more effective than hold music):

• Loading animations, spinners or progress bars help tell the user that a short wait time is expected and that nothing has gone wrong.
• Use images that will show the entire image right away, but only load some of the data. The image will look a little blurry until all of the data is loaded, but it will be a better user experience because it will prepare the user to expect the content. To achieve this with JPEGs, use progressive format.
• Skeleton placeholders on load: When the page loads, show indications of what content to expect. Examples of this are the light grey boxes replacing images and text on Facebook while the page loads (on a slow connection).

Close

Above The Fold

Above the fold is a graphic design term, referring to the area of a website that is instantly visible to the user, without having to scroll down. The general rule has been to put the most important content in this area so that it is instantly available and becomes easy to find.

With different screen sizes as well as screen orientations (landscape and portrait modes on phones and tablets), it becomes increasingly difficult to determine what content will actually be displayed in this highly desired space.

UX experts however have concluded that there are a lot more things deciding if a call to action button gets clicked apart from if it is placed in the golden “above the fold” area or not.*

TL;DR: Just putting important content in the very variable area that might be “above the fold” on some devices might not automatically improve the result in the obvious way people often expect.

*Joe Leech on “How to Design with Science Without Losing the Magic” at SmashingConf, Barcelona 2017, around 5.40

Close

SEO Myths

h1 tags

I once had a prospective client request no more than one h1 tag on each HTML page because he had heard it was otherwise bad for SEO. Since the arrival of HTML5 in 2014, the desired way of adding h1 tags per HTML5 specification is to only have one h1 tag for each section (like article, aside and so on).

In fact, what matters most for search engines is not as much which specific tag is used for your content, but that your page contains relevant and useful information that addresses the needs of your visitors.

The More the Merrier

The more times a keyword occurs on the site, the better? Just stuffing keywords on the website for the sake of it, or posting duplicate content to your site might actually get recognized by search engines and effect your ranking negatively.

Race To the Top

Top search engine ranks are not a quick fix. A site does not go from a low ranking to being number 1 on Google in a day. You will need to build credibility by creating relevant, useful content around your keywords, as well as getting other (relevant) sites to link to your (relevant) content.

Why Metatags are Important

Metatags live in the head section of your webpages. They are used for previewing some of the webpage content in search results. In that way, they are important for getting people to understand what content will be on your site, but they will not alone boost your search rankings and are not used in the ranking algorithm*.

*Read the article Google Does Not Use Keywords Meta Tag

Close

Raster & Vector Graphic

That images can have different file formats is perhaps something most people already know, however on the web, there is an important distinction between so-called raster and vector images.

Raster images are typically photographs (.png, .jpg), whereas vector images are usually simpler and smaller, like logos and icons (.svg).

What makes vector graphics so useful on the web is the fact that they can be shown at any size without becoming fuzzy or pixelated. With the increasing number of high-resolution screens, this becomes an even bigger advantage.

To have a raster image look as sharp on a high-resolution screen as on a regular screen, the image itself needs to be bigger. Bigger images lead to bigger file sizes which in turn leads to longer load times, which might lead to unhappy users.

Close

The Difference Between UI & UX

UI stands for User Interface. UX stands for User Experience. Since disciplines often are intertwined and have a great impact on each other, lines can become blurred.

In the case of UI and UX, one has a hard time existing without the other. One of the simplest and most to the point examples of what UI and UX are and do is depicted below by Jennifer Aldrich, UX & Content Strategist at InVision:

And then my kiddo asked, "What's the difference between UX and UI?" #ux #design #ui pic.twitter.com/p2st4sG7NB

— Jennifer Aldrich (@jma245) 4 mars 2014

UI is the way of interacting with the app/website/product. UX describes the user's experinece of handling the app/website/product using its UI.

Close

Follow the Crowd

Following influencers in social media is another way of staying updated on what’s happening.

Currently, Twitter seems to be the professional social media channel of choice for people in the web business. Here are a few suggestions of web celebs mainly from the front-end area of expertise to follow on twitter. While there of course are a lot of other noteworthy people that you could also follow, we decided to try and keep the list fairly short.

• Rachel Andrew: web developer, entrepreneur, Editor in Chief at Smashing Magazine, CSS Grid expert
• Wes Bos: web developer, online instructor, podcaster
• Chris Coyier: entrepreneur, web developer, podcaster
• Sarah Drasner: Sr. Developer at Microsoft, VUE, SVG and animation expert
• Brad Frost: web designer/developer, the mind behind atomic design patterns
• Scott Jehl: web designer/developer, performance expert
• Addy Osmani: developer working on Google Chrome
• Heydon Pickering: web accessibility expert
• Jen Simmons: web designer & developer advocate at Mozilla, member of CSS Working Group, CSS layout expert
• Sara Soueidan: freelance front-end UI/UX developer, SVG expert
• Jeffrey Zeldman: entrepreneur, publisher, a web business institution

Close

Web Design Tools

Pixel-perfect design mock-ups in Photoshop are the becoming obsolete. New technology like high-resolution screens, responsive websites and web animations open up for new possibilities and new work-flows.

Which will become the next dominating digital web design app is yet to be decided. A few of the most interesting alternatives are listed below:

• Sketch: vector graphics program, and perhaps the most widely known alternative to Adobe Illustrator. The program addresses some of the most common pains for web designers, at a pay-once license. The big drawback is that Sketch is only available for Mac, making it difficult to rely solely on Sketch if you plan to work with people on different platforms.
• Figma: UI design tool, available both as a web app in the browser and as a desktop program for Mac, Windows, and Linux. Apart from design capabilities, there are also features for collaboration, importing assets as well as prototyping. Free to try a limited version, otherwise a monthly subscription.
• InVision Studio: is being marketed as “the world’s most powerful screen design tool”, and from the previews, it looks like that might actually come true. InVision previously bought the Macaw app, which was similar to Figma, and with all features and resources already at InVision’s disposal, expectations for Studio are high. Collaboration, animation, prototyping and responsive designs are just some of the promised features.
• Adobe XD: UI design program, built to complement Photoshop and Illustrator for designing UI. Has been in beta until recently, and Adobe is continuously adding features. An alternative to Sketch for PC users, however more advanced graphics programs (like Illustrator/Photoshop) are probably also needed to create all parts of a design. One can only speculate if that is a deliberate business strategy, since the program is part of Adobe CC.

Close

AI, VR & AR The Future

Artificial Intelligence, AI

AI is being used to learn consumer behavior, as support chatbots and to provide better search results.

An excellent example of using AI for good is rescam.org. Forward your scam emails to me@rescam.org to keep scammers occupied in endless, meaningless conversations with a bot.

Virtual Reality, VR

VR on the web is possible with a VR headset and a browser that can use the WebVR API. The WebVR standards are a collaboration between the leading big companies within the field. Building these types of immersive VR experiences leads to higher UI and UX demands, taking into account different types controllers, headsets, and platforms.

Augmented Reality, AR

AR is mixing digital objects with the real world. A typical example is how Pokémons suddenly appear in your living room when playing Pokémon Go on your mobile phone. Using an array of different javascript libraries (like a-frame, AR.js and three.js), it is possible to create these types of experiences with web technologies.

Close

Treat Yourself

All work and no play is not a recipe for happiness, but this is pretty close:

Red Onion Signature Hot Chocolate
without Onion

1 cup of milk (not the light kind)
2 teaspoons of sugar
2 teaspoons of cocoa
4 cl Xanté Cognac & Pear Liqueur
a pinch of sugar for the cream
a generous amount of whipped cream
mini marshmallows

Add a pinch of sugar to the cream and whisk in a mixing bowl until it has a nice consistency.

Heat the milk on a stove (no microwave shortcuts), and add sugar and cocoa whilst stirring slowly with a beater to prevent buildup in the bottom of the cauldron. Pour the cognac into a cup, and add the warm chocolate milk.

Add the whipped cream on top, and sprinkle with mini marshmallows. Optional extra toppings to suit your personal tastes can be added, for example, grated white or dark chocolate, caramel and/or chocolate sauce.

Close