News dév web

Reality Check: The Most Important WordPress Plugins Behind Noupe - il y a 5 hours 36 min

Plugins are an important topic for every WordPress user. Before, we have presented new plugins every now and then. But we have never shown what our own installation runs with. Today, we want to catch up on that. In the following article, you’ll find the most important plugins behind Noupe.

No web worker magazine works without plugins. The opposite is the case, as people that need to create a lot of good content need a certain basic equipment of useful helpers for the job.

Noupe’s Most Important WordPress Plugins 1 – Code-Highlighting

Let’s start with the presentation of code snippets. Without proper core highlighting, the presentation of code snippets is not professional. We chose my plugin AH Code Highlighter, as it is very easy to use, comes with seven themes, and has a very low weight.

My article »My Personal Must-Have WordPress Plugins of 2017« goes more into detail on that.

2 – Performance

Performance is becoming more and more important. Here, you need plugins that synergize perfectly. There’s not a whole lot to choose from, as many other variants don’t work sufficiently well. We chose Autoptimize and Cache Enabler, as the combination of the two gets the best results.

3 – Social Media Posting

Every publisher needs to use social media to generate range. Nobody really want to manually write and publish every post to the respective media. Thus, an automatic, well adjustable solution is needed. We trust the Blog2Social solution by Adenion in the pro version. Licenses start at 69 Euro a year.

We’ve already released a more detailed introduction to the plugin here.

4 – Search Engine Optimization

Here, you’re probably just expecting us to mention the Yoast SEO plugin. I’m afraid I’ll have to disappoint you. After a lot of consideration, we decided to use DELUCKS SEO by Severin Lucks, as especially its premium version comes with a ton of truly useful advantages.

For example, you can not only SEO optimize an article, but also analyze your competition for this specific post. The other plugins don’t provide this feature. The premium version costs 60 USD and can be purchased at (Envato).

We’ve also introduced this plugin before.

5 – The Share Buttons

Share buttons are indispensable for the range of your articles. Nobody can afford to forgo social networks. Thus, it takes a fast and appealing solution that can also be adjusted via shortcodes and template tags.

Here, we confidently trust the Mashshare buttons by René Hermenau. This solution becomes really good in combination with the modules that can be purchased in addition to the free solution.

We use the modules Social Networks Add-On and LikeAfterShare. As a bundle with other useful modules, it will cost you 39€ a years.

6 – Image Optimization

Images are a delicate topic, as they are one of the biggest bottlenecks when it comes to performance. If you really want your website to have fast loading times, you need to pay a lot of attention to the optimization of your images. We chose the current best solution, the Optimus HQ Plugin by KeyCDN.

Optimus HQ is a premium solution, for only 29€ per year, which is also capable of generating WebP graphics, which result in much smaller file sizes than regular formats.

7 – Comfortably Using Own Shortcodes

Shortcodes can be a lot of things. An example would be the HTML element <code>, if you need to highlight a single line of code. You won’t find it in the editor, so you’d normally need to enter the element in the text view. The solution to this problem is provided by the plugin Post Snippets, which not only lets you create but also use own shortcodes in a comfortable way.

Find more useful information on the plugin here.

8 – Don’t Accidentally Release Posts

This happened to most of us. A single wrong click and your post draft is online. To prevent this, we’re using the Pre-Publish Post Checklist. You can only publish a post after you went through a custom checklist and met all the requirements you defined.

By the way, it has been three years since the plugin’s last update, but it still works fine with the newest WordPress version.

9 – Efficiency Review: Receiving Statistics on Social Networks

When writing professionally, an efficiency review is recommended every now and then. Which posts were shared how often, and in which network? Where did you get the most comments? These are important questions that you need answers for in order to judge the success of your articles. For that task, we’re using the Social Metrics Tracker.

Here’s an excerpt from the results of the Social Metrics Tracker.

The information helps you identify the evergreen content among your stock, and also tell you if you should go more into detail on some topics. This kind of analysis will make your (business-) blog more successful.

10 – Contact Forms

After years of using Contact Form 7, we have finally found a really good plugin for the job. It’s modular, easy to configure via drag and drop, and comes with the unbeatable advantage that it only integrates its CSS and JavaScript files where they’re needed. I’m talking about WPForms Lite Plugin.

Easily create forms with the generator of WPForms Lite.

You can find more information on the plugin in this article. Personally, I have just bought the premium version for 39,20 USD, which comes with a few more very interesting features.

11 – Performance: Cleaning Up the Database

Noupe’s database has a size of 2,5GB. Not long ago, we would have been happy to have a hard drive of that capacity. In order to limit the database size, maintenance is required. For that, we use the plugin WP-Sweep. According to its creator, WP-Sweep does the following:

WP-Sweep allows you to clean up unused, orphaned, and duplicate files in WordPress. It cleans up revisions, auto drafts, deleted comments, unapproved comments, spam comments, orphaned post meta, orphaned comment meta, orphaned user meta, orphaned term meta, unused terms, duplicated post meta, duplicated comment meta, duplicated user meta, and transient options. It also optimizes your database tables.

12 – The Development Page With WP Staging

Every website should have an exact copy of the own website for the development of new functions, and for the testing of plugin compatibilities. We’re using the wonderful solution WP Staging by René Hermenau, which we have already presented in this article.

13 – The Shop: WooCommerce & Co.

Of course, our shop is powered by WooCommerce. German legal security is provided – after significant issues with German Market – by the really good plugin WooCommerce Germanized with the important addon WooCommerce Germanized Pro. A license costs 69,95€ per year.

Users of WooCommerce Germanized Pro profit from many extensive features, like PDF calculations, sample text generator for SBT and cancellation policy, a multi-step checkout, premium support, and a lot more!

14 – Data Visualization – Charts and so Forth

From time to time, we need to neatly display our data. Interactive diagrams and graphics just look better than simply lining up the respective facts. Additionally, this makes it easier to conceive the data. WordPress Charts and Graphs Lite is our plugin of choice.

Did you know all the plugins already? Which ones do you use, and why do or don’t you use them? Let us know.

Catégories: News dév web

Which WordPress Website Builder Is for You? Try the #1 WordPress Theme Builder - il y a 12 hours 34 min

Advertise here via BSA

Finding just the right WordPress website builder to fit you needs can take time. First, you must determine what it is you want. Then you must take the time to research what’s available. Your research may require the skills of a Sherlock Holmes since you often need to read between the lines or request a trial offer to determine what a website builder is genuinely capable of.

Even then, you may have to settle for a compromise. The product may be of superior quality but is lacking in one or more important features; or it may be loaded down with features (including many you may never use), but you’ll have to sit through six hours of tutorials before you can even get it operational.

You can avoid all the searching, researching, free trials, and trying to live without certain features by going with #1 – Elementor.


1. Why Choose Elementor?

Elementor makes website building painless and effortless, but it does so without placing any design constraints on its users. It does what you tell it to without ever begging for a line of code to help get the job done.

This #1 WordPress website builder gives you all the design flexibility you’ll ever need. Whether you come across a client who has no idea what to ask for, or a very demanding, fabulously- creative client, neither one will be a problem for you.

You have full control over customizing your layouts, full access to the necessary design elements and features, you do your design work on the frontend, and you can see the results of your efforts instantly and in real time.

Elementor 2.0 is even better! 2.0 will be released incrementally over the remainder of 2018 with some great surprises in store. Elementor’s 600,000+ customer base is expected to increase dramatically. 


2. What Is It that Makes Elementor #1?

When a website builder reaches such a lofty status within 2 years of its release, it must have a lot going for it. But, that’s exactly what has happened with Elementor. Whether you specialize in building general purpose websites, portfolios, eCommerce stores, landing pages, blogs, or all the above doesn’t matter. This WordPress page builder still holds down 1st place.

There’s a host of excellent page and homepage themes to choose from. With Elementor, you can switch themes anytime you want. When you’ve finished a page, or even partially finished one, you can save it for use later.

Speed, customization, flexibility, and ease of use sound great, but they’re general descriptions. What about a few specifics?

Total Layout Customization

Customization can mean anything from a little to a lot. Many WordPress theme builders promise “a lot”, but Elementor takes customizing to a completely new level. You get extensive control over features including section widths and heights, column size,  position, content position, padding and margin settings. The net result is a more disciplined and cleaner design.

An Impressive Template Library

Elementor’s comprehensive template library covers a wide range of styles and industries along with a useful selection of templates that address specific needs and niches.

You can work from either a pre-designed template or from one you design yourself. You can save self-made templates and add them to the library for later use or for sharing with other designers.

An Excellent Assortment of Elements

A package of 40+ Elements comes with Elementor. Since they are customizable the “total” package is orders of magnitude larger. With the help of these customizable layouts, you can create virtually any layout down to the tiniest of details; and you don’t need to be a coding whiz or know anything about the practice to do so.

100% Responsive Design

If someone should tell you that the Elementor WordPress page builder is 110% responsive, it’s probably because they’ve gotten the effort the team put into making Elementor responsive (110%) mixed up with the characteristics of the resulting product.

In any event, device preview screens, device visibility controls, and percentage-based element widths ensure that device owners will see what you intend them to see.


3. Elementor is Perfect for Web Designers, and Perfect for Web Developers

Both designers and developers use this WordPress page builder, and they have been equal in their praise for this web-builder. Web designers like the fact that they can create pixel-perfect layouts without having to bother with CSS or coding. They also greatly appreciate Elementor’s selections of color palettes, Google fonts, and more than 400 icons.

What web developers appear to appreciate most is the freedom they’re given to extend and customize this WordPress theme builder. They don’t feel constrained or caged in when using Elementor, plus they love the custom CSS, the ease of incorporating 3rd party widgets, SEO optimization, and of course, the superior quality of Elementor’s code.


4. Elementor Keeps Getting Even Better and Here’s Why

For starters, Elementor 2.0 is Gutenberg compatible – completely. Even though the Gutenberg editor is currently in beta test, its release is imminent. Once that happens, editing activities on WordPress will improve significantly and become much easier that is the case with the present visual editor.

Other Elementor 2.0 features will be incrementally released over the coming months, so users will have plenty of time to adjust and plan ahead.

A quick look at the release schedule reveals these 7 new or improved features:

Pre-designed layouts (Blocks) will allow you to mix and match your Section designs much faster than before.

A much-awaited Header and Footer feature that enables you to design a page that includes header and foot areas.

The capability to design single posts and archive pages.

The capability to design 404 and customized search pages.

Improved WooCommerce shop, product page, and eCommerce page design controls.

For plugin and theme developers – new options for those who create Elementor extensions, plus an extensive tutorial and resource center.

Extensive integration of Advanced Custom Fields and Toolsets as part of a dynamic content creation process that will blow your mind.


5. Why You Should Try Elementor Now

This is not your average, run-of-the-mill drag and drop WordPress theme builder. Not by a long shot. The fact that this free WordPress page builder is #1 was almost bound to happen when you consider the effort the team put into resolving issues that have perplexed website builders for years.

The fact that Elementor is the best free WordPress page builder on the market, and an open source page builder to boot, is good news in itself; but the best is yet to come.

Check Elementor out now, both the free and the Premium WordPress builder version. Explore and experiment with its new and improved features, its amazing customizability, and its cool selection of widgets. And to repeat, no coding is necessary.

Give it a try, start saving your designs, share them with others and/or save them for future use – and enjoy yourself in the process.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Exclusive: 7+ SEO Tips for Designers - 21 mars, 2018 - 14:00

Before starting your descent into the depths of the SEO business, you should know that your design itself has a massive impact on the search engine viability. You’ll always fall short of an optimal findability if the design has been made sloppily.

No Chicken and Egg Problem: Design Came Long Before SEO

When looking at it from a historical point of view, there’s no doubt that design came first. SEO was not a thing until much later. First, we relied on the assumption that search engines, of which there was an entire pack in the nineties, would have a personal interest in filling their index. We didn’t take any special measures to be easier to find.

Then the web got fuller. Google took off, and the world’s self-proclaimed SEO experts started looking for ways to manipulate the search engine to push their sites to the top of the ranks. This resulted in SEO done for all the wrong reasons. Since then, we’ve been more or less fascinated watching a cat and mouse game. SEO will find a new way to spam. Google shuts it down. Start over.

The book on the left is the best SEO guide you can buy. (Photo: Pixabay)

Google is approaching its twentieth anniversary and has blocked most of the cheekiest and most stupid manipulation attempts for a while. Of course, it makes sense to help the search engines find your website. Google has defined options for that purpose specifically, while also explaining what a webmaster should or shouldn’t do.

But, taking a look back at the beginning of the indexing of the web, what did Google and Co. have to base their ranking on? Right, nothing but the websites created by designers. And they were already indexed back then. Huh?

Looking at it like this. SEO is a made-up category which wouldn’t be needed in a fair competition. Or, put it a bit more diplomatically: the origin of searching is not SEO, but design.

This assessment results in the importance of design for being found in search engines, something we call SEO today, giving the so-called experts a neat abbreviation for their job descriptions.

There are a lot more, and more complex technical terms in the made-up category. (Illustration: Pixabay)

Basically, planning for the criteria to be found is something that can be developed with common sense, without reading an 800-page tome on the topic.

Principle: The Best SEO is Structured, Standards-Compliant Webdesign

The web’s origin lies in the invention of HTML. This markup language adds a logical structure to content and connects it via links. Search engines simply crawl through these structures, understanding them via markers, like H1, P, and so forth. This also allows for the content to be sorted by relevance.

Then the engines follow the links, allowing them to capture the entirety of a website, as well as its embedding into the overall web structure. Logically, the search engine values the sites the more, the more external links they get, and less, if that isn’t the case.

You want it too. (Photo: Pixabay)

This applied back then, and it is still valid today. Once you’ve understood this context, you can figure out all findability contemplations by yourself. Thus, the best and most effective SEO is a standards-compliant web design that exhausts its markup options, which means actually using H1 where it makes sense, for instance.

The first SEO measure for designers is writing standards-compliant HTML. Unfortunately, it is quite common to toss away standards-compliance in favor of achieving several visual effects. This has never been recommendable, and it won’t be in the future.

Let’s see where us designers can become active.

Tip #1: Use Tags as Designated

HTML is a structured language. Sadly, some CMS, WordPress above all others, act as if we didn’t need tags, like P for paragraphs, at all. Works fine without it. This may be correct for the viewer of a site, but it contradicts the principles of the web.

Page visitors that don’t look with their eyes, naturally including the search engine crawlers, see this flaw right away, making it hard for them to correctly rank the content components.

Tip #2: Avoid Unnecessary Elements

In the end, search engines only care about content, never about looks. (I’ll get to the restrictions later on.) Thus, you should forgo design elements if they don’t directly support the content. The content deserves all the attention. Consider carefully, whether the small survey in the sidebar, the funny mini-game, or the self-playing video really support the content. If not, leave them out.

They are not just restraints during relevance rating; they could even advance to the visitor check. This results in what SEOs call a high bounce rate. The people leave shortly after entering your site. Google recognizes that, and rates it negatively.

That behavior doesn’t necessarily have something to do with the content, but could also be a result of your playful approach to the display area.

Tip #3: Make Sure to Have a Clear Link Structure

Your navigation is the most crucial element for the indexing of the website. From here, the search engine should be able to reach every other page of your website. To do so, you should keep the navigation as simple as possible, rather than bringing a complex JavaScript construct to life. Specifically to feed the search engine, XML sitemaps have been proven to be a good choice.

Make sure not to leave a page abandoned. Without links, the search engine has no way to find and index a specific page.

Links, on the other hand, should be short, but descriptive. Although Google prefers working with numeric IDs, and pretty URLs don’t seem to have any advantages in ranking anymore. However, the search engine is only one part of your target group. Humans will have an easier time dealing with descriptive URLs, and it will also be easier to memorize and associate them with the topic when seeing such URLs in Social Media channels.

Two other aspects are a part of the link hygiene. Make sure your outgoing links are functional, and replace dead links as soon as possible. Don’t make your website grow like wildfire unnecessarily. Keep it compact, with the lowest possible number of pages.

Tip #4: Use Images as Images, Buttons as Buttons, Fonts as Fonts

Images were not made to store text in them. Just because the regular visitor wouldn’t recognize this trick right away, that doesn’t mean that this wouldn’t bother the search engine either. Images always need alt tags in order for Google and Co. to have the chance to guess what the image invisible to the crawler is about. You’ll never find images without alt tags in the image search.

Images are not a good call to action either. After all, the call to action has potential to be your most important interaction element. It’s better to set it up as a button with text highlighting its importance.

Typography is essential in modern design. In the past, we could only use fonts freely as text in an image. Today, we don’t have to do this anymore. We have web fonts. In Google Fonts alone, there are over 800 font families. I’m sure everyone will find something they like.

Web fonts possibly increase the loading time of your website, but they also take off the burden of images.

Tip #5: Place Essential Meta Tags

Title and description of a website should not be underestimated. Not because of the debatable ranking advantage, but mainly because the title and description are what represents your site in the search results. Obviously, both elements should be as crisp as possible. The title should be about 70 characters long, and the description should have a maximum of 160 characters. Here, I recommend placing identified keywords of the respective site as early on in the title and description as possible.

Additionally, you should look into the topic of Rich Snippets.

Tip #6: Create Responsive Websites

I just want to briefly mention this one, as I don’t think anyone in this branch missed out on the “news” that Google has been including the criterion of mobile-friendliness in their ranking standards for years.

A design for many devices has many advantages. (Illustration: Pixabay)

Responsive design also comes with the benefit that every content only exists once, and the fact that the design is kept slim simply by concept. This way, you don’t have to deal with the topic of duplicate content, while maintaining the loading time in check at the same time.

Tip #7: Pay Attention to Your Website’s Performance

The faster your website loads, the better. Your visitors like this, and thus, the search engine likes it as well. By now, there are countless studies proving that visitors tend to leave websites with long loading times. A side that is left can not be very relevant, so it doesn’t deserve to be high up in the search results. At least, this is Google’s conclusion.

On the topic of performance, you’ll find a whole bunch of material on our site, like this article, for example.

And what about the content?

Content is king, right? Of course, that’s correct, and the topic of content marketing is definitely worth a couple of dedicated posts. The designer won’t really be the supplier of this content, which is why I excluded all SEO questions regarding the content topic.

Generally, though, the higher the quality of the content, the higher the ranking. Here, we would need to deal with unpleasant evolutions as the practice of SEO and their approach to content marketing is a different story. We’ll save that for another time.

Other Related Sources

Catégories: News dév web

Web Designers, Stop Wasting Time on Billing and Accounting When You Don’t Have Too - 20 mars, 2018 - 16:46

Advertise here via BSA

Keeping a small business running is hard work. You have projects to negotiate, emails to answer, and deadlines to meet. You have to find the time to explore new trends and methods. Sometimes, you have to take whatever time it takes to learn how to use new tools of your trade effectively.

When you add accounting to the mix, you may begin to feel as if your sanity is hanging in the balance.

Sending invoices and chasing down and collecting payments might not be easy. Also, tracking income and expenses and preparing tax returns all take time. This is where FreshBooks comes in.

1. What is FreshBooks and What Does It Do?

FreshBooks is a software accounting solution that makes billing a quick, painless process. You will have the time you save by being able to avoid having to handle billing manually. It can better be devoted to the work you enjoy doing.


FreshBooks is a creation of Mike McDerment. Mike is a web designer. He realized the billing process was time-consuming. Once he realized how much, be decided to do something about it. Mike also wanted to avoid mistakes, large or small, that could get him into trouble.

He set about building a simple software application that can solve this problem. His app that relieves freelancers and small business owners of these tedious tasks. The rest, as they say, is history. Today, over 10 million people are using FreshBooks. They are managing their invoicing, payments, and time tracking tasks.


2. You’ll Love the Benefits

Time Saved – You should save an average of 16 hours a month. That’s about a half day every week. FreshBooks organizes your invoices and saves you the trouble of emailing them. It also sends the reminders when necessary, to your clients – saving you the trouble.

You’ll Look More Professional. Clients prefer to receive well structured and professional invoices. As a result, they will assume that you go about your work in a disciplined, highly professional manner. It takes but a minimal effort on your part to make a genuinely positive impression.

You Get Award-Winning Service. Your clients will be impressed with the services you provide. But that’s not it! You’ll be impressed with the award-winning customer service you receive. FreshBooks is oh-so-easy to use. But should you have a question, the customer service staff stands ready to help – every step of the way.


What’s the Past Tense for Stressed Out?

Have you ever seen a stress bomb go off? It can be messy. Almost as soon as you start using FreshBooks, that huge stress bomb will simply evaporate. That happens when everything is organized and automated for you.
You’re Ready for Taxes

FreshBooks was designed with legal and ethical issues in mind. It wasn’t designed to help you avoid your responsibilities as a tax payer. It will be a tremendous help however by keeping track of every expense and every cent earned. You won’t make mistakes that could get you in trouble or cause you to pay more taxes than are required.

3. FreshBooks’ Top Features

Proposals. You don’t need extra software to help you create proposals for clients and. FreshBooks will do that for you. It takes care of the style and formatting. It also gives your proposal outline, scope, and deliverable timeline a professional look. In addition, it will reduce wasted time on your part.

Managing Expenses – All your expenses will be neatly organized and stored in a file. You can dispense with the envelopes and boxes you stored your expense information in. FreshBooks’ iOS app allows you to use your phone to take photos of receipts to add to your expense file.

Customizable Invoices. Avoid the extremes of submitting bland, carbon-copy invoices to clients. Choose a template, add your logo, and select your colors and fonts. Then, establish your payment terms and hit “Send”. It will take about 30 seconds to do so. Your invoices will be professional looking, and they will match your brand.
Credit Card Payments

More and more people prefer paying with a debit or credit card these days as opposed to writing checks. Why not accommodate them by allowing FreshBooks to handle those payments. It’s quick and easy, it saves you waiting time, and your clients will love it.


Time Tracking

You don’t need to invest in another software app for your time tracking needs either. Just let FreshBooks show you how much time a task takes. It will show the billing amount to place on the invoice, and give you an insight into your productivity.


Sales Tax Calculations

You could use a hand calculator, of course. Yet, FreshBooks calculates the sales taxes due on your invoices in a millisecond. Moreover, it never makes a mistake, and it keeps a record. Summary information can be produced with a click.

Project Management. FreshBooks’ new Project feature provides a file-sharing capability. It ensures that your conversations with clients and employees are kept in one place. and that your files and messages can easily be shared so your team is kept in the loop and up to date.


Why You Should Try FreshBooks Now

The best answer to that is simply to give it a try. You can do so for free. It takes but a few minutes to set everything up. You can adjust your invoices accordingly, and let FreshBooks do the rest.

It won’t take long for you to convince yourself that FreshBooks will save you a ton of time. You can delegate fiscal record organizing, sending invoices and payment reminders to Freshbooks. It will make your work life easier in more ways than one.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

10web: This WordPress Solution is a One Stop Shop - 20 mars, 2018 - 13:00

Wouldn’t it be nice if you could get all essential WordPress services besides the actual hosting from one provider? The rather new solution by 10web offers just that.

WordPress: Much Light, But Also a Lot of Shadow

WordPress is as popular as ever. More and more websites of the modern web are powered by the CMS from Automattic. Among the readers of our sister magazine Dr. Web, the system is wildly popular as well. With a share of almost 40 percent, WordPress is as popular with our readers as it is with the rest of the world. No other CMS gets close to these levels.

The CMS Usage of Our Readers. (Screenshot: Noupe)

Today, when freelancers or small companies decide on a solution to get their own web presence going, this solution will be WordPress in most cases. Let’s not lie to ourselves, one of the reasons for that is the fact that WordPress is a free system, and the fact that there’s a giant ecosystem of free expansions, aka plugins, and turnkey designs, aka themes, surrounding it.

This basically lets us set up a highly functional website without having to pay a cent aside from the required webspace we get from our host of choice. So much for the theory.

In practice, the sheer size of the ecosystem comes with an extra effort that can quickly take a toll on your money. There’s a reason why our most popular articles are the ones where we recommend specific plugins, themes, or other services, regarding backups, for instance.

It’s almost impossible to keep up with the supply even when putting in a moderate effort. On top of that, there’s the problem that there are close to no quality checks. Thus, everyone can add extensions to the repository, leaving the sorting and the evaluation to the interested user.

Separating the wheat from the chaff is a tough job which is not just about taking your time for the process. It also takes a minimum amount of expert knowledge to judge which solution is the best for the application case at hand.

As if that wasn’t hard enough by itself, it is often accompanied by the problem that some themes don’t want to cooperate with some plugins, or some plugins don’t want to cooperate with other plugins, shutting down your site in the process.

10web: The Digital Threshing Machine for Your WordPress

Now, if there were a service provider that made all of these decisions easier by only offering high-quality, synergizing extensions, you’d save a ton of money. Disregarding the fact that your nerves would be under a lot less pressure as well.

10web: Landing Page (Screenshot: Noupe)

Within the Automattic empire, there is a solution said to provide all-round happiness. It is called Jetpack, and it’s a paid SaaS (Software as a Service) which can be managed for multiple domains from your dashboard.

10web, the service provider I want to introduce you to in the following, is a direct competitor that covers a broader range. 10web supplies a variety of over 60 function extensions and professional themes. On top of that, you receive essential additional services that exceed the pure plugin.

Let’s take a brief look at the most critical services:


I know that; is what you’ll think, and you’re right. But, in contrast to, e.g. Yoast, 10web’s SEO service does not end where it comes to the optimization of the content based on keywords. With 10web, you can also track keywords and search engine positions, always telling you your content’s current rank in the competition.


10web runs a cloud backup solution and automatically saves your WordPress website. If you don’t want your data to be stored in 10web’s cloud on Amazon S3, you can also set your own storage accounts, like Dropbox or Google Drive. Aside from the database, all data is saved. The schedule of the backup is free for you to define. The recovery option is accessible via a click from the backend. Additionally, the backups are available for download in the zip format, for example.

10web: Excerpt from the plugin list. (Screenshot: Noupe)

Image Optimization

We’ve been preaching this in a mantra-like fashion. If you want to boost your site’s performance, start with the pictures. It’s almost scary what kind of heavyweights are uploaded by clueless page operators every day, stressing out the visitor browsers as a result. 10web automatically optimizes the uploaded files during the saving process, allowing you to influence how extreme it should be. Aside from the automatic optimizations, files can also be converted from one format to the next one. The service even optimizes PDF files.

Apart from the mentioned services, 10web is currently working on a security solution that is supposed to protect your website from external threats and security gaps.

The theme supply is very moderate as of right now. However, the six designs cover all primary application cases, allowing you to create portfolios, magazine offers, or the typical business website.

The plugin supply also satisfies all basic application cases. Especially the frequent demand for photo galleries, sliders and forms is adequately covered. On top of that, you’ll find extensions for the integration of different social media, any additional external services, like the newsletter provider MailChimp, or the statistics solution Google Analytics, as well as ones for the development of your eCommerce activities.

10web: Preview of the included Gallery-Theme. (Screenshot: Noupe) 10web and the Pricing Model

The charm of 10web lies in its turnkey concept. Some plugins can even be found and used as free versions out of the WordPress index. The premium variants found in the 10web flat rate offer are much more feature-rich, however.

You choose from three different performance levels. You either go for monthly or the – cheaper – annual payments. You always have access to all features. The main differences are capacity-related.

The basic tariff for 12 USD a month lets you integrate three domains, optimize 20,000 images a month, and provides you with cloud storage for your backups with a size of 10GB. The standard tariff for 30 USD a month increases these parameters to 10 domains, 80,000 images, and 40GB storage. The premium tariff for a monthly 80 USD provides the offer for 50 domains. The optimizer will take in 250,000 pictures a month, and the backup service has storage of 140GB.

The cancellation procedure is fair. You can cancel the subscription at any point at the end of the period you already paid for. Of course, when choosing annual payment, that’s the end of the year, but you can also go for monthly payment, giving you a cancellation window every month. One peculiarity when comparing it to other providers is the fact that you’re allowed to use all plugins and themes even after your membership ends. You just don’t receive any further updates.

Conclusion: Get it or Not?

What am I supposed to do with three domains, is a question some private users may ask themselves. Whatever is my response. Just take the service and use it for one domain. 12 USD is no investment level amount. 20,000 images and 10GB storage will also be sufficient if you choose not to enter your own storage provider as it is.

I can’t really judge how many application cases for the more extensive offers really exist. When users administer between 10 and 50 domains, usually, there’s an established expert knowledge and standardized solutions. They probably didn’t wait for 10web.

What’s interesting, is the fact that, apart from the mentioned advantages, the entire management of the functionality for all domains can be taken care off from a single dashboard. This is reminiscent of a conning bridge. My regards to Captain Kirk.

The best choice would be to go and take a look at 10web for yourself. Create an account and test it for 14 days. That’s when you need to make a decision for (or against) a plan. A small downer is the fact that you need to enter credit card details at the beginning of the test stage already. Although I can understand that there are reasons for the provider to do this, there’s enough proof from others that it is not a necessity.

Whatever, head over to 10web and check it out.

Catégories: News dév web

Icon Design: 5 Essential Tips to Get You Started - 19 mars, 2018 - 08:30

Just scribble down an icon real quick. What’s so hard about that? Well, it’s definitely not easy. We’ll show you what you need to look out for when starting with icon design.

Why do Icons Exist?

Let’s start with a few basics. When speaking of icons, we don’t mean the small hand-drawn wooden images with Christian motives that were famous centuries ago in Eastern European Christianity. Instead, we’re talking about the small symbols representing objects or functions on a screen.

The latter debuted on the Xerox Star 8010 in 1981. If you look into the Xerox of the sixties and seventies, you’ll be surprised which innovations the company and its Palo Alto Research Center are responsible for. The computer mouse is one of them. Basically, the entire concept of the so-called Personal Computer was created by Xerox.

Xerox Star and the Visual User Interface With the Desktop Metaphor. (Image: Digibarn)

The invention of icons is a part of the so-called desktop metaphor (also known as office metaphor), which was used to display the typical digital desktop. And what happens when you’re supposed to display an entire desktop on screens that used to be about 12 inches at most? Right. You don’t have a lot of space.

Accordingly, icons were designed as small pictograms trying to communicate which object or function they represent from the very beginning. Today, we still need to deal with this task and all of its difficulties. However, we have the advantage of being able to create icons as vector graphics, meaning we’re no longer limited to pixels. This allows for a much more complex display of what we want to convey.

Nonetheless, most issues that have to be dealt with during icon design have not changed. The following tips should help you if you want or have to create pictograms.

Tip #1: Icons Have to be Clear and Easy to Understand

Let’s start with the most crucial piece of advice. An icon is only useful when potential users can immediately tell what it is supposed to represent. If the icon is too artistic or too abstract, that won’t work. There goes the utility.

Skeuomorphism and high resolutions allow for the perfect representation of reality. That alone doesn’t make an ideal design, though. (Dribbble: Eddie Lobanovskiy )

Thus, it is important not to try to be innovative; and definitely not disruptive. The best symbol is one the user is familiar with, and already associated with the object or functions it is meant to represent. This thought leads us to skeuomorphism which we thought we had left behind with the flat design trend. With the Material Design approach, Google united both worlds, allowing an icon in material design to look both flat and realistic at the same time.

If you don’t want to live with the reminiscences of past times, or even hate skeuomorphism, I recommend reconsidering your standpoint. If that doesn’t help, you can still take some associative measures, and orientate your icons towards popular function language. An example for this would be the lying triangle as an established metaphor for “play.”

Skeuomorphism in a modest form. (Dribbble: Creative Mints)

Future-oriented icon design should avoid metaphors that were established once, but are unlikely to remain established in the near future. I hope you wouldn’t think of using a 3.5” floppy disk as an icon as it is. There are a few examples like that; a CD symbol, for instance.

Tip #2: Don’t Just Start Drawing, Research is Key

If you want to draw icons for a client or a particular purpose, take your time for some proper research. Which image language has already been established in the area you’re going for? Which function metaphors come to mind?

Of course, you should also take a look at both free and commercial providers of icon sets. We don’t need to reinvent the wheel. Additionally, the designers of services like icons8 have already gone through the same troubles that you’re dealing with. If you happen to find the perfect solution there, take it. You are not forced to create something that exists already.

When designing for a customer, it could make sense to integrate a part of his brand or logo into the design. If your client uses a star in the logo, you could consider that star as a part of each icon design. Just look at what fits with the current case. This makes it easy to add a personal touch to the design while protecting your symbols from being called arbitrary.

If you can’t find a brand component, a shared topic can do the trick as well. With a client from the oil industry, a drop of oil could be a good choice for a consistent theme. Here, you’ll need to think outside the box now and then.

In this context, looking at cultural characteristics is essential. Some symbols that we consider a success could have a very different effect somewhere else. An example would be the owl, which is a part of the brand of the social media helper Hootsuite. In western cultures, the owl is associated with wisdom, while eastern cultures associate it with stupidity. Hmm.

From the very beginning, you have to be aware of the fact that, even with a small icon family, you won’t be able to realize the best association at all times. This will result in a melange. One icon is a cognitive blockbuster; the other takes a bit of thinking. When in doubt, just design in a way that maintains consistency across the entire icon family.

Tip #3: Less is More – Don’t Overload Your Icons

We’re not competing for the most complex display on the tiniest bit of room. What matters is the comprehensibility and not the most detailed display of the symbol. After all, your icon is just a means to an end. If you can achieve its purpose with the combination of two simple shapes, this is not a downside, but an advantage.

I think it’s safe to say that nobody would be able to classify these so-called icons at a glance. (Dribbble: Fireart Studio)

Let me quote Einstein, who recommended to make things as easy as possible, but not any easier. The previously mentioned two shapes to form your icon are completely fine if they make your icon unambiguously clear. Unfortunately, an icon of that simplicity often leaves room for different interpretations. Add complexity to your design until you have guaranteed an unambiguous interpretation of the symbol.

You should also make it a habit of yours to keep icons usable at small sizes, even if you only need it in 512 x 512 pixels for the specific commission. You could adjust the complexity of the pictograms to the screen size, though. Your 512 x 512 version could be more detailed than the 64 x 64 symbol. In any case, you shouldn’t take it too far as you still want people to know that both versions belong to the same icon family.

Tip #4: Choose One Style and Stick With It

I’m not a fan of drawers. Thus, I’ll avoid writing a seemingly conclusive list of all current icon design styles. I also don’t think that the categorization of design services helps the community in any way.

Of course, there are always multiple ways to visualize the same topic, as shown by this excerpt from the symbol collection of icons8. I was looking for any camera icon. (Screenshot: Noupe)

What I’d recommend is very simple. If you want to draw your icons in a sketchy style, do it, but stick to this style throughout the entire set. If you choose one, two, or three colors, use them consistently. If you make use of perspective, lighting, or shadows, always use the same perspective, make the light come from the same direction, and put the shadow in the same spot.

You may think this is logical. However, in a new project, I just saw an icon looking completely different from the others in an overview of six symbols.

Why did the designer do that? Because he thought this icon was especially fitting for the case at hand. And he was convinced that it was better to use this singular icon that he considered being optimal, even if it doesn’t fit with the other symbols.

I was with the client, so I was able to turn down his draft and create an icon in collaboration with him, which harmonized with the others while being an actual compromise at the same time. But, that’s okay, because it had to be.

Tip #5: Be Pixel Perfect, and Forgo Text

Well, this tip basically consists of two independent recommendations. In my opinion, both of them belong in a beginner’s guide, though.

Text is very common in lousy icon sets. Why’s that? It’s simple. Somebody didn’t try to find a good metaphor. You might know this from playing Pictionary with a few friends. Normally, the term the others need to guess is meant to be visualized by drawing. The temptation of using text when lacking good ideas to draw the word at hand is always there. However, it is a fact that your icon simply is not right if you can’t forgo the use of text.

Icons are always – not sometimes or most of the time – created on a pixel-precise grid. Here, the grid for each icon of the set should be dimensioned identically. However, this doesn’t mean that you have to draw all icons consuming all of this grid. Instead, there’s no problem in having some portrait mode, some horizontal, diagonal, or even round icons, leaving space of the grid unused.

The grid remains square nonetheless. The ledger of the design is the visual center of your pictogram. The visual center does not need to match the graphically and mathematically determined center of the object, though. Here, it comes down to visual perception.

To be prepared for different shapes, always leave free pixels in the outer parts of the grid. No icon should touch the borders, even if it is a square pictogram that could do that with without any issues.

Lines and shapes always include whole pixels to avoid blurs which otherwise easily occur when scaling the icon.

Conclusion: Do it Like Abraham Lincoln

“If I had eight hours to chop down a tree, I would spend six of those hours sharpening the ax.” This quote is said to originate from the former US president, and it surely also applies to icon design.

Research, planning, and preparation are important. Drawing the pictogram is just the final part of the act. It’s like igniting a campfire that took hours of collecting and stacking wood. Come on, let’s go to the forest!

Other Related Sources:

Catégories: News dév web

Lorem Ipsum 2018: Dummy Text is Very Much Alive - 16 mars, 2018 - 11:00

Just yesterday, I got my hands on a design suggestion with text passages that were filled with dummy text from the ipsum spectrum. Lorem ipsum is still alive.

The most interesting dummy text generator I was able to find on the web is However, this is not just because the generator sticks to the supposed original.

About 14 years ago, our inventor Sven Lennartz wrote this article (in German) with the very descriptive title “Lorem Ipsum: The Blind Text”. The things that were said about the shorter or longer passages with nonsensical word conglomerates still apply today.

Lorem Ipsum: Cicero Would be Turning in His Grave

This is not really surprising, as the foundation for the popular text snippets was created in 45 BC. The usage of text snippets as dummy text has been documented for hundreds of years. The Cicero text “De Finibus Bonorum et Malorum” is said to be at the basis of the current word placeholders.

In English, the Cicero text is called “On the Extremes of Good and Evil”. If you want to, you can find a connection between that text and its realization. However, we’re not here to make any philosophical contemplations.

Either way, it’s a fact that lorem ipsum and the Cicero text share a lot of similarities, even though lorem ipsum has become more of an undefinable melange with a bit of Latin in it, rather than just bad Latin. This development can probably be blamed on the evolving needs of the character set. With the more original Latin version, modern print images couldn’t be imitated so flexible.

Right After the War, We Had Nothing

Lorem ipsum really took off in the sixties of the past century, when text components were used on Letraset sheets. Letraset was a popular system until the 1980s, which worked with sticky letters on transparent sheets. Letraset still exists today, and you can still buy the sticky sheets, but their popularity is more on the homeopathic side of things.

The Letraset sheet is on the left of this image. (Photo: Paul Henning, Public Domain)

Using sticky sheets was so popular that the providers of DTP software integrated lorem ipsum into their programs, in order to make placeholder texts available in digital layouts without any issues. At that point, Letraset also offered DTP software. Later, a lorem ipsum detection was added, which allowed users to see if dummy text was forgotten somewhere in the final product, before creating the setting copy.

Lorem Ipsum Has Tangible Advantages

Lorem ipsum is still suitable for usage in digital designs, as the undefinable gibberish has kept one significant advantage. It is undefinable gibberish.

Thus, it doesn’t attract any attention. Nobody tries to read or correct it like people tend to do in design drafts. Lorem ipsum takes up space and shows what the real text would look like in this spot.

Ten years ago, and even earlier, very cheeky SEO “experts” liked to use lorem ipsum white on white in the background of websites, filling the normally pointless text with keywords for which they tried to rank at Google. The Californians figured that out fast. Today, you won’t find it used that way anymore.

In the beginning, I already mentioned that, currently, the generator found under is the most convincing one to me. But why, as there are billions of other services, is what you might ask yourself.

The answer is simple. For one, is a straightforward and fast dummy text generator which also works on mobile. You simply define how many words, sentences, or paragraphs you want to receive, and click “Generate”. Then, click on “Copy”, and send the generated placeholder text to the clipboard.

We All Need a Bit of Fun in Our Lives

Secondly, another reason why is so interesting to me is the fact that the developers put in the effort to create a list with over 40 dummy text generators, found under the menu item “Generators”. There are some real bangers among them.

Trump Ipsum with its concise and typical orange syntax is my personal favorite:

However, I really enjoy Hipster Ipsum as well:

Of course, you’re right to point out that all derivatives, especially the two I just mentioned, give up the main advantage of Lorem Ipsum of it being undefinable gibberish. Well, you could actually argue about that when it comes to Trump Ipsum. After all, he often gives us the impression that his statements were generally lacking meaningfulness, but with Hipster Ipsum, and especially Samuel L. Ipsum, this objection is completely legitimate. And I cannot argue against that.

It’s fun either way. So, if you want funny dummy texts, I gave you a list of 44 services. If you need a serious lorem ipsum, you’ll find it in the same place. You can’t ask for much more than that, can you?

Catégories: News dév web

Forgiveness: Your Design Has to Handle Mistakes… - 15 mars, 2018 - 13:00

Humans make mistakes, a lot of mistakes. Thus, designs of all kinds have to expect mistakes and react with forgiveness.

No matter how hard you try, you won’t always be able to prevent people from making mistakes when using your designs. Let me prove this with an example.

There’s No Cure for Stupidity?

A while ago, an older local lady tossed a five-figure (according to her) amount of money into a charity bin. She said she had inherited the money and had hidden it in a shoe. To top it off, she only noticed her mistake a week after she threw the shoe into the container.

Is this an example of a mistake that only the affected person could have prevented? Either way, it is clear that the standard design approach won’t let you get around these stupid mishaps. Would a sign at the container have helped? “Please make sure not to throw money into the charity bin”?

Or should these bins basically work via double-opt-in? “You want to throw something into the container? Are you sure?” On the first attempt, the items are pushed back out of the container. They’re only kept in on the second try. Hard to mimic, and surely difficult to advocate for acceptance aspects.

Forgiving Design Even Works For Absurd Mistakes

Nonetheless, even here, we can still prepare our design for human mistakes. A forgiving design, which is what this article is about, could have been accomplished with the following sign: “If you have accidentally thrown something into the charity bin, please call us within two work days under the phone number 123456.”

This probably wouldn’t have helped the lady from our example either. After all, she only noticed her mistake a couple of days later, but, in general, this kind of message could definitely be successful.

Naturally, the processes behind the message need to be installed. It wouldn’t help if the lady called the number, just for someone to tell her that nothing could be done about it. And, where did she even get that number from in the first place?

Forgiving Design is a Mix of Guidance and Safety Web

As you can see: forgiving design is a mix of good guidance in advance, and sensible safety webs being there if need be.

Imagine yourself driving in your car towards a sharp bend. How could we protect you from making mistakes? Here, it would make sense to lower the speed limit, and notifying the driver that there’s a sharp curve ahead – early and multiple times. Within the curve, there should be solid crash barriers as a safety web in case the previous guidance failed.

The crash barrier is a perfect example of a forgiving design element. (Photo: Pixabay)

Some mistakes are so grave that we talk about human failure. Remembering two trains crashing in Bad Aibling, Bavaria two years ago.

The underlying process was obviously suffering from grave design errors. Neither a sufficient inherent control function nor sensible safety nets were provided for the case of emergency.

This example is just meant to clarify which enormous significance careful design has, and why it should definitely be forgiving. For forgiving design, there are a few tips, and while they may seem a bit retro, they never lose focus on the human.

Tip #1 | Affordance: Design With a Prompting Touch

The best practice for forgiving design is considered working with a clear affordance. The most common example for this is a door with a handle on one side, and a mere metal plate on the other. This way, the door prompts the user to pull on one side and to push on the other.

The design itself has a touch of affordance. Additional interpretations or instructions are redundant in this case, though this case is not always this simple to create.

You can also take affordance too far. (Image: Pixabay)

The days of design with affordance being rather simple are over, though. Those were the days of skeuomorphism, where app designers tried to make digital products look as similar to their real-world counterparts as possible. As a result, we had calendar apps with a leather look and ring binding, or switches that actually looked like switches, and worked like them. From the perspective of affordance, those were the golden days.

The flat design brought a much more abstract way of design into our lives. At least, nothing here can be derived directly from our everyday life. However, the modern human has gotten so used to digital media that the new elements (also known as microinteractions) are easy for him to get used to. Just recently, I wrote this article describing why microinteractions are becoming increasingly more important.

When your design is that confusing to the user, you should go back to the drawing board. (Illustration: Pixabay)

In order to not make things harder than they have to be, designers should use established UI patterns. Examples for that could be Google’s Material-Design-Guidelines, or patterns from Zurb or Bootstrap. Additionally, it is also true that modern UI elements are more like to be recognized the more they resemble everyday objects with the same function. Here, shadows, gradients, textures, and anything else that could help users relate can be useful.

In order to increase the affordance character, you should give clear names to actions, and not leave the guessing to the user. It is very important that your actions don’t collide with the standard behavior of the operating system. The iPhone’s swipe gestures are a very common sandtrap.

Tip #2 | Allow Users to Revert Accidental Actions

You know this from the Office applications, as well as Photoshop. How often have you removed accidental Photoshop steps? This special form of forgiving design is the best safety web you could integrate. If nothing is final, the user will have an easy time getting used to your control concept.

Unsolved problem: getting the toothpaste back into the tube. (Photo: Pixabay)

Of course, not all actions can be absolutely reversible. Where that is not possible, forgiving design should be considered from a guidance perspective. If the user has to make an irreversible decision, slow down the interaction by breaking it down to two steps, and making the user confirm it with a “Do you really want to do this? This action can not be reverted.”.

Here, it is important to give a clear label to the action, leaving no room for doubt regarding the effect of the decision.

Tip #3 | Make Use of Help, Warnings, and Input Prompts

You know this from forms. A mandatory field was left out. The JavaScript tells the user that the field X needs to be filled before the form can be sent out. This warning helps the user to succeed in the end. The mistake has been made. The design forgives and guides the user in the right direction.

You should offer help for anything that could be even slightly complicated or irreversible. They should explain what can be accomplished, and how to do so. However, they should not be needed to explain the meaning of the labels on the buttons.

Forgiving design is easily drowned out among the other aspects of today’s design. (Illustration: Pixabay)

Input prompts are a perfect choice to be used as a decelerator.As mentioned above, it makes sense to slow down the interaction when it comes to irreversible decisions. This raises the user’s awareness levels. The chances of the fast default-okay are reduced.

Conclusion: Forgiving Design is Not as Hard as You May Have Thought

Users of your design not making any mistakes is a utopic fantasy. Even if you think you have created a very simple process with no room for error, your users will definitely prove you wrong in no time.

Thus, it is important to expect mistakes from the very beginning, and, if they’re predictable, to prepare the design for them. You’ve learned the most important tips today. Make sure to identify and prevent as many possible mistakes as possible during the design process. Software developers are experts in that department.

Maybe, you could link up with someone from that branch and discuss mistakes and how to avoid them. This will also help you as a web or product designer.

Other Sources

Catégories: News dév web

These 5 UX Mistakes Drive Visitors Away in Less Than 5 Seconds - 14 mars, 2018 - 14:49

Advertise here via BSA

The longer you can keep a visitor tuned into your website the better. But the time needed to fully engage a visitor is quite short.

If your website UX isn’t up to snuff, you’ll be fortunate if a visitor sticks around more than 5 seconds. That isn’t much time to sell a product or service, or even get your message across.

You might have the skills and tools to create a UX you can be proud of. Yet, your efforts can come to naught if you make any of the 5 mistakes described in this article.

Avoid them at all costs.

For Continued Success in 2018, Avoid These 5 UX Mistakes Like the Plague

UX Mistake #1 – Practicing Diversity in Your Online Presence Rather than Consistency

Do not show your visitors all the different styles you can use when you design web pages. Web users prefer consistency. They like to know that page 4 belongs to the same website as does page 1.

Stick to the same color scheme throughout your web, mobile, social media presence. The same applies to fonts. Keep the number and sizes of fonts to 2 or less and 4 or less, respectively; as shown in this BeDecor example.

You should also avoid using unnecessary or superfluous font weights. They contribute little if anything and can slow page loading down. As illustrated in BeYoga2, readability is best when the line height is the same. The good use of white space is also important.

UX Mistake #2 – Giving Speed a Higher Priority than UX

Your typical user generally has a quite short attention span. That’s one reason to avoid slow loading pages. But, it’s more important for a site to feature a UX that attracts and engages visitors and keeps them engaged. BeCompany is an excellent example of such a website.

Speed won’t help much either if a website is cluttered. This tends to distract a visitor or make the experience downright unpleasant. You might be uncertain as for how best to balance speed with UX. In this case, start your project with a pre-built website like BeBirthday. It’s already optimized for speed and UX, so you won’t have to worry about the issue.

UX Mistake #3 – Not Paying Heed to Industry Standards

Industry standards currently encourage customization. This is not to be confused with diversification; a poor design approach.

Customization is based on the need to satisfy customer expectations. You can insist on using a universal design approach rather than focusing on user needs. Then, you do so at your own peril.

It’s important to research the niche or business you are working with up front. The BeApp3 pre-build website provides an example of UX best practices. They are the top in terms of customization for a given niche or business.

Is your business or client’s business happens to be a law firm? Then, sticking with the BeApp3 design structure simply won’t work. A visitor, not knowing quite what to expect, would probably exit the site rather quickly. BeLawyer offers the perfect design approach in this case.

UX Mistake #4 Improperly Prioritizing Elements

The Laboratory for Information Technology Evaluation recently released a study. The research revealed some interesting and important facts about website user behavior.

Once a user brings up a website, he or she will spend an average of 2.6 seconds staring at what is presented. This is before moving on to a specific area or section. Also, he or she will spend about 180 milliseconds before moving on to the next area.

The logo, the navigation menu, and the search box received the most attention. They are followed by social media links, the main image, and the written content. The content at the bottom of the page came the last.

Getting the priorities right is important in keeping a user engaged. BePersonalTrainer and BeBistro show how proper prioritization will work for you.

Make it a point to always research user goals and expectations when you first get a project underway. Only then can you get a good grasp on how to prioritize and present design elements to satisfy their needs.

UX Mistake #5 – Working Toward Multiple Goals

Working to satisfy multiple goals is seldom a good approach to getting an optimum result. Your single goal should be to lead a visitor toward their desired outcome. It also typically coincides with yours. If you present a visitor with multiple paths to follow, you only complicate his or her journey. Take a look at BeSnowpark and BeEBook pre-built websites. They are examples designed to keep you on the path of pursuing a single goal.

You need to:

  • Build your design around an understanding of the user’s goal
  • Choose a navigation pattern that best guides the user toward that goal
  • Create a smooth, linear, step by step process for the user to follow
  • Avoid creating distractions as the user proceeds along his or her path
  • Make sure the CTA element stands out—contrasting colors work best


Be Theme’s the Solution

Writing the 5 mistakes on sticky notes and pasting them on your monitor is one possible approach. However, Be Theme has a better one.

It’s in your best interest to keep these recommendations in mind. But each of Be Theme’s 310 and counting pre-built websites has already taken them into account. You won’t need to worry about keeping up with the latest design trends and best practices.

It does not matter which industry or niche is in question. These pre-built website designs align with user expectations and favored navigation patterns.

BeWebDeveloper is a good example.


  • Your goal should be consistency; not diversification
  • In terms of priority, UX is more important than speed
  • Understand user expectations and their preferred navigation patterns before starting your design
  • Prioritize design elements in accordance with user viewing habits
  • Establish a SINGLE goal, and design around it
  • Use pre-built websites. They make UX design easy.

These UX rules and standards apply to websites of all types and for all niches.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Never Forget These 5 Principles of Design Psychology - 14 mars, 2018 - 14:00

Never underestimate psychology. After all, it explains pretty much all our actions.Take the following principles of design psychology to your heart.

Psychology for Designers: An Aspect That Mustn’t be Disregarded

Joe Leech, better known as Mr. Joe, should be one of the most popular evangelists of the “psychology for designers.” Leech’s customers include Disney, eBay, the Museum of Modern Arts, and the Marriott group. A few years ago, he wrote the much-noticed book “Psychology for Designers,” which he’s working on ever since. Additionally, he travels the world, hosting workshops on the topic. Leech has a clear opinion.

For Leech, a designer without a clue about the human mind resembles an architect without a clue about building physics and droop. The buildings of the latter are at high risk of collapsing, the former’s websites are at high risk of failure. According to Leech, psychology should not be viewed separately from design, as it is an essential component. Without basic knowledge of psychology, significant success in design would be impossible.

However, Leech is very down to earth and doesn’t turn the topic into rocket science. Instead, he tries to communicate the required knowledge simply and straightforwardly. Basically, as designers, all we need to know is that the human brain tends to be lazy, and prefers to work within established processes. When it comes to processing information, it will first try to take in this information in a way that it’s used to. This saves energy and helps to keep the feeling of being in control.

As a designer, this teaches us several things, like not creating innovative new processes for established tasks.

Humans are not comfortable with the feeling of losing control. (Photo: Pixabay)

The psychological approach goes much further, though. Take another look at our article on microinteractions. In there, I have proven that today, microinteractions are a vital factor when it comes to setting your website or app apart from similar ones. These microinteractions are almost exclusively about psychology.

If an app or website can be consumed comfortably, this matches the expectations of the human mind more than being confronted with a clunky, unexpected “innovation.” In this day and age, where basic functionality is provided almost everywhere, such details are what makes the difference.

On his website “Psychology for Designers,” which Leech runs in addition to his book, he collects details and information on the topic, which designers can use to dig as deep into the topic as they want to. Here, he also covers topics like the psychology of pricing, or the effects of specific images.

In the sources for further content at the bottom of this article, you’ll find enough material to dive deep into the topic of “design psychology” for hours. As not all of us have that much time, I will present guidelines based on some established principles of design psychology in the following. Consider it essential information for a good start into psychologically profound web design.

Principle #1: Don’t Invent New Approaches to Established Processes

Our brain loves treading on familiar paths. Now, if unleashed on a website, it looks for familiar patterns to help with orientation. If you’re a very innovative designer who created utterly new usage patterns for the site, the visitor’s brain won’t be thankful. Thus: don’t do it.

Not everything that’s possible makes sense… (Cartoon: Noupe) Principle #2: Don’t Create Drastic Redesigns of Established Pages

Take a look at Google: You can still recognize reminiscences of the service’s old design of the nineties. Every redesign over the past years has been subtle and modest. Especially with such high-traffic sites, it is essential to look at the psychological aspect strategically.

Generally, everyone hates changes that don’t come with a significant improvement. Improvement is only accepted as such if there was a flaw before. Thus, the definition of the term “improvement” is in the eye of the visitor, not in the eye of the designer.

Designers, on the other hand, like to think of their redesigns as improvements, forgetting the old saying: “If it ain’t broken, don’t fix it.” And no, just because a website doesn’t follow the hot brand-new trend, that doesn’t mean it’s broken.

Principle #3: Use the Positive Effect of High-Quality Typography

A study by Microsoftie Kevin Larson and the MIT staffer Rosalind Picard was able to prove that there’s a significant connection between a site’s typography and the mood of its readers. This realization was quite surprising to the scientists, as, previously, similar effects were only known from funny videos or small rewards. (Study as a PDF Download)

In addition to the improved mood, it was also proven that readers read longer on pages with high-quality typography, while also being able to process the information better. So, if you want to use typography psychologically, use a high-quality font without major traits and set a slightly bigger font size. And read our article on the topic.

Principle #4: Use Rewards Strategically, or Not at All

Previously, small rewards increasing the engagement of potential users was an undisputed assumption. For instance, the free trial month is almost a staple in several different offers. However, there are cases where this approach may backfire.

When you’re having fun, you don’t need any additional motivation (Photo: Pixabay)

Before working with rewards, you should identify what your user’s primary motivation is. Why would your users want to use your website or app?

Does your visitor’s primary motivation come from the inside? If they use your product for fun, to lose weight, or to communicate, rewards may not affect at all or even negatively affect the involvement.

This result is supported by this study, which isn’t even brand new but may still explain several failures of the past years. The fundamental message is the fact that rewards undermine the intrinsic motivation system, levering it out in the process.

Principle #5: Work With Human Weaknesses Proactively

Humans make mistakes, and the human brain is not very reliable. These two problems have to be approached actively in your designs. It is essential to know all possible mistakes a potential visitor could make, in order to support them. Science has shown two things.

Mistakes alone are frustrating enough to result in users quitting the usage. This is accelerated by the fact that humans tend to blame themselves for failure. And this is where a fight-or-flight reaction kicks in, regarding your website, in this case.

Another factor that most of you have heard before is a result of the statement: “I don’t know anything about computers.” Often, people even take pride in this, as if the documented inability was setting them apart from others in a positive way. This form of learned helplessness is hard to fight, but important to know. After all, the designer is a human himself.

Supporting systems can be useful, although they shouldn’t be obnoxious. Modern apps often do an excellent job at that by providing support that is often labeled as a “tour” through the app. In fact, they are just guides that don’t feel like one. Reading the manual is still considered a sign of cowardice by many.

Conclusion: Make Things as Easy as Possible, But Not Easier

“What’s next, Einstein?”, is what you might think. In reality, this is the best advice you can give designers. Summarizing all mentioned principles under the keyword “user comfort.” Make the usage of your website as comfortable as possible. While doing so, look into the above-mentioned principles now and then.

More Information on the Topic:

Catégories: News dév web

What Are Progressive Web Apps and Why Should You Care? - 13 mars, 2018 - 15:00

It’s spring of 2018. This is the year where progressive web apps are expected to finally establish themselves. If you have yet to look into the topic, it’s about time you do so. We’ll help you with that.

The Increasing Mobile Web Usage Threatens the Open Standards

We can’t deny it. We notice it looking at ourselves and others. Usage of the web is shifting more and more towards mobile devices. Here, native apps, which mainly draw their content from the web and display it within the app, are dominant. During this process, the apps have full control over the appearance of the content. The actual provider of the information has lost most of his influence.

Barbed wire only stings when we run out of room to move. (Photo: Pixabay)

In the long run, this results in the danger of apps with a certain range forgoing the web as a content provider altogether. Facebook is a common potential example for this. If the user should ever shift towards mobile platforms so heavily that web-based access seems redundant, Zuckerberg could decide to only work with apps and direct database connections. An already heavily private society would isolate itself from open standards even more. The web as we know it would be over.

Snapchat is an application that is exclusively available as an app already, and it has no intersection points with the outside. Instagram’s web access is very rudimentary as well. The app is the only way to participate in all the fun.

Of course, from the perspective of the operators, this kind of situation is quite desirable. After all, the time spent on their offer remains the same or even rises. Bounce rates, search engine optimization, and other problems that operators have to deal with when competing with other providers that are just one click away are all irrelevant.

For designers, consumers, and all page operators that don’t have the range of Facebook or Snapchat, the development is just as dangerous as it is for the other web giant called Google. The latter is good for all of us, as Google can stop the trend by actively promoting open standards. Without the blue rival, Google might be inclined to set up a comfortable garden with a neat wall around it itself.

This is a good example of competition breathing life into the business. Facebook doesn’t need an open web, as everything takes place on the inside of the service. Google lives and dies with its ads business on the open web. No other business field brings profits. Because of that, Google can never risk letting the open web close.

Against the Native Web: Web Apps Stand for the Open Web

At the lowest level of a possible consensus, the web is considered everything with a linkable URL that can be accessed via that. With the strengthening of the mobile platforms, the design trend moves to mobility in design. During the process, the characteristics of a smartphone are considered in many different ways.

Today, the so-called responsive design is the way of choice. This approach makes sure that a website is displayed depending on the restrictions of the device it is displayed on, without losing much of its functionality. If we’re honest, this responsive design approach is a mere compromise in a majority of cases.

PWAs are based on open web standards. Currently, React and Angular are popular choices for development. (Illustration: Pixabay)

In comparison to native apps, mobile apps were unable to keep up in terms of functionality for the longest time. While it was possible to get a well-adjusted appearance onto the mobile screen, native apps are inevitable when it comes to access-to-device features like the camera or certain sensors.

Of course, the problems didn’t start there. The behavior under poor internet conditions or complete connection failures leads to the web app being unusable.

Progressive web apps begin right there.

Progressive Web Apps Are the Best of Both Worlds

Under the impression of the realization that Google also has to value the conservation of the open web, it seems logical that the Californians put a lot of work into the enforcement of the concept of progressive web apps. We should welcome this financially strong support. This should keep Facebook and Co’s isolation tendencies at bay for a long time.

The progressive web app is a concept that connects and unites the strengths of both worlds; being the native development for mobile devices, and the development based on open web standards.

A progressive web app is an improved version of already existing mobile websites. In this sense, improved means that it has features and abilities that were previously only known in native development. This new generation of web apps provides many of the abilities of today’s mobile apps, making these native apps redundant to some extent.

Well, this is what you might say: If the new generation of web apps only provides abilities of existing native apps, why should we be using them? There are various answers to this question.

For one, I already pointed out that turning away from the open web, and happily joining the walled gardens would have negative consequences for all of us. Do you remember AOL and Compuserve? We surely don’t want to go back there. Looking at it this way, it is almost a question of honor or at least one of the philosophy you’re willing to support.

On the other hand, a web app has its very own advantages. A web app is found via Google search, and can be accessed and used. It is not required to localize it in one of the app stores, and install it from there. Web apps don’t need to go through the app store process for each update, and then be reinstalled as an extensive update.

Progressive web apps unite the advantages of native apps regarding the interface usage, the local data storage, the option to display notifications, and a few more details, with the uncomplicated, fast availability of web-based offers, as well as their immediate currentness that doesn’t require any update processes.

The Difference Between a Web App and a Progressive Web App

The smallest version of a web app is the optimized web view on the small screen of a mobile device. Basically, it is nothing more than a website meant to be consumed on a mobile device, while more or less looking like an app. Orientating oneself by the looks of apps is definitely recommended, remembering Steve Krug’s classic “Don’t make me think”.

Apps Have a Tight Grip on Our Everyday Life. (Illustration: Pixabay) The Components of a Progressive Web App

The progressive web app takes this a few steps further. It is designed to make as many device and browser-specific features available as possible and does that progressively.

Application Shell

This means that, at the core, the app shows a mobile view of a URL, and then reacts to the abilities of the accessing device and browser. This makes sure that a progressive web app generally works on every device and browser, though to varying extents, progressively adjusted to the given environment.

Visually, the progressive web app resembles the design standards of native apps. Ideally, the user can not tell the difference regarding the look and feel. The so-called app shell is created in a way that it places itself in the device cache upon the first access, allowing it to be accessed from there without any delays.

Service Workers

The service workers are the heart of progressive web apps, as they are what allows for the advanced functions in the first place. A service worker – briefly said – is a JavaScript able to work in the background of a web application. This even works when the website is not opened.

One of the most obvious tasks for a service worker is the caching of content in the background. This can be because fresh content should be available without loading breaks, or because a web app has to work even if there is no internet connection.

But, sticking to the example, a service worker does not only let you save content but also distinguish between cases, allowing it to start program-logical processes that lead to different results when given different dependancies. This makes the reaction options of your app very flexible.

As service workers don’t have an appearance, it makes sense to get yourself a selection of script snippets that cover several essential functions. These “recipes” can be found in Mozilla’s Service Worker Cookbook, or in the Awesome List Awesome Service Workers, for example.

The first application case you definitely want to cover is the display of a sensible offer in case of a missing internet connection, rather than displaying the generic “you are offline” error page. Depending on the application, it may even be possible to not notify the user at all, as long as the connection is not mandatory for the proper usage of the app.

Service workers require HTTPS, making the entire application safer.

Web App Manifest

To make the user experience even more similar to the one of a native app, it is recommended to offer your progressive web app for installation. To do so, deposit a JSON-file, the so-called web app manifest.

This allows users to install your app on their device. The process does not just create a shortcut as it did before. Instead, the manifest first displays an installation banner for the visitor. You already knew this banner, but previously, it was only used to install a native app.

Excerpt from the example manifest on MDN. (Screenshot: Noupe)

In addition to that, you are also able to define that the app is to be opened in standalone mode, without displaying the browser around the app. An icon is easy to assign as well. With an accordingly configured service worker, you can store the app shell on the device.

The PWAa can also be found in the overview of active applications (task manager) of the mobile OS as individual applications, instead of being displayed as one browser instance.

Push Notifications

The Push API lets you send notifications to the displays of your users, even if they are not using the app right now. This makes it possible to proactively increase the interaction rate with your app. However, push notifications will only make it onto the display if the user agrees to it.

Progressive Web Apps: Collection Under PWA Rocks (Screenshot: Noupe) The Catch is the Browser Support

As always, in modern web, progressive web apps don’t work perfectly fine on all browsers. On Apple devices, the web app runs, but due to the lack of missing support, mainly for service workers, the experience cannot be called progressive. We probably won’t see the Push API on Apple devices anytime soon.

As of right now, in early March of 2018, progressive web apps are only fully functional under Android. However, since August 2017, people have been working on the implementation of service workers into WebKit. WebKit is the technology that Safari and Mobile Safari are based on. Now, apparently, Safari 11.1 is supposed to bring these changes to the desktop and mobile devices. As I said, don’t expect the full implementation as a PWA. Safari 11.1 only provides service workers. Manifest, app shell, and push notifications, a good two-thirds of the PWA technology foundation, are left out.

Let’s get to the competition from Redmond. Microsoft has also committed to open standards, and at the beginning of February 2018, they announced, that they would take the PWA standard from the preview in the rendering engine EdgeHTML into live operation. With EdgeHTML 17, PWA is supposed to reach Windows users in the Edge browser at full power. For chronological perspective, it should be said that EdgeHTML 16 was a part of the Fall Creators Updates last autumn. As Microsoft does not have a reliable update rhythm for EdgeHTML, we could expect version 17 in April 2018, but a release during late summer of this year is possible as well.

In addition to the Edge integration, the Redmonders also decided to make PWAs accessible right from the Microsoft Store, giving them the status of real Windows apps. In the future, developers can manually place PWAs in the Microsoft Store. In addition to that, the Bing crawler is supposed to be able to automatically integrate high-quality PWAs he found into the store. According to Microsoft, Bing has been practicing the indexing of PWA for about a year now.

With the PWA Builder, Microsoft takes it one step further, offering a free PWA generator as an open source project. Start your way to a PWA by entering your website’s URL. The generator detects the gaps that need to be filled for the definition as a PWA and supports you in the process.

You can also enjoy PWA support in Chrome, Firefox, and Opera. If you want to get an impression of the current PWA supply, check out the previously-mentioned catalog PWA Rocks.

The supported features on a computer with Windows 10 Creators Update and the Firefox 58.0.2 64-Bit (Screenshot: Noupe)

For an impressive look at which browser provides what, I recommend using the website What Web Can Do Today, which is a PWA itself, by the way. You can access it from any browser on any device, receiving detailed information on which features your app could use on the respective browser/device.


Progressive web apps are websites that progressively adjust to the abilities of the device and browser they’re used on. Progressive means that the app becomes more performant the more performant the device, and browser it is accessed on are. For the creation, open web standards are used exclusively.

Over the course of 2018, we can expect that the concept will establish itself across all platforms. Due to the known business-political considerations from Apple’s side (keyword: Walled Garden), macOS and iOS should have the most restrictions, while PWA should become the standard everywhere else.

Further Reading

(The article was originally written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

Fade to Grey: Will Headless Browsers Kill Web Design? - 12 mars, 2018 - 11:00

Is the browser as we know it today a phase-out model? Can we use the web without it? The answer to the second question is a clear yes. Will headless browsers kill web design?

Headless Browser: UI Without UI

Headless browsers have been around for about ten years now. They are applications based on the standard rendering engines (Chrome, Webkit, Gecko), and can display web content without actually displaying it. They lack the visual user interface; they are headless.

Originally, headless browsers were developed to allow for fast and automatic testing of websites. Usually, this happens via the call level interface (CLI), or defined interfaces (API). Upon request, error messages are sent out as screenshots, or in other specified ways.

Since the introduction of headless browsers, the developer community has had split opinions on them. Some think the technology is nonsense, and would instead test their designs and applications on a bunch of “normal” browsers. This is reasonable.

After all, the visitor the offer is meant for won’t be using a headless browser either. PhantomJS, being one of the most popular ones of its genre, also produces error messages that don’t exist in a regular browser. This is only partly useful.

PhantomJS: One of the Most Popular Headless Browsers. (Screenshot: Noupe)

As a server sided base technology, Node.js is pretty popular with creators of headless browsers as well. A somewhat modern specimen of that kind is ZombieJS, where the name already hints at the headlessness. In contrast to what the name suggests, ZombieJS is said to be extremely fast, making it an excellent choice for widescale efficient testing.

The confident users of headless browsers appreciate the ability to run a plethora of automatic tests via a headless browser, or an entire group of these services in a fast and straightforward way. The main supporters of headless browsers are developers of complex web applications for large target audiences.

The average web developer with a moderate product and client range doesn’t really need the economics of scale, meaning he’s likely to choose the conventional path.

Headless Browser: Google Scales the Benefit

In 2009, the search engine giant Google had the idea to use headless browsers in a very different way. The Californians were facing the problem of being unable to index content dynamically generated via AJAX. In the end, this content only turns into an indexable website after generation, as we need the browser for them to be rendered correctly and become legible.

Thus, the search engine needed an internal browser, to make the content usable. No sooner said than done! Since then, Google has been using headless browsers, allowing them to read content that needs a front-end interaction to get to be displayed, as long as the page operator takes some precautions. Bing is using similar technology.

Now that the browser engines are becoming more and more performant, what does that mean for headless browsers? Right, they are growing increasingly performant as well.

Progressive Web Apps (PWA) Show Where We’re Going

One of the core technologies of every Progressive Web App (PWA) is the so-called service worker. This is a JavaScript, capable of executing functions without the website having to be called up at all. You can find some more detailed explanations in the article mentioned above.

The service worker is a part of the headless web itself and can be used by both a headless browser and on the client site. This turns the headless browser into a service that can process programmatic procedures on the server side. This potentially makes the browser on the visitor side redundant.

On the Headless Web Contents Turn Into Modules

The headless browser has modularly pre-rendered contents. These rendered pieces of web content are available for further processing, or for display. It doesn’t necessarily take a browser to display them correctly. At the same time, a native app could take care of the entire presentation, and show a structured layout of the pre-rendered web snippets within the own UI.

Examples of these approaches are Facebook Instant Articles or Google’s AMP Project. In the article mentioned above, I stated that Google should have a particular interest in protecting the open web. AMP is a building block. However it does not receive unrestricted approval.

Google’s AMP-Project. (Screenshot: Noupe)

The web push notifications, as seen under Google’s operating system Android, go into the same direction.

Microdata is an essential factor as well. You may say that even today, there are data transfers via JSON, for example, and you’re right. The headless web takes this a few steps further, though, as it does not only take data from the handover interface but also takes entire function modules, including integrated program logic components.

For that, it is necessary to pay attention to semantically correct markup, to create building blocks that can be used sensibly.

By now, you can also book web push as SaaS, as seen at Zopush (Illustration: Zopush)

Advocates of open web standards might enjoy this. I think it is safe to say that these open standards will gain significance in the future.

The joy of average web designers because of the victory of open web standards could quickly fade away, though. After all, classic web design won’t be needed anymore, and the aspect of architecture moves even more into the focus as it is already. This aspect becomes very clear when looking at AMP. The very standardized display and the delivery of contents via Google servers don’t cater to everyone’s taste. The project is somewhat controversial, but it is almost entirely supported by publishers. Content providers seem to love it.

So, does this mean that the areas of design and development will just be separated even more? Today, at least in front-end development, we still see a mix of the disciplines. This already starts where web designers install the software on the server and adjust the CMS theme in a way that allows it to correctly display dynamic content.

Speaking of headless, we should also mention that the trend continues for CMS. It is even possible to run WordPress and WooCommerce headless, without a frontend. In a standardized form, the contents can be drawn from the backend, and used in any desired way, like in a native app for mobile devices specially made for that.

Aside from the famous market participants, there are also solutions going for headlessness from the start, allowing them to function without legacy burdens. An example for this is ButterCMS, which exists in the Google Cloud; another example is Kentico Cloud, which is also operated as cloud SaaS.

Currently, there is no solution for scaling headless browsers in a way that they can provide thousands of instances at once. This technological obstacle is sure to vanish in the future, but it still exists as of right now. At least until then, websites with a head won’t become redundant.

Further Links:

(The article was originally written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

eCommerce: Can Taxonomies be Pretty? Yes, They Can! - 9 mars, 2018 - 10:00

Everyone is talking about content marketing. Many of us even create content “en masse.” Some hire so-called influencers for that. Way too often, the effect fades away quickly, as the material simply drowns in an unkind display.

But why do they always have to be published in separate blogs, instead of being presented in conjunction with the offers? Are the shop systems and CMS that bad? Or is it a lack of imagination that makes people think that there were no other ways to present something aside from the stale grid displays of product and content teasers, with a “bit of SEO” somewhere in-between?

What about putting a few helpful tips and bits of information next to the products or blog posts in the category, and keyword displays?

Is it impossible to add a guide to lists full of shoes, telling users which sneakers can be worn with a suit, which boots are waterproof, and how to take care of them?

Couldn’t you add an authentic video to the stale product and content deserts, given the option of inexpensive video production using smartphones? I don’t think that online users are immune to visual merchandising.

By straying away from the conventional patterns, and finally discovering the power of content, we could hit multiple birds with one stone! Three good reasons:

  1. Helpful content can also help users find their way around taxonomy views.
  2. The consumption of good advice leads to better user responses: visit duration and click rates increase, bounce rates drop.
  3. All of this and relevant content that appears in the content area have a positive effect on SEO. As the quality factor rises, the performance of AdWords is improved as well.

There are a few very promising first approaches coming from the United States of America.

How would it be to see proposals for clothing in the correct, predefined size upon login? Is it that hard to expand user profiles in that regard?

Let’s go one step further and also take seasonal results, e.g., the weather, into the equation. Big and small shops alike could easily aggregate all data needed to give daily styling or application tips.

I can imagine lots of users being happy about a (push-)notification telling them that tomorrow, on a rainy day, a new umbrella could come in handy.

Just think about it. And then suggest it to your client. You don’t have to tell them it was my idea ;-)

(The article was originally written in the German language by our author Severin Lucks for the bi-weekly newsletter of our sister magazine Dr. Web.)

Catégories: News dév web

Looking for the Best Productivity Apps For Designers? They are in this Article - 8 mars, 2018 - 16:58

Advertise here via BSA

Whenever one needs to spend excessive time juggling tasks, deadlines, etc., it’s time wasted. This is irrespective of the professional activity. The same goes for any team leader or a freelance designer.

There are better ways to go about managing these tasks. These ways that are faster, more efficient, and far less prone to error.

Project management and team collaboration areas have seen technology come to the rescue. The help comes in time and task tracking, reminders, or to-do list management. This is beside numerous other tools.

You can always hire someone to help you stay organized, meet deadlines, and track expenses. Thereby, you can free up more design time and free time for you.

But, that comes at a significant cost.

A better approach is to invest in a tool that automates everything for a very affordable price. Just like one or more of the following.


1. is a team management tool that initially targeted startups and tech companies and was designed to accommodate teams of any size from a pair of freelancers collaborating with one another to thousands collaborating around the globe.

Because of its reputation for ease of use, transparency, and communication and collaborative features, it was quickly discovered by non-tech companies. Today this team management tool, which was until recently marketed under the dapulse brand, serves more than 22,000 teams across 200 different verticals, of which 70% lie outside the tech sector. makes it easy to build and manage workflows that are customized to fit your exact needs; so, you’ll never have to adjust your workflows to satisfy the tool. It’s “cheetah fast” so you never have to wait no matter how complex the project or how many projects you are tracking, and if you and your team like colorful visuals that make it ever so easy to understand what’s happening, what has happened, and what’s in store, is spot on. 


2. Taiga

Taiga is a free, open source, easy to use project management platform that designers, developers, and project managers have come to love. This powerful tool not only addresses a wide range of project management scenarios, it gives you complete control over your projects and is beautiful to look at as well.

Agile methodology users have likely heard of Epics. Although a precise definition of what an Epic story looks like is hard to come by, it’s safe to say that Epics on Taiga opens a host of planning opportunities for anyone charged with managing multiple interrelated projects – a tough act to handle in almost any circumstance, but quite doable for a Taiga user.

There’s also no problem managing projects being worked in other platforms in Taiga. In short, if you’re responsible for managing or tracking several projects, interrelated or not, it makes good sense to go with Taiga.


 3. Mason

Mason differs from most productivity and collaboration tools in that it allows teams to collaborate on actual software elements, rather than just on mockups or prototypes. It is especially useful when changes need to be made to existing products by letting any user change colors, button styles, or images to better emphasize a brand and then seamlessly push those changes into production with no downtime or coding.

One way to look at how Mason operates is that allows users to assemble digital products, rather than code them, by boiling products down to their atomic patterns and then reassembling those patterns into configurable, solution-based building blocks which are deployable into any application and are delivered on demand. Mason’s library of software solutions currently includes Authentication, User Onboarding, Content Feeds, and Navigation.

Non-designers (clients, marketers, etc.) can also make changes using Mason, taking some of the maintenance pressure off designers and developers. Mason is free to use. You pay only when changes made appear on the customers web or mobile products.


4. RunYourMeeting

When a participant in a meeting comes unprepared, it can mean wasted time for others, not to mention a need to reconvene later. With RunYourMeeting, incidents like these can be avoided.

This productivity tool helps you prepare and conduct meetings efficiently and follow up on them as well. Meeting minutes and actions addressed or taken are kept in one place, and to-do lists are updated and automatically shared. What you want done, gets done.


5. ClickTime

ClickTime enables project managers to keep tabs on who is working on what, whether a project is on time and within budget, and who is available for work if needed. Attractive and easy-to-read charts display how many hours remain on a task or project, which of those hours are billable, and the costs of performing the work.

You can also manage employees’ time off and expenses.


6. ActiveCollab

ActiveCollab is a project management software that boosts team productivity by centralizing collaboration and allowing total control over planning, assigning, and managing work. Telephone tag and messy email communications will be history since comments and feedback are kept in one place and organized around projects.

Information can be stored for all to see, but you can also set permissions to determine who can access what.


7.  Futuramo Visual Tickets

If you want to enhance communication on your visual projects, give Futuramo Visual Tickets a try. This app enables teams of designers and developers to exchange tickets with bugs, change requests, and feedback on digital projects.

It offers a visual annotation tool, comments section, filtering and sorting features, and the ability to create tickets within tasks and projects. The major feature is the tool that allows adding visual feedback directly on the screen uploaded to the ticket.


 8. Nutcache

Nutcache, like our furry friend, excels at saving important things until there is a need for them. This business oriented productivity app will be especially helpful to those managing projects in that it manages a project throughout its life cycle and within Agile’s set of principles.

Nutcache makes it much easier for creative teams to collaborate and conduct their work more efficiently.



Find the app(s) that offer solutions to any project management challenges you’re facing. Then, you should quickly discover that your job just got a whole lot easier.

Productivity and collaboration are common threads throughout these software solutions. However, a wide range of features and capabilities are there for the choosing.

It should not be difficult to find the best fit for your needs or the needs of your business.


Professional Web Icons for Your Websites and Applications

Catégories: News dév web

Typography for Everyone Makes Texts Much Easier to Read - 8 mars, 2018 - 06:30

If you, as a page owner, think you didn’t have to care about typography, you’re wrong. The legibility of your texts also depends on the typography. Thus, in the following article, I want to cover this typography for everyone.

Naturally, typography has always been one of the most important elements in classic design. When studying graphic design or related subjects, typography becomes part of your daily routine from the very first semester. I don’t want to write theoretical essays on academic levels, though.

This is more about conveying the value of the realization of typographic basics to non-designers. The following tips let you create much more legible text, also resulting in a better findability in the packed world web.

Let’s start with tips for comfortable designs, written by InVision’s designer Luke Jones at Medium. These are three small changes that can be applied to any text with little effort. After the second or third time, these tips will feel natural, as if you had always used them.

Tip 1: Typographic Hierarchy Structures the Text

When writing on the web more or less regularly, you’ll know that keeping a correct text hierarchy is the main factor for the findability of your content in search engines. For that reason alone, you’re probably already paying attention to correct labeling.

However, not only search engines have an easier time working with cleanly structured articles. You readers also profit from a logical division of the content.

Oftentimes, it is enough to focus on the headings of the stages one to three (h1 – h3), the correspondingly smaller running text, and the even smaller footnotes. For that, there are a couple of very simple assumptions, that allow for a clean structure applicable to every text.

This GIF does a good job at showing how quickly an illegible text can be turned into an easily legible one. It doesn’t even take much effort. (Gif: Luke Jones, Medium)

The starting point for the observation is always the continuous text, which is what we write into the p-tags on the web. This text is the index, meaning it keeps the font size of 100 percent. All other elements are derived from that.

According to this, the first step is getting the text to a comfortably legible size. A lot of this is just a matter of taste. For me, this value is at 18 pixels, I don’t want it to be any lower. Common publications are mostly around 14 pixels. No matter which size you define, it is important that it is the foundation for all other elements.

Headlines (hl) should have 180 to 200 percent of the original size, secondary headings (h2) 130 to 150 percent, and tertiary headings (h3) should only be slightly bigger than the running text. In many cases, you’ll see h3 as a simple bold text. You should be able to go up to 125 percent without problems. Footnotes shouldn’t exceed 75 percent of the size of the continuous text.

This way, the sizes of the different text components alone let us create a visual hierarchy that provides orientation, making the reading experience more comfortable.

Tip 2: Generous Line Heights Make Reading Easier

We’ve all been parched in a dry text desert more than once. The simple view at a wild pile of letters lets our mouth go dry immediately. The salvation is so simple, though: just visibly divide the individual lines to bring the reading flow back to life. Even for that, there are simple rules of thumb.

The distance between a line and the previous one should be between 120 and 160 percent of the size of the original text. Jones’ rule of thumb is that a lying lower case h in the original size should fit into the gap without touching the upper and lower tips of the letters in the two lines. Clearly divided lines make words easier to conceive, resulting in a faster and more enjoyable reading process.

The same goes for the correct placement of gaps between the paragraphs. In the past, the hyphenation was simply clicked twice, which usually results in too big gaps between the paragraphs. Thus, it seems better to use the size of the basic text for the gap.

Tip 3: Don’t Let the Lines Get Too Long

Users of large screens surely know the blogs that were set in a way that the width of the text is adjusted to the width of the visitor’s display. This is called fluid design, and it is a valid means of design, but not like this.

Good example for a legible column set, but the lack of hyphenation has a negative effect – see tip 7. (Creator: Pawel Kadysz)

Line lengths of a maximum of 75 characters are considered to be enjoyable to read. After that, there should be a wrap. This results in the multi-column set of the venerable print media. Of course, there are different opinions on this topic as well. You’re somewhere in the wide consensus if you’re ending your lines between 40 and 80 characters.

Single column layouts should end their lines after 65, according to the typography pope Robert Bringhurst. He also said that the required width for the text can be calculated by taking your planned font size and multiplying it by 30. So, if you take my preferred font size of 18 pixels, you’ll get to a value of 540 pixels for the text column.

Tip 4: Use Different Weights of the Same Font

Once you’ve created the basic structures, you can still realize some of the other tips. In order to organize a text in a way that’s more differentiated than simply setting text to bold and other formatting options, it is recommended to use different versions of the same font.

Oftentimes, fonts are designed with a separate weight and are able to be used like that. These fonts are way more attractive than the computer-created version of the used original font.

There are more variations of them, too. If one font doesn’t provide any alternatives, you could also consider using a font from the same family. However, you should always change entire text parts, instead of mixing within the running text or the headings.

I don’t think I have to explain that this tip doubles as a plea for using web fonts. Don’t rely on the conventional system fonts you’ll find on every computer any longer. Instead, take the design wheel and use more interesting fonts, which are even easier to control in terms of their looks.

You should start at the low threshold of Google Fonts, which are very easy to implement in WordPress sites. Recently, my colleague Denis Potschien showed you his must-haves for the year 2018 in this article.

Tip 5: Never Use More Than Two Fonts

I remember that all elements of a presentation used to fly over the screen, animated via Powerpoint, and even included sound annoying sound effects at times. Every font installed on the computer was used in the wildest ways. Sometimes, awful fonts were installed deliberately. Oculists were booming. Well, now I may be exaggerating a bit…

Although there are still ugly fonts that make our eyes bleed today, things have gotten better. We don’t even have to use Powerpoint anymore. Take a look at Ludus, for example. I recently presented it here.

Nonetheless, it is a tip worth considering: never combine more than two fonts in one piece of content. And, even when combining these two fonts, make sure not to use opposite font concepts.

For that, FastPrint has built an infographic that deals with the combinability of the most popular fonts of Google’s free collection. Check it out.

Tip 6: Find Alternatives to Microsoft’s Boring Fonts

If you know Calibri and Cooper inside out, it is time to do something about it. The designers of Plato Web Design rush to help you, and provide you with neat alternatives to the plain Microsoft material.

Alternatives to Microsoft’s boring supply are always nice to have. (Snippet: Plato Web Design)

There’s an overview of the whole thing in this infographic.

Tip 7: Use the Automatic Hyphenation

With CSS3, the attribute hyphens has been released. Text passages with this label, like the paragraph tags, are supposed to lead to the display of cleanly divided texts in the user browser. The markup itself is very simple:

p { hyphens: auto; }

Unfortunately, the automatic hyphenation only works in Firefox, Safari, IEll, and Edge. Chrome does not support the attribute on macOS and Opera. An automatically divided column can looks so beautiful, though, as shown in this example from, which I was able to capture in a screenshot using Edge:

In the HTML tag, in order for the hyphenation to work properly, English has to be deposited as the document language, like this:

<html lang="en">

If you have the option to set this attribute, you should definitely do so. The legibility of your texts (in the supported browsers) is improved significantly.

Web developers are probably interested in this polyfill solution called Hyphenator.js.

Tip 8: Use White Space, Images and Contrast

Strictly speaking, this is no piece of advice on typography. Since it affects the legibility of texts, however, I think I should still mention it here.

I frequently encounter texts on the web, where I can tell that it is a quality article after the first few lines, but I am still unable to read until the end. If it can’t be traced back to one of the previously mentioned mistakes made by the page operators, it is always the result of a lack of images, or due to the fact that the text area can barely be told apart from the surrounding elements.

Thus, I ask you to integrate images into your text. They loosen the reading flow, and, if chosen smartly, they even contribute to a better understanding of the text. Also, please provide an appropriate amount of white space, which is space not covered by text or other elements. This makes it easier for the reader’s eyes to follow the text flow, rather than having to fight off distractions.

Lots of white space, even if it’s pink in some cases, few elements, very legible overall. (Design: Tubik)

Also, make sure to always add a clear contrast between the text and background. There’s a reason why books are printed with black text on white paper. This contrast is considered optimal. Very bold experiments in that regard will most likely result in you losing parts of your readership.

Typography is More Than Line Distance and Font Types

This should be enough for today. Of course, these tips are merely the tip of the iceberg. So, if you pay attention to all tips in this article, you’re still no expert. However, you’re already providing a lot more for your readers than many other writers or page operators. This is not just important in e-commerce, where it helps purchase decisions, making it turnover-relevant. A legible freelancer blog will also be a lot more popular. In any case, you’re setting yourself apart from the competition.

As you can see, there are only advantages. So, what are you waiting for?

Related Sources:

  • 10 Typography Tricks to Make Your Text Much More Readable | Creative Market
  • 3 Typography Tips For A More Comfortable Read | Luke Jones, Medium
  • 8 Simple Typography Tips For Your Designs | Smashing Magazine
  • 20 Typography Mistakes Every Beginner Makes – And How You Can Avoid Them | Canva

(The article was originally written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

Design: These Prototyping Tips Prevent You From Losing Your Customers and Your Mind - 7 mars, 2018 - 06:30

It doesn’t matter whether you call it prototyping, design draft, mockup, or proposal. It’s the same topic. The customer wants to see what his digital product will look and work like as soon as possible. You’re no wizard, though. What now?

Design Prototypes Always Require a Compromise. But Your Customer Doesn’t Know That…

Us designers like to consider ourselves experts – especially when we’re able to look back at a bunch of successful projects of the past. In comparison to our typical client, we really are experts. Under this basic assumption, it seems unnecessary to make a prototype for easy projects.

The customer wouldn’t agree with that. He wants to see results as fast as possible. This early on in the project, the most we can show is a mockup, a prototype, a wireframe model.

Of course, we know that the mockup won’t be able to satisfy the clients’ needs. They don’t want what we consider a prototype – no, they want to see a complete and fully functional website or app. At the same time, they expect all changes to be made immediately, and at any time, no matter how massive they may be.

This is cause for conflict. Even if we don’t want to cause an argument, we still know that, with the client’s idea in mind, a prototype always has to be a compromise. This may strengthen the urge to forgo the wireframe entirely, or at least to devote as little time as possible.

With the prototyping tools and UI kits available today, creating a draft doesn’t have to take long. With some experience and the mentioned means, you should be able to get a rough draft complete with interactions in about two hours.

With a calm and professional approach, you can prevent losing both your customer and your mind. This is a win-win situation in many regards. Thus, take a clinical look at the following tips, and decide what’s more important to you. Being right, or keeping the customer.

Tip 1: Don’t Lose Your Understanding of the Customer

I have experienced this more often than I’d like to: the designer builds himself up in front of the client, and may even be angry about the client sticking to his own idea of a prototype, even after multiple attempts to convince him. After all, the designer has the expert knowledge on his side – maybe he even studied design, which would make him a certified expert. His customer is a complete idiot!

It’s his fault! No, he’s to blame! (Photo: Pixabay)

However, those that enter the ring with their existing or potential clients will start a hopeless fight. Even if the client ends up relenting, he won’t be satisfied. He’ll feel run over and definitely won’t build a lasting client relationship.

Remember: You will never win a fight with your customer.

Thus, always approach the design process with an open mind and a lot of appreciation for the customer. He’s the one that pays for the music – so he is allowed to decide what you play. If he expects Serenade No. 13, but you only know how to play the electric guitar, you might not fit together. But even that can be dealt with intelligently.

Tip 2: Don’t Think of Prototyping as Unnecessary Effort

First of all, making a prototype means effort. However, it’s also about quickly defining the direction of a project, and communicating basic components of the commission with the client.

Mockup, Prototype, Wireframe – don’t put too much detail to it. (Illustration: Pixabay)

Because of that, a prototype is never a waste of effort. However, there is nothing bad about keeping that part of the creative process as short as possible. Standardize your prototyping workflow. Get a building block system that lets you move the default elements of each project to quickly form a mockup.

Even if you don’t want to admit it. The basic components are almost always the same – after all, we’re not artists, but rather craftsmen that create more or less standardized solutions with given materials.

In the past, I created mockups in my Moleskine notebook – totally hipster. At one point, I stopped, since I wasn’t able to tell the drafts apart anymore. Since then, I’ve been using Sketch on the basis of three templates, which I have created for prototyping in my clients’ main branches.

That Sketch ends up in InVision, where the individual screens are extracted automatically, so this doesn’t result in any additional effort for me. Now, I quickly implement the interactions via hotspots – done.

This minimizes the work I need to put into the mockup creation while contributing to the communication and planning with the customer.

Tip 3: Build Interactive Prototypes

It used to be conventional to create and print out a pure design draft. That print was often glued to a large piece of colorful cardboard to make an impression. The client got to see at least five versions – one of which was awful on purpose, to guide the client into a particular direction from the beginning, stimulating his decision-making.

Rapid Prototyping in Adobe Xd. (Screenshot: Adobe)

Of course, creating an interaction-free prototype is still the easiest way, but with the prototyping tools available today, this would be near careless. In the noughties, I used Powerpoint for that purpose. Today, there are a bunch of better tools, and even standard web technologies allow for the fast creation of prototypes.

If you want to work contemporarily and provide an interactive prototype, that should be more than just a slideshow. Build a prototype with hotspots in the right places, which lead to the appropriate screens when clicking them. If you don’t do that, you’re already setting yourself up for the next pitfall.

Aside from the previously mentioned Sketch, I also like to use Adobe XD a lot. I explained why and how I’m doing that in this article.

Adobe XD lets you present your prototype via Creative Cloud using your smartphone. This is really impressive, as I was able to see from the dropped jaws of some customers. Definitely, try that.

Tip 4: Make Sure The Client Understands Your Prototype

As I’ve mentioned before, designers and clients often have fundamentally different ideas of a prototype. The customer expects a polished finished product, which you can not provide at that point in time.

Try to create realistic expectations. (Photo: Pixabay)

Thus, before the presentation, explain what should be expected from the prototype, and what not to expect. This may seem unnecessary to you, as you are very familiar with the term. But you customer will happily put you right.

It’s up to you to explain which restrictions your prototype is subject to, and why that is the case. Be careful with your wording, or read tip one again.

Tip 5: Always Request Precise Feedback

When it comes to collecting feedback on your prototypes, you should avoid very general questions. Generally, when asking for feedback, you’re likely to receive it, but unlikely to obtain useful information.

Always ask for feedback on specific aspects, like the feel of the page navigation, or if the form X is well-placed in position Y, for example.

Tip 6: Form a Comfortable and Firm Collaboration Base

Let’s be honest: I have yet to find a perfect solution for this myself. One thing I know for sure, though, is the fact that collaboration on one prototype with more than two people is guaranteed to result in a catastrophe if done via email. It only takes a few days until nobody knows what was talked about and agreed on.

Keeping everyone involved in the project up to date has to be the goal. (Photo: Pixabay)

I’ve been using the cloud solution InVision, which I presented in this article, for years. While InVision provides a pretty good approach, this solution is still very far away from perfection. In any case, the tool is a much better alternative to email.

In this article, my colleague Denis Potschien shows you different alternative collaboration solutions that are worth checking out.

Tip 7: Don’t Make More Prototypes Than You Have to

I always try to leave it at a single draft and change it step by step. I have stopped creating multiple proposals about fifteen years ago: back then, I parted ways with a client that still wasn’t satisfied after the tenth (!) functional, and utterly different design prototype.

The quality of Prototyping is not measured by the amount of scrap you produce. (Photo: Stockvault)

Nowadays, I create a single well-thought-out draft. I explain it thoroughly. In my first draft, I always make sure not to make any concrete design decisions. At this point in time, the look of the project is as undefined as possible.

Now, I work on this mockup with the client, trying to find a consensus we’re both happy with while solving the problem at hand. When taking a different approach, and throwing tons of drafts at the customer, you’re suggesting that the proposal is worthless individually, while also indicating a certain level of randomness in your solution approach.

In conjunction with the existing difficult collaboration, this may lead to complete chaos in no time.

Tip 8: Always Direct the Customer’s Attention to the Core Aspects

This should seem familiar to all of us. The client is sitting in the meeting, criticizing the fact that the date on the mockup doesn’t match the current date. It seems like it’s tough to tell apart a static draft from a final product.

Although it’s hard sometimes. Explain it again. (Photo: Pixabay)

This aspect requires explaining as well. The client needs to understand that, even with limited interaction, the prototype is still just a decoy supposed to lead the way.

Thus, it doesn’t help when the client criticizes the font or the weight of some orientation lines. It takes a certain amount of body control to stay calm in these situations.

But what else are we experts for?

(The article was initially written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

7 Design Principles That Are Not up for Debate - 6 mars, 2018 - 06:30

Of course, to some extent, a design is a matter of taste. The bigger share, however, is solid craftsmanship. It is subject to rules that you can’t just knock over because you think you’re a disruptive creative.

In the following, we’ll need to differentiate a bit, as design includes both the visual and the functional aspects of a product. However, in web design, you’ll still find the widespread perception that designs have to be individual and have to stand out from the masses.

Visually impressive, but barely functional site giants are a common result of this philosophy. It shouldn’t take much thought to figure out that this has to be wrong.

On the other hand, it is true that design becomes increasingly better the more rules it follows. These principles apply on multiple levels. They have to be kept in mind for the design of the engine, meaning the program logic and the code, as well as for the design of the interface, meaning the layout. This way, they affect both designers in the sense of designers, and in the sense of coders.

The goal has to be the center of attention at all times. (Photo:

The highest tenet should always be that out products help people to solve an existing problem in the best way possible. All design activity has to be thought about from the perspective of the potential user. Trends are only a factor if they serve the goal of user centering of our products.

You shouldn’t pay attention to purely visual aspects without any practical use.
In the following article, we’ll take a closer look at the different levels, as well as the according legitimacies.

Design Principles for Developers

Regarding the code-realization of our designs, we need to follow three basic principles.

Design is Accessible

Accessibility of design is a very hot topic. The thought that it wasn’t economic to put in that much effort for such a low percentage of users is very common, especially since you can’t even see the accessibility of the finished site.

Accessibilty Has Multiple Dimensions. (Photo:

Generally, this is a very understandable stance. However, if you think about it, you’ll realize that it falls a bit too short. Let’s look at a few aspects of the Web Content Accessibility Guideline (WCAG 2.0). This should make things clear.

The WCAG list up a bunch of simple things to keep in mind to have more accessible designs. And although these points are not complicated, you’ll be surprised to see that you don’t make use of all of them, although there is no actual reason for that. You just don’t think about it.

This can start with the basics.

  • Always offer text alternatives to non-text content,
    the good old ALT tag. You know it, but do you use it consistently?
  • Make all of your site’s features available via keyboard shortcuts.
    I’d be willing to bet you don’t do that.

Design is Performant

This point is often covered by developer magazines from all over the world, and is still one of the weaknesses of most websites out there. Just take any random URL, and put it into the Pingdom tool. I bet you’ll be surprised.

Unfortunately, speed is not always as obvious as it is here. (Photo:

Creating a performant website doesn’t require witchcraft, but it takes meticulous work and love for details. This is about the sensible caching of dynamic websites, the optimization of multimedia content like images and videos, as well as the integration and optimization of scripts, stylesheets, and frameworks.

The goal is to achieve the lowest possible data weight for every single page of the web project. While the user may not see it, the advantage for the search engine placement makes the effort worth it up to a certain point.

Design is Responsive

You say you know responsive design. You do. Sure, responsive design is the megatrend of the past years. Websites that automatically adjust to different viewports have become the standard. No matter if it’s via media queries or fully responsive, almost all current websites are variable.

Unfortunately, this variability is only superficial in many cases. While lots of websites react to changes of the browser window with size changes, that’s as far as it goes most of the time.

Responsive design means thinking in modules. (Photo: Pixabay)

The real responsive design also includes cropping content on different devices, leaving out options that only make sense on certain devices, or the automatic provision of different screen resolutions, instead of simply scaling the view.

Design Principles for Designers

Regarding the visual design, including the display of the user interface, there are irrevocable principles to stick to in order to not lose the clear focus on the user.

Design is Predictable

Humans don’t like not being able to control a product right away. They will only look into a guide if they absolutely have to. First, they will try to get to their goals using their experience from previous products.

Thus, drop your idea with the completely new visual concept, and see what has been proven to be the best practice in the product area that you’re working on. Unfortunately, the designer in our cartoons didn’t understand this problem:

Not everything that’s possible makes sense… (Cartoon: Noupe)

By the way, the principle of predictability is part of the WCAG 2.0, which you got to know earlier.

Design Guides

Apple is probably the only one to strictly follow this principle. Their designers clearly define a functionality and are not distracted by anything. For years now, people have asked Apple to integrate notification LEDs into their iPhones. No, is what Apple’s designers say about that. They chose not to do that. Especially when looking at the iPhone, there are plenty of other examples.

This may bother some people, but it basically shows that the designers take their responsibility seriously. As an expert, you’re the one who has to define how your product is best used. You’re the one responsible to guide the users. Don’t avoid this because you’re a coward or lazy.

Design is Fast

As a designer, you have to keep in mind that your potential users are always looking for the fastest way to solve a certain problem. Applied to web design, this means: the fewer clicks the better. If there’s a way to accelerate a problem, find it and realize it consistently.

Microinteractions play an important part. As chance would have it, we have just recently released an article on the topic.

Design is Human

Design has to take account of the human factor. The human wants to be rewarded. He needs feedback. Every now and then, he also likes surprises. Sounds plausible, right? But what is this supposed to mean?

Human design starts where you use texts written for humans. Who doesn’t know the error message “System Constant XVEW missing. Fatal ABort?” Nobody? Right. It’S made up, but do you know what I mean?

Human design continues in the above-mentioned microinteractions. The user needs to get feedback if his interaction was successful or not. Speaking of “or not”, human design makes sure to prevent this “or not” from happening.

A carefully dosed bit of surprise or humor can be used as well. However, it is important to make sure that these elements don’t disrupt or interrupt the workflow. An unobtrusive way to surprise the user would be automatically changing the color scheme depending on the time of day.

No article about design principles could ever be complete without mentioning Dieter Rams. He has developed ten principles of design himself. Of course, you have to view some of them in the context of a reader alive 40 years later. But in abstraction, Rams is still right.

(The article was originally written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

Design: Microinteractions Make the Difference - 28 février, 2018 - 06:30

You think the big picture is what counts? You’re right, but only as long as it differentiates itself sufficiently. Today, the small UI elements and features are far more important. Thus, microinteractions are what you should pay special attention to when designing your projects.

What Are Microinteractions?

Microinteractions define the actual human-machine interface. If you turn off your alarm or lock and unlock your car, flush the toilet, or turn the light off and on – all of these are microinteractions.

With these examples, you can already see that all of them are short actions with major significance regarding the respective user experience (in one of the example cases even affecting the user experience of following users). Calling microinteractions the most important elements in product design is not an exaggeration.

The main advantages of successful microinteractions are obvious. Microinteractions, especially when combined with small animations, can convey the impression that the digital product behaves very similarly to an analog product. This can be accomplished via immediate feedback, like the effect of clicking a button, pulling a slider, or showing a rotating spinner during a download, or a shopping cart filling after clicking on buy.

Targeted use of immediate feedback avoids user mistakes since you have access to much better controls of the click paths via visual support. Psychologically speaking, the product reacting to the user has a positive effect. Who doesn’t like recognition for his actions?

Microinteractions 1.0: Skeuomorphism as a Design Principle

In the past, designers liked relying on skeuomorphism, which are very detailed recreations taken from the real life, when designing interactions. Some designers went ahead and even imitated a real example to make sure that the user won’t struggle with using it.

The problem with skeuomorphism is their high taste and culture dependency. Additionally, too exact copies get boring very fast.

Switch Animation | Eugene Cheporov

Thus, for a few years now, interface elements with minimalistic design and integrated interactions have established themselves. Logically, skeuomorphism is limited by the limitations of the real role models, if they want to keep up the image.

More modern approaches don’t underlie these conventions. Especially Google’s material design leads the way. People also like to call this microexperiences, as a synonym for microinteractions.

Microinteractions 2.0: Use the Modern Options

Nowadays, after ten+ smartphone years, designing elements that let the user relate to the analog world is not as relevant anymore. The digital aspect has been established in our everyday lives and does not need an explanation via wood hammer methods. Nonetheless, the significance of microinteractions is rising constantly. The reason is simple.

Due to a consistent design language, digital products are getting more and more similar. Some products can only be told apart from each other if you specifically look for the name. Here’s an excerpt from the search result when searching for the category “todo” in the Google Play Store:

I told you. You have to look for the names to tell apart the products. (Screenshot: Noupe)

This is not what we call innovation. From a superficial point of view, you’ll be tempted to ask how I think the different providers should have made their todo apps recognizable. Sure, the answer isn’t simple. But, it is no reason not to seek for it.

Differentiation can no longer happen on the level of the design basics, it seems. The microinteractions are what lets you as a designer set your product apart from others. Basically, the only way the user interacts with your product is via microinteractions.

The more convincing they are, the more fluid the usage feels, which increases the chance of the user enjoying using your product. A single well-done interaction is capable of deciding the battle between product A and product B, which is key to surviving amongst millions of rival apps, and a lot more competing websites.

Download Button | Alex Pronsky

The perishing of old design patterns frees you, and lets you make use of the options of modern technologies. With microinteractions, it is always important to not just provide the user with a clear trigger, such as an obvious button or slider.

Instead, you have to make sure that the user receives a clear feedback. This has to reliably inform the user regarding success, failure, or the duration of the action.

Progress Circle | Leo Zakour

Here, usage of motion in the element, meaning the integration of small animations, has been proven to be successful. In the guidelines for Material Design, you’ll find detailed tips on the topic. But, especially when using animations, it is important to be careful. Something that may be perceived as a nice surprise the first time can seem boring or even annoying when the users encounter it the tenth time.

Fluid Switch | Leo Zakour

When creating animations, it is important to make them as short as possible. Google recommends not exceeding 400 milliseconds. The animation mustn’t cause a delay when using your interface. Delays in the seconds would be too long and make the product seem slow.

Form Flow | Leo Zakour

Once you’ve made sure that the user gets a clear feedback after using a microinteraction, it is time for the next step. You have to judge whether the microinteraction will be one that the user will use repeatedly.

If yes, you need to consider whether the first usage makes it necessary to make changes for repeated usage. For instance, you could turn the button “buy” next to the purchased product into the button “buy again” after the purchase, handing out important information to the user on the go.

When developing the microinteraction, it is also important to only display what’s really necessary to complete the task up next. Surely, you can add a bit of humor to your animations, if you use it very conservatively. However, I only recommend this for animations that the user doesn’t see all the time. Don’t put a funny play button into your music app.

Even if it’s a good one, every joke is only funny once. With microinteractions, however, users are exposed to the same element hundreds or thousands of times. It’s better not to annoy the users. The best microinteraction is so subtle that it is not even recognized as one, and just treated as a natural component.

Of course, you mustn’t forget about the general principles, even when designing microinteractions. Which designer hasn’t heard of Don’t Make Me Think? All UI elements have to exist in context to each other, and, at least in this context, need to be self-explanatory.

The color scheme has to be homogenous, as well as the typography. Texts need to be worded in a comprehensible, simple language. But you know all of this already.

If you want to learn more about microinteractions, you should visit Dan Saffer’s website Microinteractions – Designing with Details.

(The article was initially written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

Newsletter Design: How to Create Effective Modern Emails - 27 février, 2018 - 10:00

Designing an email newsletter is a task that has to be approached with multiple aspects in mind. Aesthetics are one, while marketing goals are another. We’ll show you how to cover all aspects at once.

Of course, an email newsletter has to look nice. Why? Because people prefer using pretty things. And if users with an inbox filled to the brim have the choice between opening a message with a good looking preview and one that looks as dry as the information it most likely contains, which one will they choose?

By the way, we have recently looked into the question if the email newsletter is dying, or even dead already. I’m sure you can get some additional information from this article.

Common Problems in Email Newsletter Design

Usually, email newsletters are used to turn prospects into customers. In this function, the newsletter serves as some shop window of a store in the pedestrian area. If it looks dull, the pedestrians walk past it.

With your newsletter, you have the significant advantage that potential customers have already actively decided to receive your virtual shop window in their inbox. However, you have to convince them every time. After all, the “unsubscribe” link is mandatory in some countries.

One thing that makes your life as a newsletter supplier hard are the many different email clients that your potential customers use to open their emails. Even Gmail has only recently integrated a somewhat usable HTML rendering engine. Outlook is still dreaded.

What makes this even harder is the fact that more than half of all emails are opened on a mobile device first. Thus, you can’t avoid responsiveness as a design essential. The mentioned restrictions are the reason why creativity is less critical than the technology itself when it comes to newsletter design.

Emails are mainly read on mobile devices. (Photo: Pixabay, Nastya Gepp) Newsletter Design From a Marketing Perspective

Let’s start with the marketing aspects. Here, it is essential to identify the goal of your newsletter. Do you want to generate traffic to your website by sending out article teasers, or do you want to sell products from within your newsletter? Are you merely looking for a more personal way of communication? A mix would be connecting seemingly personal messages with selling products recommended in said messages.

Service freelancers send out information that is potentially relevant to the target group, with the goal that the recipients of the email remember the sender as a competent expert, or even ask for more in-depth information and services, based on the brief information in the newsletter.

Not all of the mentioned email newsletters can and should be created in the same way. The goal of the newsletter and the target group’s expectations should be kept in mind.

Reminder: Before you get to the design of your newsletter, you need to be as aware of its goal and the target group as possible.

Based on your goal and target group, approach the further deliberations. There are very general rules that apply here. If you can only remember two rules, or just want to use two, you should go with these:

  • Keep it as short as possible
  • Place one (or few) obvious calls to action

This should already allow you to get a success rate of about 80 percent – as long as your wording is appropriate for your goal and target group.

Reaching the right target group is crucial. (Photo: Stockvault, Jack Moreh)

Avoid too many topics. This dilutes the call to action and, in the worst case, distributes the limited attention so much that the action threshold for the individual item is not met. In that case, all of the effort put into the creation of the newsletter would have gone to waste.

Email Newsletter Design From a Design Perspective

The design aspects are subordinated to the marketing goals as well. Thus, these are not recommendations that can be made independently, regardless of the marketing aspects. Instead, many parts of the design are a result of the restrictions.

Not all email clients provide a preview of the received email from within the inbox. Often, your potential readers also have the previews turned off. In these cases, your email subject is the only element you have to convince your recipient to read the newsletter. In any case, you need a stable subject to prevent your newsletter from drowning in the stream of mail.

This is where you’ll face the question “clickbait or not.” Of course, I never recommend subjects that announce something that the newsletter does not even provide. Nonetheless, a bold wording approach should help you get your content out there.

Outlook, the dread of all email designers. (Photo: D. Petereit)

Go for strong images, as text deserts are not attractive. Don’t use just about any image, though, but go for those that support the text and the general goal of the newsletter.

However, you need to consider those users that have deactivated the display of images on purpose or automatically. The amount of these users is said to be 43 percent of all users of Gmail. Here, you should fall back to techniques such as formatted ALT attributes, that let you create the impression that it was supposed to look like this, rather than displaying empty boxes. The structured use of background colors also alleviates the effect of missing images by a lot.

What you should definitely avoid is sending out emails that only consist of images. The trend of creating email newsletters via Photoshop and then slicing them is not that long ago but has luckily gone by now.

The visual connection to your brand should be clear at all times. Even if your logo is not visible anymore, while scrolling down, the general design, including colors, division, typography, should be recognizable as the design of your brand.

Speaking of typography: in emails, we use fonts that are likely to exist on the readers’ systems and forgo those that we have to supply in some way or another. Fonts like Arial, Verdana, Helvetica, Georgia, Tahoma, Lucida, Trebuchet, and Times are considered approved. 14 px for longer and 16 px for short text passages have been proven to be the optimal text size.

The concept of above the fold still applies in newsletter design. The most important information should be displayed in the window of the email client, without the user having to scroll down. In web design, over the past years, we notice that the concept is losing importance. Once you arrive at a site, you seem to be ready for scrolling. In the email client, that will be the case, too. However, you will scroll through the list of entries instead.

Free modern email newsletter template. (Source: litmus)

The effects of the attention economy also support the significance hierarchy. What you definitely want to communicate always goes at the beginning. Journalists train to exhaustion to write texts that can be shortened from the bottom on up, without damaging their central message.

Optimally, when placing links, they should only be links to your own website. SEO aspects can just be ignored here. If you have space, you should set plenty of links.

To make the newsletter perceptible as a personal message, you should not go for multi-column layouts. Naturally, an email is successful in story mode. The message is mediated from top to bottom, only interrupted by one or a few calls to action.

Further Reading

(The article was initially written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web

Navigation Design: Is the Vertical Menu the New Best Practice? - 23 février, 2018 - 11:00

Before yelling “no”, at least think about the new smartphone generation. The trend is increasing the device’s height, but not the width. Don’t you think that we need to make use of the viewport in a different way? Does this throw the horizontal menu off the map?

Horizontal Navigation – an Old Standard Up For Suspension

Horizontal navigation has been considered a best practice for years. As long as the aspect ratio resulted in the width of the browser window being higher than its height, this didn’t just make sense, there was more or less no other option. In conjunction with drop-down menus, as we know them from the design of desktop software, horizontal navigation seemed like the means of choice.

The main advantage was the fact that the position and characteristics didn’t force potential users to think. Those using Windows, macOS, or Linus, know the horizontal menu. A century ago, people were already experimenting with different placements. Left or right page border in the vertical ordinance, or horizontal at the bottom, sticky or not – it is not that easy to set limits to the creativity.

Especially for the right-sided vertical, and bottom horizontal navigation, there are good identical reasons. The most important pro factor is the easy accessibility of the individual menu elements with the mouse, as long as you’re right-handed. With touchscreen controls, the same thing applies for the accessibility with your right thumb. Thus, under iOS, you’ll almost exclusively find bottom horizontal menus, which do have their own disadvantages, though (keyword: higher, not wider).

Last but not least, many studies showed that the human is a creature of habit and that the upper horizontal position is unbeatable. Regarding that topic, also read our article on the best practices of page navigation.

Smartphones Revert the Aspect Ratio

Now, we’re in a different situation, though. We’ve been using smartphones for about ten years now. Their share when it comes to web usage continues to increase. And on devices with a reverted aspect ratio in comparison to a desktop device, other navigation concepts can make sense.

(Website: Oxford House / Screenshot: D. Petereit)

Until now, breaking down existing navigation concepts starting at a defined resolution was considered the best practice. This is where the hamburger icon established itself.

Now if we’re forced to turn horizontal navigation into vertical navigation anyways, why wouldn’t we use the vertical variants exclusively? It seems like an increasing number of creatives is asking that question. Realizations of this design approach can be found more and more often.

This is not even about turning the hamburger menu into the standard, but more to define the vertical menu as a standard. In modern desktop apps and some system tools, like Mail from Windows 10, you’ll also find the vertical menu approach – at least in addition to the horizontal menu bar. Oftentimes, a vertical pictogram bar is used, which either triggers functions right away or opens to the right by clicking the respective icon.

Mail from Windows 10 consistently uses vertical navigation, supported by a small horizontal icon menu on the bottom left. (Screenshot: D. Petereit) Advantages of Vertical Navigation

But permanently visible page menus are becoming increasingly more common as well. This goes well with the material design trend or Microsoft’s Fluent approach. Tiled grids look much better with navigation tiles. They attract more attention than the rather plain horizontal menus of the noughties.

After all, attention is just what navigation needs. At least if your website is designed in a way that makes users go through your – planned – navigation patterns.

(Website: European Music Incubator / Screenshot: D. Petereit)

Vertical menus on the left side of the page come with several other advantages as well. The average reader first looks at the beginning of the page and then proceeds to scan the left section. This is called the F-pattern. Aside from the horizontal navigation, vertical menus also match this pattern. Thus, vertical menus definitely are not a worse choice than horizontal ones.

If the vertical menu is not hidden behind a hamburger icon, it stays visible at all times and does not require any cognitive processes by the user. The previously mentioned aspect of scanning allows for the fast absorption of the given navigation options.

Additionally, the length of a vertical menu can be near infinite, while horizontal ones are limited by the window width. Scrolling as a utilization scheme continues to assert itself. Why shouldn’t we use this for navigation elements?

Disadvantages of Vertical Navigation

Of course, the vertical navigation is not free of downsides. The main one is a purely subjectively objective one. It’s the tenacity of the users. This significant habit preference is the main reason as to why the vertical navigation has not established itself a lot earlier. Tenacity is hard to get rid of.

From a technological point of view, we are right before a paradigm shift that may turn this argumentation on its head.

(Website: Studio Paradise / Screenshot: D. Petereit)

Text-based navigation is difficult since the usage of as few words as possible is recommended, to avoid wasting too much space. Here, a compromise between legibility and font size is inevitable. This is a good reason for a flyout menu, which is a menu that places itself over the screen from left to right via an overlay. A compromise could be a permanently visible icon bar.

The near infinite space downward could make designers and their clients not focus on the display of the most important navigation paths, and just give an own navigation item to every single element, no matter how irrelevant it may be. In the end, this neither helps the client, nor the potential user.

From a design point of view, it is very important which type of website the vertical navigation is considered for. Online magazines won’t be able to benefit from a vertical navigation on the desktop. Here, the sticky header with a horizontal navigation is far better. Portfolio websites, or other websites with rather low content volume, on the other hand, could definitely follow the trend.

This menu style used to be popular in the nineties. (Website: Artifact Property / Screenshot: D. Petereit) Conclusion: Navigation Wants to be Seen

What the trend actually shows, aside from the almost logical repositioning due to altered aspect ratios, is that navigation generally does not like to be hidden. Concepts, like the hamburger menu, are mere compromises that are accepted as long as there is no proper alternative.

The popular sticky header in the horizontal navigation already shows that the user likes to keep an eye on available options. Instead of hiding the header, the exact opposite has been established over the past years. Now, constantly carrying along the navigation at the top of the screen is the norm.

While the previous best practice with a horizontal menu on the desktop, and a vertical menu via hamburger on mobile is a viable solution, real designers with aspirations will always prefer consistent solutions, if possible. It is obvious that this consistency should always be achieved based on the lowest common denominator. This lowest common denominator is visibly changing, however.

If we need proof, we just take a look at the current smartphone flagships, like the Samsung Galaxy S8, the LG G6, or the OnePlus 5T. These devices provide more screen, exclusively by increasing the screen height and keeping the width identical for the most part. This design will be established comprehensively in 2018. Doesn’t this logically reinforce the trend towards vertical navigation?

What’s your stance on the placement of the page or app navigation? Left, right, top, bottom – which position is the best?

(The article was originally written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Catégories: News dév web
S'abonner à agrégateur - News dév web


Une question, une remarque ?
Une demande de devis ?


A propos...

Yves Bresson, ingénieur en informatique, consultant freelance, spécialisé dans le développement web (CMS, PHP, Laravel, Ajax, jQuery, Bootstrap, HTML5, CSS3) et d'applications mobiles (iPhone, Android). Voir le profil de Yves Bresson sur LinkedIn