S'abonner à flux
THE magazine for webworkers and site owners
Mis à jour : il y a 35 min 55 sec

Stay Organized: The 10 Best Cross-Platform Calendars

24 mars, 2017 - 09:00

One important tool for every human, and especially for web workers, is the calendar. A majority of the daily organization is done on them – and not just on a single device such as the paper planner from the old days.

It is important that appointments and tasks are correctly displayed, and kept up to date on every device, such as notebook and smartphone. For Apple users, this is simple, because the Apple operating systems take care of that themselves. But by now, there are good and elaborate solutions for Windows and Android as well. Today, I will introduce you to the best cross-platform solutions, so that you stay organized, and don’t miss any appointments.

Note that I wrote „cross-platform.” This means that you won’t find any apps here that are exclusive to one platform. The minimum precondition to be featured here was the availability of a web app.

Once Upon a Time: Apple’s iCal is Now Called Calendar and Looks a Lot More Modern.

What Makes for a Good Calendar / Taskmanager Solution

Nowadays, the average creative does not work on a single device anymore. Instead, aside from the computer or notebook, smartphones or tablets are used as well. Thus, the first, and most important requirement is a fast and reliable synchronization of appointments and tasks across all used devices. A clear structure is just as important. You have to be able to find your way quickly. It also wouldn’t hurt if there were the option to share appointments and deadlines with others.

We’ve taken a look at a couple of solutions from these points of view. Here are the results:

Sunrise Calendar

Sunrise was a promising solution until it was taken over and discontinued by Microsoft. The servers have been resting since mid-2016. Now, a few features are supposed to be directly integrated into Outlook. I have not seen anything on that as of right now. For the sake of melancholy, I’ll still leave the Sunrise Calendar in this article for a while. (ahe)

Microsoft Outlook

Microsoft Outlook has been a thing for a solid twenty years now, and it has never been free of charge. Ever since replaced the previous free mailers Hotmail and Live Mail, the overall image is differentiated. Outlook as a program is still charged for Windows computers. You can either buy it for about 135 Euro, or rent it with the rest of the Office365 series. If you do that, it will cost you 69 Euro a year, while giving you access to all Office products, as well as one Terabyte of online storage on OneDrive. With Dropbox, storage alone would be more expensive, which was the reason why I switched from Dropbox to OneDrive, by the way.

However, if you don’t want to spend any money, you could also use the Outlook web app just like the mobile apps that are available for Android, iOS, and Windows smartphones. Outlook also integrates Mac and Google calendars, letting you build some type of news and appointment center that works via the web, and on your mobile devices.

Microsoft Outlook for Mobile: Android on the Left, iOS on the Right

I use Outlook as my default mail client on both iOS and Android. I am still not exhausting the software, though. I could also use it to manage my appointments. I also have them integrated, so I get a complete overview in Outlook. The only thing I don’t do is managing them in there, but that’s personal preference. For me, the reason for that is that I use the Google apps on the desktop, so on mobile devices, all I need is a good overview of the data.

On iOS, I mainly use Outlook for its ability to separate the few relevant from the masses of other messages. I have disabled notifications for other messages, making sure that iOS will only notify me when there are important mails. In the other case, using the iOS mail app, I would get a notification every couple of minutes. Annoying.

Microsoft Outlook: Web App

Outlook definitely belongs into our overview. Even the free version provides enough comfort and synchronization options to meet higher standards. By the way, if you also need a desktop version to access the information, you can just use the built-in programs on macOS. Under Windows, use the mail app and start the calendar app from there. All of that works very smoothly. (dpe)

Wunderlist Wunderlist: Landing Page

Speaking of Microsoft, we might as well take a look at Wunderlist as a cross-platform taskmanager solution. Wunderlist was also swallowed by the company from Redmond, but, at least for now, it didn’t suffer the same fate as the Sunrise app. Instead, the task manager from Berlin is still being operated in the same way as before. Aside from the free version, there is a Wunderlist Pro for 4.49 Euro a month that contains slightly expanded functionalities for powerusers. I have never reached these limits.

Wunderlist shines with its extremely broad platform support since the beginning, and nothing has changed about that. There are native apps for macOS, Windows, Android, iOS, and Windows smartphones. You can also integrate bookmarklets for Chrome, Firefox, and Safari, or install a Chrome extension. Wunderlist is seamlessly integrable into Microsoft’s Outlook.

Wunderlist: No Matter Which App You Use. The Look is Always the Same.

Aside from all the native options, Wunderlist can also be used as a web app – it basically doesn’t get more flexible than that. Especially in conjunction with Outlook, Wunderlist displays all of its strengths to the fullest, but users of other systems and services shouldn’t hesitate to use it either. (dpe)

Kin Calendar

The Kin Calendar is currently in a beta stage which is only accessible via invite. According to the developers, the creation of this solution directly relates to the vanishing of the Sunrise Calendar. Because of that, it is no surprise that Kin strongly orientates itself towards the faded role model in terms of design.

Kin Calendar: Pretty, But Still Very Rudimentary.

At the current moment, Kin is no real alternative to other solutions mentioned in this article, even for people like me, who do have an invite. Sure, Kin looks fantastic. All interactions are smoothly animated, and there are some integrations with services like Trello, or Wunderlist already. Visually, Kin is a stunner. But there’s not much else here yet, and no mobile apps either.

If, however, the speed of innovation should keep going at this pace, Kin may soon rise to become one of the stars of this article. (dpe)

Google Calendar

Google delivers a classic amongst the cross-platform calendar solutions. Google Calendar can be synchronized with Android and iOS perfectly, and even the Mac calendar is usable in conjunction with Google Calendar. Of course, there are apps for both Android and iOS. Additionally, iOS and Mac users can use Google Calendar with their native calendar solutions after a simple configuration. Windows users either get to use the web interface or synchronize Google Calendar with the Thunderbird extension Lightning. The Microsoft solution Outlook is also fully compatible with the Google Calendar.

The good thing is, that users can share their calendars, both publicly and with selected people. One peculiarity is that it’s possible to subscribe to the Google Calendar via feed. Furthermore, you get to embed the calendars in websites, a feature that not a lot of services have to offer. Now, it’s almost natural that you get to invite other people to events. (ahe)

Screenshot Web View

Screenshot Android App

© Google is not a calendar app, but a task manager. The paid app is easy to use and perfectly synchronizes on all devices. There are apps for Android and iOS respectively, there is a particular extension for Chrome, and a web interface.

The to-do lists can be shared with friends, family members or colleagues. Share the buying list with your partner, plan an event with your friends, or simply keep track of an occupational project. can be integrated into Gmail via extension, chiming into every email to provide task options. (ahe) Cal

Probably due to the large success of the task manager app, the creators of decided to put out a calendar to go with the task planner. This one has the simple name Cal and seamlessly ties into the look of

This video only shows the Android App. However, it is mostly identical to the iOS version both visually and functionally. In contrast to itself, there is no web app, at least for now. Cal is available for free as well.

The catch is, that Cal is not an actual calendar, but can only be used as the frontend for a calendar that you have set up somewhere else. For example, you get to manage your Google Calendar using Cal. That means, if you don’t use a calendar service yet, Cal is not an alternative for you.

Cal by The App is Pretty, No Doubt.

Cal only gets you full utility when using it together with the task manager, which is why you can, and should, connect the two services. If you don’t do that, Cak will repeatedly annoy you with the recommendation to do it.

When using Cal, it is very clear that the developers’ main focus was the design. This caused decisions that are questionable in some spots. Of course, it looks a lot better when only one day is visible. But sometimes, an overview over an entire week, or at least an agenda view would be a lot more helpful. Cal doesn’t provide either. Instead, you get the most beautiful dialog for adding new appointments on the market. (dpe)


Todoist is celebrating its tenth birthday in 2017. By now, almost 50 people are working on the service that recently welcomed its 10 millionth user. Todoist had its own approach from the very beginning, its own idea of task management. I don’t know if, or how often the team has had internal discussions about adding a calendar to the task management. Anyway, this has not happened yet, and after ten years, I wouldn’t expect it to.

So the first thing we notice when looking for a calendar is that there’s no calendar. In Todoist, the display of tasks is generally done in lists. Here, there are time-related lists like “today” and “following seven days”. In there, you’ll also see the days with no tasks assigned to them, so, with a lot of fantasy, you could use this view as a calendar. Of course, how you use Todoist is your thing. You could just enter all appointments as tasks, even though it was not meant to be done that way.

One key strength of Todoist is its extensive platform support. No matter which mobile device you use, there’s an app. Native apps are also available for Windows and macOS, even though the web app was still completely sufficient to me. I don’t use a native Todoist app on desktop devices. Instead, I use the web interface exclusively.

On top of all the apps, there are several extensions available for Todoist, allowing users to integrate Todoist into Gmail or Outlook, for instance. I also like to use the browser extension that allows me to add the website I just visited as a task.

Visually, Todoist is reduced to the absolute minimum, making working with the service very simple and focused. Todoist has been doing everything that is now being preached regarding design for ten years already.

Todoist: Lots of Whitespace and a Clear Design. (Photo: Todoist)

My favorite feature is the option to enter appointments using natural language. For instance, when typing “Tomorrow morning at 8 am”, Todoist will enter the appointment correctly. The same thing goes for setting up returning appointments via “every Monday at 8 am”, for example.

Overall, Todoist offers a matured package that doesn’t leave much to be desired. Of course, this also makes it easy to delegate tasks and manage them in a team. Segmented projects and sub-tasks allow for much higher clarity within complex task relations. All of these features are available for free.

However, if you want to work with comments, or sort tasks via tags and filters, you need a premium account. This one comes in at a reasonable 28.99 Euro a year. You can inform yourself about the different plans here. (dpe)


Jorte is a calendar from the land of the rising sun which should explain the playful, corny design to the western eyes. Jorte is available for smartphones under iOS, Android, and Windows, as well as a web app called Jorte Cloud. Regarding the looks, all types of bad taste are supplied, with even a cinnamon-like design being selectable.

Regarding functionality, Jorte orientates itself towards proven concepts from the analog world, such as the idea of a Filofax. The app covers notes, appointments, and tasks all at once, making it an excellent choice for the daily routine. Similarly to Google Calendar, external calendars can be integrated into Jorte, so that you always see when the next school vacation or holiday is, as long as you have publicly available calendars integrated. You can also share your calendars with a team or even publicly. There are no further options, such as e.g. delegation.

While the web app runs smoothly, the mobile apps are what will be the most fun to the fans of this calendar. Here, you get to directly add photos to appointments, while being able to choose from a large variety of different icons and fonts. If you like it…

To turn off the ads in Jorte, you have to pay 3.99 USD a year. If you are a fan of playful designs, you can get a large variety for 1.99 USD a month. If you want to tie Evernot to Jorte, that will cost 2.99 USD a month for the premium plan. (dpe)

SmartDay – Collaborative Appointment and Task Manager

SmartDay by Leftcoastlogic considers itself to be a one-stop shop for appointment and task management of real people. It wants to organize appointments, tasks, notes, and projects alike and comprehensively focuses on collaboration. Thus, comments can be written on each task and every appointment, tasks can be delegated, and projects shared. The smart thing about SmartDay is supposed to be that, if you want to, your tasks can automatically be scheduled inbetween your other appointments.

SmartDay is available for the web as Here, it is free and mainly meant as a synchronization hub for the macOS, iOS, and Android apps. While using the web app is free, you will have to pay 9.99 EUR for the macOS, 4.99 EUR for the iOS, and 3.64 EUR for the Android version. The prices are a one-time payment, not a subscription.

Fruux – Contacts, Calendars & Tasks

Fruux, a startup from Münster in Germany, has set their goal to synchronize everything with everyone in realtime. Thus, fruux is used with the apps that we already know and love. The synchronization solution is not tied to a particular operating system; it is simply meant to work with everything. No matter if you use Windows, Linux, macOS, Android, or iOS. Share your calendar with friends, create a team address book, or work out other things you’d like to share. All information you entrust fruux with is stored on their internal cloud on European servers.

After signing up for the free basic account, you’ll be asked to synchronize your devices and application, which is done pretty quickly and easily. This is only needed once, and after that, fruux takes care of the work and keeps all connected devices synchronous. In general, contacts, calendars, and task lists can be synchronized.

After that’s done, fruux can be used on any device in any place. In the free basic version, it is possible to synchronize two devices.

If you need to synchronize more, or if you want to enjoy fruux’ advantages with your team, you have to choose one of the premium accounts.

The Pro account is affordable at 4 EUR a month. This lets you synchronize up to tem devices or applications. This way, you also get to share things with others as often as you like. (ahe)


Particularly in the area of cross-platform calendars and task managers, there’s a need for development. In my opinion, the best solution in our small test field was the Sunrise Calendar. Unfortunately, it has taken the way of all flesh.

The second app that sets itself apart from the masses is, which I find very exciting. No costs, and reduced to the basics – but only for task management. However, the app Cal, by the same developer, does an insufficient job at completing the package.

Google Calendar, on the other hand, could use some further development and thought. Google’s designers should take another look at it. Of course, the Google Calendar is not bad regarding functionality, no doubt.

Microsoft Outlook stands out here, as it is possible to integrate it with many services. For example, you could manage your Google Calendar with Outlook.

For appointments, I use the Google Calendar, and for tasks, I use Todoist. What are you using?


Related Links

Google Calendar

Microsoft Outlook


Kin Calendar

Cal by





Catégories: News dév web

10 Fancy Free Magazine Themes for your WordPress

23 mars, 2017 - 10:00

Magazine themes are getting increasingly more popular. They look nice and offer a lot of information directly on the landing page. As they are not only suitable for news websites, but also being used in more and more blogs, today, I picked ten really fancy and cool free magazine themes for your WordPress. Surprise your readers with a new look.

You Probably Won’t Know These Themes Yet

I didn’t take the easy route, as I wanted to surprise you with themes that you probably don’t know yet. Themes made by quite unknown developers that do a really good job. All the themes are beautiful enough to be worth being presented here.

Lite and Pro Versions of the Magazine Themes

Today, you can get free versions of most themes via the official WordPress theme index. In a lot of cases, the functions of the themes’ free lite versions will be enough. And if you happen to really need the entire feature variety of the pro version, that’s not a bad thing either, as the prices for professional themes have decreased over the past years.

If there are pro versions of the presented themes, I’ll also list the price, as well as the link to the full-fledged theme.

1 – Metro Magazine by Rara Theme

Download on WordPress | Demo | Pro Version: 59 USD

2 – Magazine Plus by WEN Themes

Download on WordPress | Demo | Pro Version: 49 USD

3 – Clean Magazine by Catch Themes

Download on WordPress | Demo

4 – MagCast by Theme Horse

Download on WordPress | Demo

5 – Smart Magazine by Qaiser

Download on WordPress | Demo

6 – Numinous by Rara Themes

Download on WordPress | Demo | Pro Version: 59 USD

7 – Simple Perle by Nudge

Download on WordPress | Demo | Pro Version: 49 USD

8 – Monograph by Ilovewpcom

Download on WordPress | Demo

9 – Synapse by Rohit Tripathi

Download on WordPress | Demo | Pro Version: 45 USD

10 – NewsAnchor by Athemes

Download on WordPress | Demo | Pro Version: 39 USD


Unknown developers create beautiful themes, with some of them being much more appealing than the popular themes by – better known developers. Personally, I like the Metro Theme the most. Its clear design does a great job at setting itself apart from the masses.

Catégories: News dév web

E-Learning: How to Expand Your Knowledge Independently

21 mars, 2017 - 10:00

Every vocational field is undergoing constant change. Especially technological evolution and digital trends often cause significant changes. If you want to stay up to date while keeping up your daily stint, there are several different e-learning offers, which are powerful tools that let you educate yourself no matter the time or place.

Aside from countless free video tutorials and online classes, there are plenty of professional suppliers out there as well, using the internet’s possibilities and the according technological equipment to pass on their knowledge. Whether it’s about tips and tricks on web design, necessary knowledge for founders, or branch specific changes and expert knowledge – a lot can be found via e-learning portals.

Boom of Online Learning Programs

Today, it has become natural for most of you that information or tutorials on all possible topics are available on the web for free. However, the more specific or exclusive the knowledge becomes, the more often you will have to pay for an according learning program. The term lifetime learning becomes increasingly relevant these days, as spending the entire work life in the same company is not usual anymore. Every new job comes with different challenges, and the digital offers can help you gear up for the new job.
Specialists on the topic have discovered the digital options, and offer free learning videos or digital training and webinars. Several startups were able to get going with this type of business model since the demand for computer-based learning content is still high.

In 2015, the worldwide sales volume of mobile learning sat at 8.7 billion USD. For 2017, a volume of 12.2 billion USD was predicted.
Source: Ambient Insight

But companies from all kinds of different branches started using the web increasingly more often, spreading knowledge or tutoring their employees. If your job has something to do with particular suppliers or brands that play a relevant part, this is a good way of gaining information on this section, like new technology, or certain standards.

Different Systems

A distinction between synchronous and asynchronous learning is drawn. For the first one, the learner has to be online at the same time as the lecturer, to take part in the advanced education program. In many situations, it is advantageous to have an experienced go-to person that can answer questions, as well as take care of each student individually.
With asynchronous learning, a teacher or lecturer is either not live and simultaneously present during the learning unit, or the content is passed on via video. The autonomous development of knowledge via didactically rehashed classes is possible as well.

Here, the advantage is that the learning units can be completed whenever there’s time. This allows for the gain of new knowledge on the user’s tempo without a compulsory curriculum. Additionally, it is possible to compile different content or learning modules based on the desired topics or the individual needs.

Extensive Supply From Professional Suppliers

With many businesses, those willing to pay for advanced training opportunities will profit from the interaction between several different media options. Aside from learning videos, other content will be available for the class participant to work out on his own. Accompanying exercises, case studies, or tests, but also communication options, or replies to individual questions make for an elaborate education offer. Often, the content is well-prepared didactically, and comes with many advantages:

  • Different Preparation of the Content for Different Types of Learning
  • Learning is Time- and Place-independent
  • Self-determination of the Learning Speed and the Respective Learning Content
  • Unlimited Repetitions Possible
  • Costs are Mostly Lower

By now, there is a market of heavily specific offers. Since the digital network allows for a wide range, there’s a tutorial or webinar on pretty much any topic. Especially the latter ones give you the option to pass on unique experiences, which was not possible that way before. In a live stream, entrepreneurs talk about how they raised their company, which stumbling blocks they had to deal with, and which solutions were or weren’t helpful for the different problems. First-hand insider knowledge becomes a practical means of education thanks to digital technology.

Because of that, there are good offers available even for content that could not be learned via scholastic channels. Particularly for founders and young entrepreneurs, content on company foundation, individual case examples, or information on branch-specific characteristics are imperative and can be found digitally on different platforms.

Due to the high range, the webinars or online classes are worth it even for single persons. The more people sign up, the lower the price for the offer can be, without having to forgo turnover. A high number of participants generates a good income, especially when it comes to the so-called MOOCs (Massive Open Online Course).

Motivation and Self-Initiative

Those choosing an e-learning offer at least show a certain level of self-initiative. This is definitely needed in order to actually profit from a class or tutorial. How in-depth the content is learned and repeated to memorize it long-term is up to your motivation. To go all the way through a longer education unit, the motivation mustn’t drop. Varied content with interactive modules may help here. Many topics are designed in a way that users get to consume them in small steps. This way, gaining knowledge or selecting the units that are needed to solve a particular problem is possible even with limited time.

The lack of personal supervision causes problems for many people when using an offer where a tutor or lecturer is not present. With classes that were designed for learning alone, the lack of social contact often has negative effects. The acquired knowledge can not be exchanged, and there is no additional transfer of knowledge. Some portals balance this via other offers, like a homework chat, or moderated discussion forums, in which the participants get to talk about the different topics.

Microlearning Trend

Lots of learning content is prepared in small units, allowing users to choose what’s interesting at that moment. With the digital mediation of micro-content, for example, knowledge blocks for the exam preparation are made available so that it is possible to repeat and learn them in stages. For that, there are plenty of options for the educational presentation. Playful methods with questions and answers, similar to a quiz, are a possibility as well.

Tips For Selecting the Right Offer

Different criteria have to be kept in mind when choosing the appropriate offer. Many professional businesses give users the option of a trial course or provide some content for free. This way, users get a first-hand impression of the quality. This also lets them find out if the available classes meet the personal requirements. The following traits are characteristics of a good learning offer:

  • Clearly defined learning content and goals
  • Clear structure and target-group oriented content
  • Appropriate class duration, preferably multiple short stages of about ten minutes for self-learning classes
  • High-quality didactic preparation with sensible use of multimedia elements
  • Additional class and accompanying material, like worksheets and exercises to solve online or download
  • High audio and image quality of video lessons
  • Displayed image content matching spoken text
  • Note form summary of the learning content at the end
  • Visual and verbal explanation of circumstances

At some professional educational providers, it is also possible to purchase certificates that go along with some advanced training offers. However, most of the time, this is only possible for classes with attendance at specific times and is connected to a final exam.

For example, the European Business Competence License (EBC*L), and several language certificates are obtained this way. Aside from the nationally or internationally comparable degrees, some businesses also make out a company-specific certificate as proof for your participation. Depending on the reputation and popularity of the educational provider, this type of license may leave a good impression in a résumé.

Catégories: News dév web

2016 Revisited: Best Resources for Web Developers – Plugins, Tools and Solutions

20 mars, 2017 - 10:00

One of the easiest ways to add to your website some outstanding features is to find and apply a proper plugin.

For example, there is a ton of sites out there that leverage dynamic effects for giving each section a pleasant entrance. To obtain the same result, you can opt for an AOS plugin that stands for “Animation On Scrolling.” It has a bunch of tiny effects in its arsenal. Simply add necessary classes to the desired “div” and your interface will get a subtle touch of dynamics and user experience a lovely cutting-edge feel. If you need a parallax that is still popular these days, then there is a great solution called Parallax.js or Jump.js. The same goes to incorporating little enhancements like enjoyable pop-up modal windows, rich tooltips or full-screen videos: there are time-tested methods to adopt. Even such things as duotone effect, particles animation, or responsive navigation can be worked into your project just with several simple manipulations. You do not even need to get to the bottom of the technique – just enjoy its benefits; plugin with its carefully encapsulated functionality will do all the heavy lifting. In one word, there is a solution to any problem all you have to do is to search a little. Though, of course, in some cases, these searches may be pretty exhaustive.

To save you from such unfortunate outcomes, each year we assemble a list of 100 useful plugins from different areas that give you a freedom of maneuver and let you introduce the desired improvements to the interface. This year is no exception, and we have prepared a collection of free plugins that may assist you in adding dynamic effects, creating animations, applying CSS-based filters to images, and much more.


Creator: dariel_noel.
License: MIT.


Creator: Rishabh
License: MIT.


Creator: Michal Sajnóg
License: MIT.


Creator: Michael Cavalea
License: MIT.


Creator: David Aurelio
License: MIT.


Creator: Oleg Solomka
License: MIT.


Creator: Daniel Lundin
License: MIT.


Creator: Liudas Dzisevicius
License: MIT.


Creator: Indrashish Ghosh
License: MIT.


Creator: Una Kravets
License: MIT.


Creator: Alan Chang
License: MIT.


Creator: Artur Arseniev
License: BSD 3-clause.


Creator: Jon H.M. Chan
License: MIT.


Creator: Krasimir Tsonev
License: Read the License.

Picnic CSS

Creator: Francisco Presencia
License: MIT.

Intense Image Viewer

Creator: Tim Holman
License: MIT.


Creator: Zingchart
License: MIT.

Loud Links

Creator: Mahdi.
License: See the LICENSE file for license rights and limitations (MIT).

jQuery FormBuilder

Creator: Kevin Chappell
License: MIT.


Creator: jakiestfu
License: MIT.


Creator: Michael Villar
License: MIT.


Creator: Grant Skinner
License: MIT.


Creator: Ben Howdle
License: MIT.


Creator: Francisco Presencia
License: MIT.


Creator: Humaan
License: MIT.

Mobile Editing

Creator: Ben Pines
License: Declared as Free, no proper license given.


Creator: Colin Keany
License: Declared as Free, no proper license given.

Free CSS Generator

License: Declared as Free, no proper license given.


Creator: thoughtbot inc.
License: Declared as Free, no proper license given.


Creator: Peter Ramsing
License: MIT.

Bootstrap 4 Classes List Reference

Creator: Bootstrap Creative LLC
License: Declared as Free, no proper license given.


Creator: Jeferson Koslowski
License: MIT.


Creator: Alexander Manfred Pöllmann.
License: MIT and SIL OFL 1.1.

DIV Table Generator

Creator: wwweeebbb
License: Declared as Free, no proper license given.


Creator: Alexander Schmitz, Chris Thoburn, Jorik Tangelder
License: Declared as Free, no proper license given.


Creator: dnp_theme
License: MIT.


Creator: Max Huang
License: Apache License Version 2.0.


Creator: Adam Draper
License: MIT.


Creator: Cornelis G. A. Kolbach
License: Read the License.


Creator: dntzhang
License: MIT.


Creator: Cam Wiegert
License: MIT.


Creator: Christine Cha
License: MIT.

Creator: Logan Nickleson
License: Non-commercial use.


Creator: CodersClan and Veed.Me teams
License: CC0 1.0 Universal.


Creator: Benjamin Blonde
License: MIT.


Creator: Palantir Technologies.
License: MIT.


Creator: YongWoo Jeon
License: MIT.


Creator: Dollar Shave Club Engineering.
License: Declared as Free, no proper license given.


Creator: Ben Briggs
License: MIT.

Creator: Tim Moreton Jr
License: MIT.


Creator: Josh de Leeuw
License: MIT.


Creator: koalyptus
License: MIT.


Creator: Palantir Technologies
License: BSD.


Creator: Jonathan Suh
License: MIT.


Creator: Yoshua Wuyts
License: MIT.


Creator: Analytical Graphics, Inc. (AGI) and Bentley Systems.
License: Declared as Free, no proper license given.


Creator: Metafizzy
License: open-source, commercial, and OEM.


Creator: Takeshi Takahashi
License: Declared as Free, no proper license given.


Creator: KnightLab
License: Mozilla Public License Version 2.0.


Creator: Michael Cavalea
License: MIT.


Creator: Lauren Waller
License: MIT.


Creator: Vincent Garreau
License: MIT.

okayNav jQuery Plugin

Creator: VPenkov
License: MIT.


Creator: Jonny Strömberg
License: MIT.


Creator: Claudio Holanda
License: MIT.

Tasty CSS-animated hamburgers

Creator: Jonathan Suh
License: MIT.


Creator: Ciaran Walsh
License: MIT.


Creator: Knut Melvær
License: Declared as Free, no proper license given.


Creator: Shogo Sensui
License: MIT.


Creator: Richardson Dackam and numerous contributors
License: MIT.


Creator: Adem Ilter
License: Read the License.

SweetAlert 2

Creator: Limon Monte
License: MIT.


Creator: Viljami Salminen
License: MIT.


Creator: Jordan Scales
License: MIT.


Creator: Ali Shakiba
License: MIT.


Creator: Lugo Labs
License: MIT.


Creator: Afshin Mehrabani
License: Read the License.


Creator: Polar Notion
License: Declared as Free, no proper license given.

Flexbox Patterns

Creator: CJ Cenizal
License: Declared as Free, no proper license given.


Creator: Greg
License: MIT.


Creator: Tyler Nickerson
License: MIT.


Creator: Will Stone
License: MIT.

Simple Grid

Creator: Zach Cole
License: MIT.

Flexbox Grid

Creator: Kristofer Joseph
License: Apache License, Version 2.0.


Creator: René Tanczos
License: MIT.


Creator: jhey tompkins
License: MIT.


Creator: Sebastian Müller
License: MIT.


Creator: Ryan Sandor Richards and contributors
License: MIT.


Creator: Almende B.V.
License: Apache 2.0 and MIT.

Responsive Nav

Creator: Viljami Salminen
License: MIT.


Creator: Federico Zivolo & Contributors
License: MIT.


Creator: darsain
License: MIT.


Creator: Patrik Affentranger
License: MIT.

Image Hover Effects

Creator: Michael Young
License: MIT.


Creator: Anna Migas
License: MIT.


Creator: Anna Migas
License: MIT.


Creator: Felice Gattuso
License: MIT License, CC BY 4.0.

Progress Bar.js

Creator: Kimmo Brunfeldt
License: MIT.


Creator: Dimitris Krestos
License: Apache License.


Creator: Tyler Childs
License: MIT.

Catégories: News dév web

How to Find the Perfect Font For Your Web Project

17 mars, 2017 - 10:00

Reading text on a lighted display has become part of our daily routine. Web fonts have established themselves, and more and more content is read on tablets or mobile devices. This raises the bar on font quality on different displays. Nonetheless, most fonts used today were not designed for a digital environment. Font drafts from pre-digital times are often optimized for onscreen usage using technological means, like hinting, for example. But onscreen optimization has to start much earlier!

I have compiled a few characteristics that improve the readability on screens. When looking for a well-made font for onscreen texts, pay attention to these aspects:

Open Counters, Generous Tracking (Fonts Left to Right: Tuna, Garamond, Arial and Fira)

For small font sizes, counters, the non-printing insides of the letters, quickly fill up, creating dark spots in the font’s gray level, capturing the reader’s attention, and thus, hindering the reading flow. To keep the non-printing white spaces visible on small font sizes, as well as allowing for a well-visible light incidence, open apertures, and a large x-height in relation to the ascenders are helpful.

Generous Tracking and Wide Letters

Pay attention to the pitches! Tight, slim fonts are suitable for headings and high font sizes, but fonts need more space in a running text. The individual characters need to be wider, in order for the white space within a glyph to be large enough. Generous pitches avoid clashes between the characters, while clear word spaces ease the forming of word groups when reading quickly.

Unique Letter Shapes (Fonts Left to Right: Tuna, Garamond, Arial and Fira)

Unique letter shapes may be the most important criterion of them all! If the characters are too similar, a word has to be read multiple times. When the word image is not clear enough, reading takes a lot more time, especially when it contains known difficult candidates such as “I” and “l,” or “B” and “8”. Because of that, the design needs to have a certain shape variety when it comes to glyphs, without affecting the harmony of the entire character set.


Too many details blur the appearance of the running text sizes; they interrupt the letter’s basic form, which is important for quick identification – clarity improves the word image.

Hairlines Get Lost Easily (Serif Fonts: Tuna, Garamond, and Bodoni)

Low Contrast and Sturdy Serifs

A common problem of serif fonts on screen are thin lines. Hairlines get lost easily under bad printing conditions, or lighting from behind, as the letters seem to crack, and fall into segments. Sturdy serifs and a low stroke width contrast, but also serif fonts can be designed this way.

Arcs Approximated to the Rectangle

Most fonts that work under bad conditions when printed, also look good onscreen, but some criteria are especially significant for the screen, and are directly or indirectly related to the display on the pixel grid. The “edgier” a curve, the better it fits onto the pixel roster. Thus, arcs should be approximated to the rectangular shape as much as possible, which also leads to a larger counter.

The Letter’s Manual Hinting Information (Font Tuna)

Fonts are based on vectors but have to be displayed as pixels on screen. Normally (without hints), the computer takes care of this automatically, without the designer having an influence on it. During hinting, information is deposited in the font, telling the computer how the font should be displayed in the pixel grid. With the TrueType technology, these instructions can even be defined for every single pixel size (Delta Hints).

Especially with small font sizes and low resolutions, this drastically improves the readability. It’s worth taking care of this process manually, and not relying on the automatic hinting of the font design software.

When vectors need to be converted onto a small pixel grid, it is helpful when horizontal and vertical elements have the same stroke width. Since this is the case for most non-serif fonts, the rumor that serif fonts are less suitable for the screen is very persistent. But many serif fonts have a stressed horizontal axis with massive horizontal elements as well, making them an equally good choice for the screen.

If you want to find out how Alex Rütten and I used the traditional broad quill writing style to increase the onscreen readability of our new font “Tuna,” or simply want to test the web font, take a look at this microsite: Tuna Typeface.

About the Author

Felix Braden lives in Cologne and works as a font designer and art director. On his website Floodfonts you can find a diverse array of free fonts to download. His commercial offerings are distributed by Fontshop International, URW++ and Volcanotype and are available through MyFonts. His most successful font so far is named FF Scuba and was one of the winners of Communication Arts’ Typography Annual 2013. It also found wide-spread perception due to its listing in several best-of overviews.

Catégories: News dév web

14 Free WordPress Themes For Your Website

16 mars, 2017 - 10:00

MH Themes from the German city of Frankfurt is one of the most successful theme providers of its country. Not only do they offer paid themes, but they are a treasure chest for friends of free WordPress themes as well. MH Themes is mainly known for the fantastic MH Magazine Theme, which is currently being used on our sister magazine Dr. Web.

But this is far from all. 14 free themes are waiting for you to discover and use them.

Go to the free themes here

MH Themes is a »Pro Theme Provider.«

The business model of theme providers has changed drastically lately. Previously, we had premium theme providers that only offered one or two themes for free, trying to sell the rest for more or less high prices. One of the most popular ones has been WooThemes (now known as WooCommerce).

Pro theme providers offer all their themes as Lite versions in the official WordPress theme index. These Lite versions come with fewer functions than their respective Pro versions. If you want access to all functions, you have to buy the theme.

The Advantage is Obvious

The advantage for you as a consumer is that you don’t have purchase a pig in a poke anymore. You get to try the themes beforehand. Chances are high that you won’t even need the pro version. Because of that, I will share with you a more detailed look at the themes from MH Themes.

All themes are well usable for magazines, personal blogs, news sites, and some even work for corporate websites. Within all of them, the code quality is very high.

The MH Magazine Lite and Its Child Themes

The MH Magazine is the most popular theme by the Frankfurt company. Here’s a short video introduction:

The difference between the theme’s Lite and Pro version:

Theme Name MH Magazine lite MH Magazine Theme Demo Demo Demos Get started Download Purchase Price Free View Pricing Responsive Layout Extended Layout Options Site Width 1080px 1080px / 1431px Second Sidebar Widgetized Homepage Template Total Widget Locations 12 26 Custom Widgets 4 (basic versions) 23 (full versions) Custom Menu slots 1 5 jQuery News Ticker FlexSlider 2 with Touch Support Built-in Breadcrumb Navigation Built-in Social Buttons Related Posts Feature Advertising Options Theme Options very basic Color Options to change the color scheme Custom Google Webfonts Typography Options to change fonts and font size Extended Features Customer Support

You get a lot for a price of a few bucks. But the lite version also offers functions that will be sufficient for many people.

Nine child themes are available for the free variant of MH Magazine.

1 – MH TechMagazine

Download | Demo

2 – MH SportsMagazine

Download | Demo

3 – MH FoodMagazine

Download | Demo

4 – MH NewsMagazine

Download | Demo

5 – MH UrbanMag

Download | Demo

6 – MH CampusMag

Download | Demo

7 – MH FeminineMag

Download | Demo

8 – MH TravelMag

Download | Demo

9 – MH Biosphere

Download | Demo

Additionally: 13 Free Lite Themes

Aside from the MH Magazine Lite theme, there 13 more entirely free themes at MH Themes.

1 – MH Newsdesk Lite

Download | Demo

2 – MH Edition Lite

Download | Demo

3 – MH Squared lite

Download | Demo

4 – MH Purity lite

Download | Demo

5 – MH Joystick lite

Download | Demo

6 – MH Cicero lite

Download | Demo

7 – MH Elegance lite

Download | Demo

8 – MH Impact lite

Download | Demo

9 – MH Corporate basic

Download | Demo

10 – Diamond

Download | Demo

11 – ClesarMedia

Download | Demo

12 – Tuto

Download | Demo

13 – Skin

Download | No demo available.

Overview of All of MH Theme’s Free Themes


Although you would have to pay for the full versions, the supply of free themes has become very big. For many people, the free versions will be sufficient, so these people can benefit. There have never been so many professionally designed themes for free before. Even at MH Themes alone, the supply is huge, so a couple of readers should already be able to find their dream theme.

Catégories: News dév web

Best of 2016: 100 Free HTML/CSS Themes

15 mars, 2017 - 10:00

Bringing your concept to life is a thorny path that as a rule consists of at least three main stages: prototyping a PSD draft; converting it into an HTML/CSS version spiced up with JavaScript; and further transformation of a template into a CMS theme or enhancing it with server-side functionality usually realized with the help of PHP and SQL. Though this last phase is optional since it depends on the result you want to achieve.

But what if you need a website as soon as possible, and also you lack in design skills, there is only one way out – skip the first stage and get straight to the second one. The more so, there are numerous HTML/CSS websites on the wild that can boast of a beautiful design, harmonious aesthetics, and enjoyable atmosphere. The most pleasant thing that they are available free of charge; though a good rule of thumb is to credit the author by leaving a backlink to his/her website. With such a template at your fingertips, all you have to do is to adjust it to your needs, customize its appearance according to your brand identity and improve it with some extra features. And you are ready to move forward saving your precious time.

Today we will look through 2016. It was rich in free stuff among which was a bunch of professionally-crafted HTML/CSS templates. We have put together various excellent themes. They will give you a head start in different undertakings whether you want to create a simple portfolio with a small showcase or a standard landing page for promoting your product.

New Age

Creator: BlackrockDigital
License: MIT.


Creator: Start Bootstrap
License: MIT.


Creator: html5up
License: Creative Commons.


Creator: html5up
License: Creative Commons.


Creator: html5up
License: Creative Commons.


Creator: html5up
License: Creative Commons.

Genius – Minimal HTML Theme

Creator: Khai Tawng
License: Declared as Free, no proper license given.

Ultimate Multi-Purpose Bootstrap Site Template

Creator: KeenThemes
License: Free for personal and commercial use.

GerduKreatip – Agency Portfolio Theme

Creator: Andreansyah Setiawan.
License: Declared as Free, no proper license given.

6 HTML themes by KeenThemes

Creator: KeenThemes
License: Free for personal and commercial use.


Creator: Start Bootstrap
License: MIT.

Clean Blog

Creator: Start Bootstrap
License: MIT.

Sharwadarma – Onepage Parallax Template

Creator: Andreansyah Setiawan
License: Attribution-NonCommercial.

KapukAlas – Multipurpose template

Creator: Andreansyah Setiawan
License: Attribution-NonCommercial.

AitOnepage – Responsive Parallax One Page Bootstrap Theme

Creator: keenthemes
License: Declared as Free, no proper license given.


Creator: keenthemes
License: Declared as Free, no proper license given.


Creator: keenthemes
License: Declared as Free, no proper license given.

GreeceTour Theme

Creator: RespoTheme
License: Declared as Free, no proper license given.


Creator: RespoTheme
License: Declared as Free, no proper license given.

MyApp Landing Page

Creator: RespoTheme
License: Declared as Free, no proper license given.

Box Portfolio

Creator: Ahmed Eissa
License: Declared as Free, no proper license given.

New Providence Theme

Creator: Denis Shepovalov
License: Declared as Free, no proper license given.

Mountain King: HTML Bootstrap template

Creator: Theme in the Box
License: Declared as Free, no proper license given.

Apollo: One page HTML template for photographers

Creator: Bucky Maler and Jakub Kowalczyk
License: Declared as Free, no proper license given.


Creator: Designstub
License: Creative Commons Attribution 3.0 License.


Creator: Designstub
License: Creative Commons Attribution 3.0 License.


Creator: Designstub
License: Creative Commons Attribution 3.0 License.


Creator: Designstub
License: Creative Commons Attribution 3.0 License.

Industrial Theme

Creator: Anpsthemes
License: Declared as Free, no proper license given.

Psychiatrist – HTML/CSS template

Creator: Anpsthemes
License: Declared as Free, no proper license given.

Transport – HTML/CSS template

Creator: Anpsthemes
License: Declared as Free, no proper license given.

Constructo Theme

Creator: Anpsthemes
License: Declared as Free, no proper license given.


Creator: RespoTheme
License: Declared as Free, no proper license given.


Creator: RespoTheme
License: Declared as Free, no proper license given.


Creator: Designstub
License: Creative Commons Attribution 3.0 License.

Arcadia Portfolio Responsive Template

Creator: Themeforces
License: Declared as Free, no proper license given.


Creator: Jenn Pereira and Robert Berki.
License: Free for personal and commercial use.


Creator: Designstub
License: Creative Commons Attribution 3.0 License.

Landing Zero

Creator: Bootstrap zero
License: Free for personal and commercial use.


Creator: Reza Haque
License: Free for personal and commercial use.

Pouseidon – Free HTML5 Model Agency Bootstrap Template

Creator: Bootstrap Themes
License: Free for personal and commercial use.

Travel Theme

Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.


Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.


Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.


Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.


Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.


Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.


Creator: FreeHTML5
License: Creative Commons Attribution 3.0 License.

Orion – Bootstrap Coming Soon Template

Creator: Designstub
License: Creative Commons Attribution 3.0 License.

Material Dashboard

Creator: Creative Tim,
License: Personal use only.


Creator: Bucky Maler and Sergey Melnik
License: Declared as Free, no proper license given.


Creator: Tanislav Robert
License: Declared as Free, no proper license given.


Creator: Amine Akhouad
License: Declared as Free, no proper license given.


Creator: TemplateOcean
License: Free for personal and client use.

AppKit Landing

Creator: Xiaoying Riley
License: Creative Commons Attribution 3.0 License.


Creator: Xiaoying Riley
License: Creative Commons Attribution 3.0 License.


Creator: TemplateOcean
License: Free for Personal and Commercial Use.


Creator: TemplateOcean
License: Free for Personal and Commercial Use.

Accounting Theme

Creator: anpsthemes
License: Declared as Free, no proper license given.


Creator: TemplateOcean
License: Free for Personal and Commercial Use.


Creator: TemplateOcean
License: Free for Personal and Commercial Use.

“Synthetica” One Page Website Template (HTML, Sketch)

Creator: Peter Finlan
License: Use it freely but please don’t republish or redistribute the template.


Creator: Ahmed Essa
License: Attribution-NonCommercial-NoDerivatives.

Vojon – Responsive Restaurant HTML5 Template

Creator: Towkir Ahmed Bappy, Revol Themes, Shah Zobayer Ahmed
License: Attribution-NonCommercial-NoDerivatives.

Spa – Beauty Free HTML Template

Creator: UI Spark and Revolthemes
License: Free for personal and commercial use.

Mart – eCommerce Theme

Creator: Shah Zobayer Ahmed, Shah Yusuf Ahmed
License: Attribution-NonCommercial-NoDerivatives.


Creator: Symu
License: Declared as Free, no proper license given.

Free Landing Page Template

Creator: Nils Huber
License: Declared as Free, no proper license given.


Creator: Pixelosaur
License: Declared as Free, no proper license given.


Creator: Zea
License: Declared as Free, no proper license given.


Creator: Graphberry
License: Free for personal and commercial use.


License: Declared as Free, no proper license given.


Creator: Dude’s Goods
License: Attribution.

Akane HTML5 Template

Creator: Dude’s Goods
License: Attribution.


Creator: Steven Han
License: Attribution-NonCommercial-NoDerivatives.

Free HTML Template

Creator: Themeunix
License: Declared as Free, no proper license given.


Creator: Ulziibat Nansaltsog
License: Attribution-ShareAlike.

Tight Glass

Creator: Almaz Bisenbaev
License: Attribution-ShareAlike.

Soho HTML Template

Creator: Pixelbuddha team
License: Declared as Free, no proper license given.

Howdy HTML Template

Creator: Erwin Aligam
License: Declared as Free, no proper license given.

Magnet Portfolio Template

Creator: Khai Tawng
License: Declared as Free, no proper license given.

Kenakata – Free eCommerce Bootstrap Template PSD & HTML

Creator: Shuvo Khan
License: Attribution-NonCommercial-NoDerivatives.

Avion Landing Page

Creator: Glen Dragon
License: Attribution.

Tasnm – eCommerce bootstrap template

Creator: tasnimakter
License: Declared as Free, no proper license given.

Deli – eCommerce HTML Template for Fashion Shop

Creator: sarah
License: Declared as Free, no proper license given.

Gready Responsive Html Template

Creator: Madhu Mia
License: Attribution-NonCommercial-NoDerivatives.

Ink House

Creator: Cecilia Brum
License: Only with Author’s permission.


Creator: Val themes
License: Attribution-NonCommercial-NoDerivatives.


Creator: Revol Themes
License: Free for personal and commercial use.


Creator: Revol Themes
License: Free for personal and commercial use.


Creator: Revol Themes
License: Free for personal and commercial use.

Responsive Portfolio Mockup

Creator: Abhijeet Das
License: Apache License v2.0.


Creator: Steven Han
License: Attribution-NonCommercial-NoDerivatives.


Creator: KeenThemes.
License: Declared as Free, no proper license given.

Conference Theme

Creator: uicookies
License: Creative Commons Attribution 3.0 License plus Attribution.


Creator: uicookies
License: Creative Commons Attribution 3.0 License plus Attribution.


Creator: uicookies
License: Creative Commons Attribution 3.0 License plus Attribution.

Proximity – Free HTML5 Under Construction Website Template

Creator: uicookies
License: Free for personal and commercial use with Attribution.

X-Corporation Theme

Creator: uicookies
License: Attribution.

Sample Landing Page

Creator: Brian
License: Declared as Free, no proper license given.

Catégories: News dév web

CleanTalk Does Spam Protection the Right Way

14 mars, 2017 - 10:00

Every site owner knows spam. Spam comes in at increasing speed as soon as you open some kind of form to the public. Fighting it is vital for your business as well as your health. CleanTalk does not come on prescription but is affordable nonetheless.

CleanTalk, a Cloud-based Spam Protection Service

CleanTalk is a direct competitor to Automattic’s Akismet. The most obvious difference is the price. CleanTalk comes in at 7.50 EUR per year, which equals about 8 USD, while Akismet costs 5 EUR per month, adding up to 60 EUR per year. Quite a difference, and one that will most likely be high enough to mark the difference between having a site protected or not. In this regard, CleanTalk helps make the web a more secure place by keeping protection prices low.

Another difference is that CleanTalk is not only available as a WordPress plugin but for a wide variety of different platforms, such as Drupal, Joomla, Magento, Typo3 WooCommerce, vBullletin and more. On top of that, you can use it in PHP, Perl, Python, C# and other programming languages via its own API.

Mobile applications for iOS and Android let you access the statistics dashboard while on the road. Thus it’s no exaggeration to say that CleanTalk is a one-stop shop for everyone who is seeking an all-round spam protection solution.

CleanTalk Uses Smart Recognition Methods Instead of Plain Captchas

CleanTalk uses no captchas, does not ask questions, does not ask you to count animals or solve math tasks. It seems they don’t do all of that modern stuff that the protection industry came up with. And that’s a good thing.

Instead of making it harder for your visitors to interact with your site, CleanTalk steps back into the shadows and does its work entirely unseen. The concept’s core is the cloud. Every form entry on your site is sent to CloudTalk servers where it gets checked against a massive database, not only of known spam IPs and email addresses but also of improper language and other inappropriate wording. Furthermore, CleanTalk checks whether a comment really deals with the post that it is supposed to sit under. You can as well populate your private blacklists or block people from certain countries entirely.

CleanTalk claims that they reach an accuracy of 99.998 percent in automatic mode. As CleanTalk comes as a software as a service (SaaS), it has a dashboard for you that does not leave a lot of questions unanswered. All the form requests are logged in the cloud, and elaborate statistics let you explore who sent what from where.

CleanTalk on WordPress

Getting CleanTalk running on WordPress is as simple as installing a plugin from the repository. Just head over to your WordPress Dashboard > Plugins > Install. Search for “cleantalk” and install it. This is the plugin you will want to look for:

WP-Appbox: Spam Protection by CleanTalk (no Captcha Anti-Spam) (Free, WordPress) →

Upon activation of CleanTalk, you can have an access key issued to you by simply submitting your email address and the URL of the site you want to use CleanTalk on. Set which forms shall be protected and you’re done. From now on you will not return to the WordPress backend for your spam statistics. Instead, you will head over to the CleanTalk dashboard where you will find all the nasty details to the spam that keeps being submitted to your site.

One Step Further: SpamFireWall

If you want to take this thing even one step further, you can opt to activate CleanTalk’s SpamFireWall. The feature is a free add-on to the CleanTalk plugins and also available via API calls. Once activated each and every visit to your site will be validated against the CleanTalk database. Does the visitor IP find a match in the spam database the visit will not happen, thus taking load off of your server. With more than two million definitely known spam IPs this might well make a notable difference.

Moderate Prices and High Value

It should have become clear by now that CleanTalk is a service you should try for yourself. Their anti-spam offerings are diverse, but all are rather cheap. Take a look at that pricing table:

Even should you run ten websites on CleanTalk you would only pay 43.10 EUR per year. Compare that to any other service out there and try to find a better offer.

Start your 7-day free trial and see what CleanTalk can do for you.

Catégories: News dév web

How to Free Yourself From Creative Block

13 mars, 2017 - 10:00

Every creative worker knows blocks. In the worst case, the creative block, you won’t get anything done at all. But what happens when a block basically focuses on a single area? Designer Ben Evans portrays his case of UX-burnout.

It was a time full of work. He had to get an app going, and had dealt with questions of user experience (UX) for several months. Once the goal was achieved, the tension fell off, and he felt a deep fatigue, which he thought was just general exhaustion.

However, when Evans sat down to describe his condition, he realized that words were basically flowing from his fingers. So it could not have been a creative block. He still had enough ideas and energy; he just didn’t want to have anything to do with UX design. Thus, he created the term UX-burnout.

Now, you could argue that it’s not relevant how a single designer diagnoses himself. Nonetheless, I think this process is fascinating, as almost every creative worker should already have experienced this condition, without naming it like Evans did. From self-observation, I also noticed phases in which I was able to develop creative solutions but unable to put a word onto paper.

Evans found six types of different problems that could have been responsible for his special exhaustion situation. If you want to read more on the topic UX burnout, I recommend Ben’s article over at Boxes and Arrows.

Some of the mentioned problems can be generalized, and be converted to all types of blocks. Let’s take a closer look.

You Don’t Have a Clear Mind Anymore

This sounds like a simple problem, and that’s what it is. If we’re stuck deep inside of complex projects, at one point, the details will overwhelm us even if they are not as relevant. In the end, we miss the forest for the trees, beginning, and end of the project sink deep into a bunch of small and smaller problems.

On top of that, there’s the constant information overflow, which is hard to tame even in a normal situation. We feel as if we were being buried alive. Who’s supposed to be able to come up with creative situations in that situation?

The only way to solve the problem is discipline and distinction. Knowing our psychological limits, we should accept not being able to stay with it 24/7.

Working by following the Pomodoro technique helps us not to be overloaded permanently. It works like this:

  • Take a task, and work on it for an uninterrupted 25 minutes.
  • Take a short break, and do something that is not related to work. Like getting a coffee, for example.
  • Now, go for the second 25-minute session.
  • After that, take another short break. After a total of four sessions, meaning after 100 minutes, take a longer break, somewhere from 20 to 30 minutes long.
  • Then repeat.

During Pomodoro sessions, you don’t do anything else. Social media and emails are off-limits unless you started a session in which you want to get something done that requires you to use them. Even during the breaks, you don’t read any news, tweets, or something like that. You move away from the desk. Single-tasking is the most relaxing way of getting work done that I can imagine. And it doesn’t overload you.

Even with a lot of discipline, your environment won’t make this easy for you. Here, clear lines are a must. I know colleagues that put on gigantic and noticeable headphones, to show that they don’t want to be disturbed. Do whatever helps you dissociate yourself.

Also, read our “No Bullshit” Guide For Creative Workers on the topic.

You’re Out of Ideas

One could also say that your mind is not clear enough for you to create ideas again. Because of that, the previous tips still apply in the same way. But even if your head were somewhat cleared, this still wouldn’t guarantee new ideas were coming to you.

When the time comes, you need inspiration. But maybe, your situation is so bad that you need more than that. If that’s the case, read my article “Creativity Techniques For the Average Joe,” which also covers sleep, relaxation, and so on.

When it comes to inspiration, you’ll find tons of material for different creative jobs on the web, especially here at Noupe. However, inspiration can also mean applying the concept of remixing. Here, Evans justifiably refers to the book “Steal like an Artist” by Austin Kleon.

Basically, this is about you realizing that you can’t kick off creativity exclusively from the inside, but primarily from the outside. A human is not a Perpetuum Mobile.

Is it Supposed to be This Easy?

Yes, it actually is that easy. All other problems can be derived from the mentioned ones, and in the end, they are all homemade. If we didn’t let ourselves drift like that, especially by our environment, we would be able to swim more purposefully. It all starts with us accepting that we are not capable of doing everything forever. This creates structure.

Catégories: News dév web

Noupe Exclusive: 350+ Free Icons For Our Readers

10 mars, 2017 - 11:00

Icons are always useful. This is the same for both you and us. We got together with the vector acrobats from Vexels to create an icon collection with more than 350 pictograms that you can use completely for free, and for any purpose you want to. Enjoy!

Our icon set contains symbols for social media, general business applications, and all types of contact pictograms. For that, we have chosen the most up to date design variants. The symbols come in flat design, as line icons, in offset style, with long shadows, as well as sporting the newest material design. This should allow for the creation of all conventional designs. If you are not one hundred percent content with the pictograms, you can simply edit them yourself, as you not only get each icon as an individual PNG with the measurements 1200 x 1200 pixels but also as an individual SVG, as well as a layered Adobe Illustrator format.

This overview gives you an impression of what to expect:

An Overview of All Pictograms. (Overview: Vexels)

The download of the 18 megabytes heavy ZIP archive is not tied to any preconditions. All you have to do is attach the note “Designed by Vexels” to projects that you use the set in. After the download and unzipping of the archive, you’ll find a folder named ICONS on your local drive, in which the individual design variants are stored, divided into further subfolders.

Download the Zip archive now (18MB): 350+ Icons for Business and Contacts
Catégories: News dév web

BetterWebType: Free Course on Web Typography

10 mars, 2017 - 09:00

On BetterWebType, you can attend a free email class with ten lectures on better web typography. It’s completely free and run by Matej Latin, the creator of the Gutenberg starter kit.

Better Web Typography For a Better Web

This is the slogan that Matej Latin will welcome you with on his website BetterWebType. Regular readers of Noupe already know Matej Latin. About a year ago, we gave you an in-depth introduction to his project Gutenberg here.

Matej calls Gutenberg a “Meaningful Web Typography Starter Kit,” which means that, by using Gutenberg in our projects, we are always on the safe side, without needing to put in an extra effort. Gutenberg takes care of the basics by itself. The project was created based on Sass. This allows you to work with mixins, providing your designs with a level of flexibility that would not have been possible without variable markup.

While a starter kit can definitely help the clueless to avoid the roughest mistakes, solid knowledge is undisputedly better. Latin agrees with the founder of iA, Oliver Reichenstein, who said that web design is 95 percent typography more than ten years ago already.

To account for this aspect, Latin considers it necessary for web designers and developers to upskill in this section more than ever. To make this possible, Latin offers a free class on web typography.

BetterWebType is not a disguised acquisition scheme with reduced usefulness, but a full-featured, actually free class in ten lectures. There are no charged add-ons, expansions, or other tricks either. BetterWebType is and, according to Latin, will stay free.

BetterWebType Covers the Basics and Exceeds Them

BetterWebType already has more than 3,000 subscribers. It covers all basics, including the question how fonts should be selected and combined; a problem that many people don’t put enough thought into.

Other lectures deal with ligatures, small caps, quotation marks, vertical and horizontal rhythm, and a lot more. The lectures are sent to you via email. The class takes ten days, with you receiving one lecture a day.

BetterWebType: Who Learns What? (Screenshot: Noupe)

The reading effort for each lesson is about five to ten minutes. At the end of each, you’ll also receive more in-depth tips on what you learned. These can be articles, websites, or book recommendations. From time to time, you’ll also be asked to solve a task. How much time you end up putting into the class is up to you.

BetterWebType is made to allow both designers and developers alike to profit from it. Prior knowledge generally is not required, but complete cluelessness in HTML and CSS would definitely be a problem.

For the participation, it is enough to tell Latin your first and last name, as well as an email address. Obviously, the email address should be functional, as that is where the lessons will go.

Catégories: News dév web

Best of 2016: 100 Free Resources for Sketch

9 mars, 2017 - 10:00

Bohemian Coding are no longer newbies in the design arena. Over the years, they have matured, advanced and grown up, becoming a distinct player that offers a compelling toolset for prototyping purposes. Truth be told, their tool Sketch gradually conquers the World, winning over more and more followers.

And that is not surprising. Made with designers in mind, the application meets specific needs of the artists, providing flexibility on daily works as well as ensuring fast and efficient prototyping. It boasts of having a genuinely convenient and pleasant environment with a great asset of general features where creative folks can achieve the desired result without much pain. It focuses both on the functionality and user experience trying to strike a balance between these two thereby resulting in a harmonious lightweight but powerful instrument.

What’s more, thanks to a massive upsurge in popularity, and lots of ardent and keen artists that regularly contribute to the community, SketchApp has managed to bridge the gap between the application and novice designers. While the product still remains an exclusive product for Mac OS systems, anyone can feel and enjoy its potential. The Web is overpopulated with helpful stuff such as tutorials, guides and most importantly free extensions and resources including GUIs, icons, web templates, mockup devices, etc. to make your first steps in it. Free resources are going to be our today’s center of attention.

Our list consists of assorted graphical material presented in Sketch format that may come in handy in different tasks. Enjoy the roundup and share with us your thoughts. Do you prefer SketchApp? How often do you use it in your regular basis?

Flow chart Kit for Sketch

Creator: Greg Dlubacz
License: CC BY 4.0.

iOS 10 app icon template for Sketch

Creator: Josh Holloran
License: MIT.

Timesheet and statistics

Creator: Uzers
License: Declared as Free, no proper license given.

Exchanger Dashboard

Creator: Uzers
License: Declared as Free, no proper license given.


Creator: Maxime De Greve
License: Declared as Free, no proper license given.

Bold Blog Homepage

Creator: Luka Dadiani
License: Declared as Free, no proper license given.

Conversational UI

Creator: Dawid Wozniak
License: Declared as Free, no proper license given.

Design Studio Mockup

Creator: Mike Ivanchyshyn
License: Declared as Free, no proper license given.

Concept Detailpage

Creator: Zelah Hoekstra
License: Declared as Free, no proper license given.

User flow Assets

Creator: Emanuel Serbanoiu
License: Declared as Free, no proper license given.

Dashboard Sketch

Creator: Burak Erenoglu
License: Declared as Free, no proper license given.

Cloud App Lander

Creator: Luka Dadiani
License: Declared as Free, no proper license given.


Creator: Kevin Woodhouse
License: Declared as Free, no proper license given.

Web Wireframe Kit

Creator: Robowolf marketplace
License: Declared as Free, no proper license given.

iOS User Flow: Messages

Creator: STRV Design Team
License: Declared as Free, no proper license given.

Tomicons Iconset

Creator: STRV Design Team
License: Declared as Free, no proper license given.

iOS 10 GUI

Creator: Facebook
License: Declared as Free, no proper license given.

Craft Library

Creator: Talha Kaya
License: Declared as Free, no proper license given.

Native UI Kits

Creator: Myroslav Fanta, Source
License: Declared as Free, no proper license given.

Flexible Grid Ruler

Creator: Vitaliy Petrushenko
License: Declared as Free, no proper license given.

Favicon/iOS icon template

Creator: Marco ten Donkelaar
License: Declared as Free, no proper license given.


Creator: Cue Blocks
License: Declared as Free, no proper license given.

Ugly Kit

Creator: David Kovalev
License: Declared as Free, no proper license given.

iOS 10 GUI

Creator: Tushar Merwanji
License: Declared as Free, no proper license given.

Flat Landing Page

Creator: Andrei Dulcu
License: Declared as Free, no proper license given.

App Icon Template

Creator: Soren Clausen
License: Attribution.

Onboarding Screens

Creator: Alexey Matyushkin
License: Declared as Free, no proper license given.

SCENTixx – Perfume shop iOS app 

Creator: Robert Berki
License: Commercial use is not allowed.

1800 Free Minimal Icon Pack [20×20

Creator: Alexandru Stoica
License: Declared as Free, no proper license given.

Nippy – Free Sketch Landing Page

Creator: Srdjan Pajdic
License: Declared as Free, no proper license given.


Creator: Avocode
License: Declared as Free, no proper license given.

Starter Wireframe Templates

Creator: Mark Ludemann
License: Declared as Free, no proper license given.

Based UI Kit

Creator: Stream
License: Declared as Free, no proper license given.

Flag Kit

Creator: Viktor Kirichenko
License: MIT.

Facebook Analytics UI

Creator: Mike Finch
License: Declared as Free, no proper license given.

Black UI Kit

Creator: Lorenzo Perniciaro
License: Declared as Free, no proper license given.

Collection of Sketch Freebies

Creator: Serhiy Semenov
License: Declared as Free, no proper license given.

Google Inbox UI

Creator: Sam Mountain
License: Declared as Free, no proper license given.

4 Landing Page Templates

Creator:  Artem Tolstykh
License: Declared as Free, no proper license given.

Minimal UI Kit

Creator: Mohamed Kerroudj
License: Free for personal and commercial use.


Creator: Patryk Zabielski
License: Declared as Free, no proper license given.

UI Kit of a Music App

Creator: Ananason
License: Declared as Free, no proper license given.


Creator: rui paz, Vasco
License: Declared as Free, no proper license given.

Mobile UI Kit for Music Apps

Creator: Angelika Sosnova
License: Declared as Free, no proper license given.

Slides Resources

Creator: Designmodo
License: CC 4.0.

Chart UI Kit

Creator: Xer.Lee
License: Declared as Free, no proper license given.

Mini UI Kit 2

Creator: Awesomed
License: Declared as Free, no proper license given.

Carbon – Material Wireframe UI Kit

Creator: Panagiotis
License: Free for personal and commercial use.

Recipes App UI Kit

Creator: Alex Dapunt
License: Free for personal and commercial use.

Wireframe of web app, web site, and blog

Creator:  Lauralee Flores
License: Declared as Free, no proper license given.


Creator: Stefano De Rosa
License: Declared as Free, no proper license given.

100 Icons

Creator: icon54
License: Declared as Free, no proper license given.

Material Design Wireframe Kit v_02

Creator: Dan Shipley
License: Declared as Free, no proper license given.

Move | Mobile UI Kit

Creator: Kurbatov Volodymyr
License: Declared as Free, no proper license given.

Personal Landing Page

Creator: Designer Bundle
License: Free for personal and commercial use.

Fashion App Freebie

Creator: Designer Bundle
License: Free for personal and commercial use.

iPhone 7 Mock-ups

Creator: Designer Bundle
License: Free for personal and commercial use.

Social App Freebie

Creator: Designer Bundle
License: Free for personal and commercial use.

MagicMirror Freebie

Creator: emilie badin
License: Declared as Free, no proper license given.

Sketch Plugin Scripts

Creator: Thomas Seng Hin Mak
License: Totally free for any usage.

Sketch Charts and Graphs

Creator:  Dave Albert
License: Free for personal and commercial use.

Cosmic Discoveries

Creator:  Alexander Boychenko
License: Free for personal and commercial use.

Cleaning Order Sketch Process Free Icons 

Creator: Max Khomenko
License: Declared as Free, no proper license given.

Golden Spiral Grid Template Sketch

Creator: Abinash Mohanty
License: Declared as Free, no proper license given.

Oxygen – Starter UI Kit

Creator: Srdjan Pajdic
License: Declared as Free, no proper license given.

Portal iOS Pack

Creator: Igor Savelev
License: Declared as Free, no proper license given.

Subtle Devices

Creator: Hanson Wu
License: Declared as Free, no proper license given.

Vector Icons

Creator: Xiaoxue(Ellie) Zhang
License: Free for personal and commercial use.

Space UI Kit

Creator: Rodrigo do Carmo
License: Declared as Free, no proper license given.


Creator: Bryn Taylor
License: Declared as Free, no proper license given.

SilveHype – Free Fashion Sketch Template

Creator: Michal Kozina
License: Declared as Free, no proper license given.

Apple Icons Set

License: Declared as Free, no proper license given.

UI Icons

Creator: Marco Lopes
License: Declared as Free, no proper license given.

Interstellar Home Page UI Theme 

Creator: Lucas Vallim
License: Declared as Free, no proper license given.

The Sketch Gem

Creator: Christian Krammer
License: Declared as Free, no proper license given.

Flat UI Delivery App

Creator: DEGRANGE Quentin
License: Free to use for commercial and non-profit use.

Landing Page Mockup

Creator: Mike Ivanchyshyn
License: Declared as Free, no proper license given.

Fugly UI Kit

Creator: Anton Chandra
License: Declared as Free, no proper license given.

130 Icons

Creator: Han Wang
License: Declared as Free, no proper license given.

Free Taxi Drive App – concept UI Kit

Creator: Oleksii Chernikov
License: Declared as Free, no proper license given.

MeshApp – flat mobile app landing page

Creator: Andrei Dulcu
License: Declared as Free, no proper license given.

Stripe Devices

Creator: Daniel Sofinet
License: Declared as Free, no proper license given.

Agency Website

Creator: Ali Sayed
License: Declared as Free, no proper license given.

Calendar UI

Creator: Dan Vineyard
License: Creative Commons.

App Landing Page

Creator: Omar Aly
License: Declared as Free, no proper license given.

Facebook Photos Redesign

Creator: Rahul Chakraborty
License: Declared as Free, no proper license given.


Creator: Sedki Alimam
License: Declared as Free, no proper license given.

Productivity Timer – Apple Watch UI Kit

Creator: Jaroslaw Ceborski
License: Declared as Free, no proper license given.

Social Leads App

Creator: Drew Andersen
License: Declared as Free, no proper license given.

Paypal Free Sketch IOS UI Kit

Creator: Flexi Blee
License: Declared as Free, no proper license given.

Minimalist iPhone Presentation Mockup 

Creator: Gavin Anthony
License: Declared as Free, no proper license given.

App Landing Page

Creator: UI/UX Assets
License: Declared as Free, no proper license given.

Music Player UI

Creator: Andrei Rotariu
License: Declared as Free, no proper license given.

Windows 10 Project NEON Groove Music UI

Creator: Chip Dong Lim
License: Declared as Free, no proper license given.

42 Mime Types

Creator: Sandro Tavares
License: Royalty free license for both personal and commercial use.

Facebook Share & Connect UI for prototype

Creator: Matthieu Laroche
License: Declared as Free, no proper license given.

Free Login Page

Creator: Mahisa Dyan Diptya
License: Declared as Free, no proper license given.

Fresh market app design

Creator: Mahisa Dyan Diptya
License: Declared as Free, no proper license given.

Tine Insane Icons

Creator: Rocco Barbaro
License: Declared as Free, no proper license given.

Order Status Page

Creator: Mahisa Dyan Diptya
License: Declared as Free, no proper license given.

Catégories: News dév web

Web Design: How to Guide Your Visitors Through Long Pages

8 mars, 2017 - 10:00

Websites are becoming longer and longer: the average site in Google’s top 10 of 2016 was about 3 A4 pages long. How can we navigate through these long pages?

The substance of a website URL is constantly increasing – regarding content and its length – and is always getting larger: according to the SEO tool provider Searchmetrics, a desktop site in Google’s top 10 of 2016 had an average of 1,500 words, with mobile sites sitting at about 1,000 words. With about 500 words per A4 page in standard font size (12) in Word, this results in two to three A4 format sites.

This content is coined by the aspiration for relevance: “holistic content,” like SEOs call it, is supposed to cover the topic for which we optimize a page (we don’t optimize for single search terms or keywords anymore) as extensively as possible. So, holistic optimization means addressing as many questions and possibilities within an URL, providing relevant content this way. However, this also means that we have to provide a new form of navigation for our users, making it easier for them to find their way, right?

Holistic Content Without Navigation

Of all things, the easiest reaction to extensive, holistic content is provided by THE design benchmark: Apple.

On the about 1,700 word long page on the iPad Pro, for example, there is no option to navigate faster between the sections and paragraphs, outside of scrolling. Certainly, this was done on purpose, keeping users on the page longer by making them surf more carefully, and making them find important content parts on their own. Apple can afford to do this because most of the customers are loyal fans, or at least willing to look through the page’s content.

Image Caption: Screenshot of

With (a lot) less popular brands, however, this would cause the bounce rate to become rather high, as users won’t find the content they’re looking for within their attention span, which, by the way, is an average of 8 seconds on the web. They are very likely just to leave the page undone.

The Solution: The Anchor Link

Let’s take a look at how the web’s strongest site approaches the topic: Wikipedia. The encyclopedia is the pioneer when it comes to holistic optimization. For years now, it has been showing us how to rank perfectly with one’s content.

Today, it is entirely normal for their users to reach the individual sections using a table of contents. In the case of Wikipedia, this is generated automatically, and gets users to single subheadings (h2 and h3) via anchor links:

Image Caption: Screenshot of

This anchor link navigation does not only make navigating between the single sections easier, but can also have a direct influence on the look of the so-called snippet – the website preview in the Google search results.


However, a table of contents is not always the optimal solution: it moves relevant information and (media) elements in the content area away from the viewing area of the users. Additionally, users that want to navigate between different topics always have to return to the beginning of the page.

Of course, we can say this again: brands or platforms like Wikipedia can afford to do this, but I also believe that the encyclopedia will have to change this with a redesign in the future, as otherwise, pages with better user reactions (so-called user signals), and more relevant information in the viewing area (“above the fold”) will contest the rank.

Navigation Transformation

In my opinion, due to the holistic contents and the demand for an optimal user experience, the menu of websites should not be limited to URLs anymore. Instead, it also has to offer a navigation within the respective URL via anchor links. Because I, as an SEO consultant, don’t have a design-related function, I often give three examples on how to solve that:

1. Separate Navigation

The easiest solution is the one above with the menu items aligned next to each other. I call this type of menu vertical array, as the arrangement also describes the so-called verticals. In marketing, verticals are application areas or branches. Each vertical represents an URL which is the optimized for the application or branch solution (the topic or the keyword).

The left (marginalia) column gets the anchor navigation. This creates the connection in a style similar to the current menu item. The reading direction from top left (logo) to bottom right (URL, navigation, then anchor navigation) makes the orientation easy as well (thus, no right-sided alignment of the anchor navigation).

I place the anchor links below each other (horizontal alignment) to create the connection to the actual content. Ideally, the anchor link menu items get highlighted while scrolling, or are animated similarly to the active URL link in the main menu, underlining the connection between menu and content.

There’s still enough room to place the most important call to action button (for the conversion optimization), and the second most important one (sharing button) in the header. Breadcrumbs (navigation paths), language selection, and search, as well as an optional back or scroll-up button, can be implemented too.

This navigation is well-suited for conservative pages with users that are still used to controls via an upper, and left-sided menu. However, things get more difficult when the navigation is realized responsively: then, the anchor links have to be integrated into the URL navigation.

2. Combined Vertical Navigation

A different way to combine URL and anchor links is to align everything vertically in the header:

The advantage is that it only takes up little space, leaving more room for the actual content. Whether a sidebar or the entire space is used for contents remains fully open, granting high flexibility.

This is mainly useful for the display on tablet PCs, and small browser widths. For my definition, this mainly affects blogs and consumer-oriented pages that serve the purpose of research and surfing. Here, couch surfers with tablets or users that have multiple browser windows open next to each other are more common.

The disadvantage of this navigation is, that not only a separate display is needed for smartphones, but also that the number of menu items and anchor links is usually limited.

Combined Horizontal Navigation

The last and, to me, most interesting solution is the combination of menu items and anchor links in the left column.

While it does require the content to be displayed in an appealing way even with smaller browser width, this comes with a bunch of advantages:

For starters, we can pursue a “mobile first” approach due to menu items aligned above each other: the navigation can be displayed in the same way on both desktop and mobile resolutions (ideally hidden under a hamburger icon for mobile users).

Furthermore, there is no limit on the number of URL and anchor links. Marketers and editors get to develop content that’s as long as they desire with many subheadings. The navigation follows the content’s storytelling and then leads to a URL-specific call to action button.

Disadvantage: even here, at one point, we are restricted in the number of links. To fight this, we only let the anchor links lock while scrolling.


Navigation with anchor links is still in its early stages, and (thank god) there’s no generally applicable solution. Nonetheless, I strongly recommend paying attention to this during the next web design or relaunch (and also following a few basic rules of performance optimization).

Aside from the better user-friendliness, the URL anchor link menu combination also offers the chance to better push comments, and ratings on a page, as these can be implemented directly within the menu as a call to action and conversion. Especially the combination of comments with star ratings provides additional chances to turn the web design into measurable success. This sets your website apart from the competition, making you gain a lot more visitors than you would gain without structured information.

Do you have other ideas on how to combine URL, and anchor links for holistic contents in a simple navigation? Are you already using something like that in your projects? Tell us in the comments!

Catégories: News dév web

Internet via Satellite: What We Have and What’s to Come

7 mars, 2017 - 10:00

Internet via satellite was already rising in popularity once a few years ago, but couldn’t establish itself due to high prices, poor data rates, and quickly accelerating cable connections. Where is the technology now?

Satellite Internet – Solution for Structurally Weak Locations

I remember calculating the cost for satellite internet and seriously thinking about getting a satellite access.

But that was more than ten years ago, during times where there was no broadband cable connection in rural areas. Fortunately, this is mostly different here in Germany, although, even here, there are some dead slow data links in some places.

By the way, back then, the satellite connection was a one-way connection. While there was a downstream, the upstream had to be created using a different technology – a very tedious set-up. Today, providers offer two-way communication, making it an actual, independent solution.

So, if you live out in the country, and your phone company’s consultant answers your question for fast internet with a sympathetic smile, you don’t have a lot of alternatives left. No matter whether it’s because of conviction or not, satellite internet belongs onto your radar.

Pros and Cons of Internet Access Via Satellite

One significant advantage of satellite connections is evident. You don’t need a phone line. All you need is electricity and a pretty clear view of the sky, as well as a place to install your dish aerial. Aside from the necessity of electricity, you are mostly independent regarding infrastructure and location. When living on a boat, for example, satellite internet should be a topic for you as well.

In the latter case, not even a 4G connection would be an option, but otherwise, you should definitely keep that in mind, too. But from my experience, the 4G structure is nowhere to be found in rural areas, just like a fast data line.

Today’s satellite internet plans are more flexible than they were in the past, providing custom packages with features that you consider to be important. The only model that you won’t find is an unlimited flat-rate. However, there are providers that offer an unlimited night option, for the data-intense surfing while others sleep.

An actual disadvantage is the poor latencies. Due to the large distance of about 35,000 kilometers between the satellites and our earth, there will be calculated latencies ranging from 500 to 700 milliseconds for a two-way connection. According to different practicians, the actual latency is around 1,000 milliseconds. For fans of ego shooters, this is completely unacceptable. Calmer minds are more likely to be okay with that.

Satellite Internet Generation X

Long distances to earth and the resulting poor response times are the main issues with today’s satellite internet. Thus Elon Musk’s company SpaceX attempts to remove this problem effectively. Starting in a couple of days, SpaceX wants to send a rocket into space every two to three weeks.

Website of SpaceX. (Screenshot: Noupe)

This way, a total of 4,425 satellites will be set up. This new generation of communication satellites comes with two advantages. For one, the orbit is supposed to be between 1,150 to 1,275 kilometers away from earth, which is expected to reduce the latency to values similar to cable connections of 25 to 35 milliseconds. The speed is supposed to be able to get to one gigabit per second. For another, the devices will become much smaller, and thus, cheaper. They will weigh less than 400 kilograms a piece, while current communication satellites weigh up to several tons.

Especially the planned number of satellites raises eyebrows, considering that there are only about 1,400 active satellites currently orbiting the earth. Not all scientists like this project as much as Musk.

SpaceX’ plans are soon to be realized, making them the next generation’s most ambitioned project regarding satellite internet. The conditions under which we can potentially profit from this are still unclear.

The plans of Mark Zuckerberg, founder of Facebook, are more conventional. He also intends to bring a satellite into space with his initiative With this conventional satellite, mainly the white-spot areas of Africa are supposed to be covered. The operator will be Eutelsat from France. Website.(Screenshot: Noupe)

The Californian business OneWeb, which just secured an investment of one billion from the Japanese conglomerate Softbank, is closer to SpaceX, and their plans to stuff the orbit with technology. OneWeb also plans to go into orbit, wanting to cover the earth with a total of 900 satellites. OneWeb creates the satellites themselves and names a production capacity of 15 a week. Thus, the 900 may be completed rather quickly.

Website of OneWeb. (Screenshot: Noupe)

According to the founder, Greg Wyler, all satellites are supposed to be installed in their positions until 2020. To start the service, a minimum equipment of 300 satellites is required.

Conclusion: Don’t Wait Now, But Expect the Future to be Exciting

If you want to get yourself a satellite internet access, feel free to do that right now. All other solutions are pie in the sky with a rather unclear perspective. The approach of SpaceX may be exciting and interesting from a technological standpoint. However, nobody can give you a reliable answer to the question when the project will be advanced to the point where they can actually supply you with an internet connection.

Catégories: News dév web

Icons8 Lunacy: How to Open Sketch Files Under Windows

6 mars, 2017 - 11:54

Lunacy is a Sketch file viewer made by pictogram factory Icons8. Lunacy runs smoothly while being completely free. There’s even a portable version.

Sketch: Great Tool, If it Wasn’t For This One Problem

Sketch by Bohemian Coding is a vector editor that has become an everyday tool for many web developers, replacing Adobe Illustrator. The newcomer’s strong focus on web developer needs is likely to be the main reason for its popularity. The subscription constraint as placed by Adobe as a factor probably is not to be underestimated either.

It could all be so easy if Sketch wasn’t available exclusively for macOS. This excludes a large share of the design community. The operators of the pictogram manufactory Icons8 did not want to accept that lack and created a viewer.

Lunacy Opens Sketch Files Under Windows

Using this tool, called Lunacy, you can at least open Sketch files. Advanced features are already being developed. You can copy the CSS for individual objects, though. The same goes for text.

As we can see from different comparison screenshots, the Icons8 team proves that display under Windows is very close to the macOS original. Differences are mostly based on the different display configuration of the two operating systems.

Example 1: Sketch File under Mac Example 1: Sketch File under Windows Example 2: Sketch File under Mac Example 2: Sketch File under Windows

Lunacy is a software that is available for free download and use. Keep in mind that this is an alpha version. In my tests, it crashed occasionally, but it worked correctly for the most part.

When installing Lunacy on your Windows computer, you can directly associate the file extension .sketch with Lunacy. The installation is not necessarily required, however. Icons8 also provide a portable version that functions autonomously from within an Exe file.

Lunacy in Action Icons8: Symbol Forge With Giant Supply

Icons8 have been a part of almost all of our symbol overviews here at Noupe, most recently, they were part of our Best of 2016 With 100 Free Icon Sets.

Generally, the entire pictogram range of Icons8 is completely free to use as long as you can settle for a size limit of 100 x 100 pixels in the PNG file format, and if you are willing to properly link Icons8 every time.

Other formats in all possible resolutions are exclusive to paying customers.

Catégories: News dév web

Jupiter: Premium WordPress Theme for Designers and Non-Designers

3 mars, 2017 - 10:00

It’s always a tightrope walk when a theme developer attempts to create a product for both the average page owner, as well as the professional web designer. Artbees Themes’ Jupiter, which is currently available in version 5, gets this done.

Jupiter can look like this, or completely different. (Screenshot: Noupe) Jupiter: Sold Since 2013

Jupiter is a pretty mature, while still actively developed theme. The developer studio Artbees Themes entirely focuses on WordPress as their design platform. In contrast to other studios, they don’t toss tons of themes on the market and have been sticking to their strategy of trying to cover the market with a total of two products for years now.

Both products are premium WordPress themes. The theme that today’s article is not supposed to be about is called “The Ken,” and is said to be an excellent choice for the self-presentation of the creative industry. At 49 USD, it is the cheaper of the two themes. According to Artbees Themes, more than 3,000 users have already chosen “The Ken.”

However, Jupiter, which Artbees Themes calls the only real multi-purpose theme on the market, is even more successful. The theme has accumulated more than 55,000 users already. Jupiter’s flexibility is mainly based on the fact that the 125 included, ready-made templates cover the majority of possible application areas out-of-the-box. I don’t know of any other theme with such a large, and ever-expanding range of templates at no additional cost.

And at 59 USD, the theme is not even expensive. If you keep in mind that this price already includes the license of the Visual Composer, which is a drag-and-drop page builder, Jupiter only nets at 25 USD. In any case, Jupiter is worth its price. In contrast to others, Artbees Themes don’t even ask for update fees. You pay the price of 59 USD once and receive all following updates for free.

You can tell that Artbees Themes is serious about Jupiter, simply because they have been continuously developing it since 2013. I have checked the numbers several times, since, these days, this type of commitment seemed so unlikely to me.

I was already convinced of Jupiter at this point. Anyone that isn’t convinced yet will definitely change their mind after taking a look at the feature set.

Jupiter 5: Completely Refurbished Codebase

In fact, Jupiter is well-suited to do everything you can, or can’t imagine. The developers put a lot of focus on keeping Jupiter extremely performant in all of its shapes.

Jupiter in Version 5. (Screenshot: Noupe)

As if Artbees followed our five-piece series on WordPress performance, they optimized all possible corners to get the last bit of speed out of the theme. They have even kept in mind to only load styles and scripts when needed.

It’s no surprise that Google PageSpeed gave them a rating of over 90 out of 100 for both desktops and mobile devices. That’s because the developers have taken and refurbished the entire codebase for Jupiter’s version 5. According to Artbees, every line of code was evaluated, and rewritten if necessary. A switch to a modular framework has been done as well. With that new foundation, it can deal with large amounts of data and changes better.

Jupiter 5 is Almost Entirely Adjustable

Artbees uses a method of Parallax Scrolling called “native Parallax,” with the rendering being done directly by the GPU. The 125 available templates make use of the function to different extents. The adjustment of designs is downright fun.

Overall, it’s the high flexibility regarding customization which lifts Jupiter 5 above the competition. This flexibility is also what makes this theme interesting for both page owners and web developers. While the page owner directly picks and configures one of the 125 templates until he’s satisfied, the developer can do a lot more with the given variety.

The large template portfolio is not the only way to turn the design into your own. I especially enjoyed the variety of different header styles. You can choose 18 different designs for the navigation header of your website. In contrast to what you’d expect from the name, you can implement it almost anywhere you want to. Jupiter’s designs even allow you to run a very appealing online shop.

One of Jupiter’s 125 Templates. (Screenshot: Noupe)

Beyond the fact that Artbees makes WordPress design much more comfortable, the developers came up with some unique ideas to further improve the user experience. For example, they implemented the category showcase. You assign a thumbnail to each WordPress category, and you instantly get an alternative way of presenting your content. The photo display does not require any additional plugins either.

If you want to add a price table to a product or service, you’ll be interested in the integrated “Pricing Table Builder.” Comfortably configure your pricing table from the backend.

Artbees also has fresh ideas for custom design. For example, you can use SVG shapes as containers for your icons, and also equip them with color gradients. Add color gradients to headings and buttons, if you feel like doing so. These are only the new features of version 5.

Before the release of the new version, Jupiter already had more than 100 readymade elements like sliders, photo grids, tabs, hero video, and image areas, carousels, accordions, and a lot more to offer.

Calling Jupiter a premium WordPress theme is an understatement. It’s more like a full-grown WordPress website builder. As such, it serves the target groups of ambitioned page owners and professional designers alike. We can well call it “made by designers for designers” while the ever-growing portfolio of professional templates keeps it also in the game for those who are seeking to get to results quickly.

Take a look for yourself! In the demo, you’ll find all included components behind the respective navigation item in the page’s header. But surf there when you have some time to spend. It will take a while to go through all there is to explore.

Disclaimer: This article is sponsored by Artbees Themes. The words are our own. Artbees Themes did not influence the content in any way.

Catégories: News dév web

WordPress Plugin: Flexible Forms with Form Maker

2 mars, 2017 - 10:00

Form Maker is the simple name of a not so simple plugin from the WordPress forge WebDorado. Form Maker lets you build flexible forms that also work on mobile devices via drag and drop.

Form Maker: Matured and Free

Form Maker, in its basic version, is a free plugin in active development. The current version on the market is 1.10.7. The compatibility of the plugin with the most recent WordPress edition is confirmed. The minimum requirements for Form Maker are WordPress version 3 and up, a PHP in version 5 and up, as well as a MySQL starting from version 5.

Here’s where to find Form Maker in the plugin repository:

WP-Appbox: Form (Free, WordPress) →

Form Maker’s not so secret power is that it lets you build any form within a simple drag and drop interface. Although the creation is so simple, the form’s functionality can be elaborate. For instance, Form Maker does not only allow you to send data, but it also makes it possible to directly write this data into a database. All form settings that you already know from PHP are available as dialogue options for simple configuration.

Even though this may sound flat, the creation of a new form is child’s play. After the installation of the plugin, which can either be done via FTP, or via install plugins in the backend of your WordPress by searching for WebDorado Forms, you’ll find another menu item in your backend navigation.

The Form Maker in the WordPress Backend

Under the menu item Form Maker, you’ll find a list of your forms with their respective WordPress shortcodes, as well as their PHP functions if you happen to want to integrate them somewhere where shortcodes don’t work. The yellow shift symbol opens a form, allowing you to edit it.

The blue plus button in the top left allows for the creation of a completely new form. Of course, forms can also be deleted from this list. If you happen to have such a massive amount of different forms, you may be happy that you can even find your forms via search terms. The average user probably would not lose track off his forms even without this function. WebDorado calls this overview the Manager.

Under the menu item Submissions, you access the database and have it display its entries, filtered by form. To do so, you have to configure the database storage for the respective form, because otherwise, Form Maker will only send to the accordingly defined email address.

The item Blocked IPs allows you to enter IP addresses that you want to block from filling in your forms. You’ll realize pretty quickly that there are legitimate application cases for this method.

Under Themes, you’ll find a bunch of pre-defined designs which turn out to be customized CSS files, which affect the look of your forms. If you know CSS, you can not only alter existing themes, but also create new ones. The creation of new themes is not visually supported in any way. You have to write pure CSS in a pure editor window.

By clicking on one of the grey stars in the theme overview, it will turn yellow, indicating that this theme will be used as the default for future forms. Of course, you still get to select a different theme in the individual form, but you’re not forced to do that if you have chosen a fitting default setting.

Last but not least, Global Options is where you find the input option for your Recaptcha keys, when working with this antispam method. This is also where you lodge the field delimiter for the CSV export of your form data.

Creating a Form With Form Maker

As I have described already, forms can be edited, or created from scratch in the Manager. If you work somewhat like I do, you may only want to create an entirely new form if there is absolutely no other way around it.

Thus, it’s a good thing that we are able to open existing forms to edit them, and then click the top right button labeled Save as Copy. Here, the entire layout remains, but entered content doesn’t.

If you have turned off the drag and drop functionality, you won’t simply move around form fields with the mouse anymore. Instead, you’ll now find a small editing bar on each form field, letting you change the position, as well as other parameters.

From this toolbar, especially the small, plain, yellow pen packs a punch. Clicking the symbol opens an editing window, within which you have full access to all parameters of the selected form field. In this rather complex example, the goal is to set up a rating scale for a product rating.

The process is not fully self-explanatory or intuitive, so it’s great that WebDorado has created this step by step guide to their plugin.

On the top right of the editor, you’ll find the item Form Options. Here is where you lodge the logic behind the form. A simple Paypal integration (paid) is available, for example. Program specific functions using JavaScript, and even conditional logic can be created with just a few mouse clicks.

Conditional logic means only displaying certain form contents if certain other form field were filled in a specific way. For instance, after the field male/female, the field How many pairs of shoes do you have? would not have to be displayed anymore, if the previous field was answered with female.

Form Maker: the Different Expansion Stages

Form Maker is available in four flavors. The free variant comes without any support, and a limit to seven fields per form. At least, you can create an unlimited amount of forms. You also have to forgo the Paypal integration, the file upload, as well as several other features.

Starting from Personal, you get the full feature set. The differences are related to the support for domains, as well as the support duration. For a one-time payment of 30 USD, Personal nets you six months of support for a domain. The Business plan gets you one year of support on three domains for a one-time cost of 45 USD, and the Developer plan offers twelve months of support on an unlimited amount of domains for 60 USD.

Considering the very reasonable prices, I’d definitely recommend the developer plan for web developers, while ambitioned single users should go for the business plan, simply because the support duration is twice as long as it is for the personal tariff.

Conclusion: Flexible Form Plugin Doesn’t Leave Much to be Desired

Form Maker is a premium WordPress plugin that is definitely worth its price. Even the highest price of 60 USD wouldn’t even get you a plumber for an hour, and if you go to Luigi’s around the corner with three people, that probably wouldn’t be enough either, and in the end, you’d only be full once.

If I had to criticize something, I’d probably mention the not fully matured design of the plugin. In some places, it does seem a bit casual, not very contemporary, but it works.

It’s important to note that good CSS knowledge can significantly improve the looks of the form. The integrated themes are pretty mediocre. But all in all, Form Maker definitely earns a recommendation.

Take a look for yourself!

Catégories: News dév web

SITE123: This Intuitive Homepage Builder Delivers Websites in No Time

1 mars, 2017 - 10:00

Today’s website builders are almost too complicated for the average user. SITE123 deliberately avoids the way of maximum freedom and feature overload, focusing more on quick, but at the same time professional results.

Are Homepage Builders Off Track?

First things first, I’ve been working as a web developer since 1994, and I pretty much know all the tools that have ever been relevant to our branch. Even in the very beginning, there were homepage kits already. But their results could clearly be distinguished from those a professional designer was able to achieve.

Geocities and Co. allowed inexperienced page owners to publish simple self-presentations on the web, those that wanted more than that went to professionals. And that’s the right thing to do, as the average customer may have a rough idea of what he wants to convey, but he has close to no knowledge of information architecture, or communication design.

Homepage Builder on Steroids: Feature Overload Where it’s not Needed

For a couple of years now, we’re seeing that homepage kits, which nowadays prefer to be called website builders, or online design software, have shown such a massive growth in features, that their target group is shifting. Increasingly more services try to cover both the typical consumer and the designer, acting as if one product could easily serve both groups. That’s nonsense, however.

A product for a professional designer has to provide both a variety of features and flexibility which even an ambitioned DIY page operator will only need on very rare occasions. “So what” is what you could say now, he’ll just use the features that he needs for his lower aspirations. But that’s exactly that wrong track that I’m driving at.

A page owner without a design background, which was the core target group of original homepage kits, doesn’t need a feature overkill. Instead, he needs a lot of guidance within the scope of best practices.

Digression: Android vs. iOS

It’s a bit like a comparison between Android, and iOS. Android clearly is the more flexible, more open system. It lets you do almost anything you want, and customize it infinitely. On a wayward path, you can even install malware on it. Android is a system that has to be learned. If you know how to use it, it is superior to iOS.

iOS, on the other hand, defines defaults, makes decisions for the user, and is only flexible within its own borders. It’s impossible to screw up the system. It’s not even allowed to download apps from outside the app store. This does restrict the usage, but it does it on purpose. According to the Apple philosophy, users get a system that is designed exactly the way it should be – made on the basis of expert knowledge.

Those that don’t agree with these decisions are almost exclusively the people that are fit enough to handle an Android responsibly. I have never heard a “default” iPhone user say that the system was too limited.

The Alternative Approach to the Multi-Functional Homepage Builder

Transferred over to our homepage builder topic, this means that it would be better for the “normal” users of this type of service, if the service operator defined more defaults based on his expert knowledge, instead of trying to make everything possible.

The interested page operator that may only view his page as part of his communication mix, and maybe not even as the strongest part of said mix would be better off if the homepage builder came with some professional knowledge that a designer would use to approach the project. If that was the case, the service could take the user by the hand, and lead him to the result by applying best practices of his branch.

This is where the self-proclaimed “easiest free website builder” called SITE123 comes into play. SITE123 speaks 15 languages, with English certainly being one of them.

How to Build a Website Using SITE123

The name SITE123 is to be seen as a promise. You are supposed to get to your own website as easy as 1, 2, 3. The process promises to be as simple as possible while still leading to professional results. The target audience includes private, but also commercial users that want to get their internet presence online quickly without any programming and design knowledge.

Let’s walk through the process together. First, we visit the service’s landing page. There, we click on the “Start Here” button in the top right corner, which immediately starts the creation process.

In the first step, we select a branch or application purpose:

In the second step, we assign a name to our website:

The third step is where we have to register. This can either be done the traditional way, using the name, email, and password or via OAuth using Google or Facebook:

If you opt for OAuth, you will have to add a few more information. Once done, SITE123 will generate a website for you:

At the end of this process, the SITE123 editor opens, providing a design suggestion, and a tour through the user interface, which is soothingly short, as there’s no focus on feature overload here.

On the left side of the browser window, we find a vertically aligned navigation that is divided into the areas homepage, pages, design, and settings, while also offering a preview and publishment options.

Every single menu item comes with a straightforward functionality. For example, the item “Homepage” lets you configure your homepage the way you need it to be.

Here, it’s possible to use a homepage layout that’s entirely different from the predefined one. However, we can not freely create our own. The changes are not made directly on the page either, but via dialogs and text fields that can only be reached using the left-side navigation.

Now before somebody cries about how inflexible this supposedly is, keep in mind that this makes for a very clear creation process. We start with the homepage; then we deal with the single pages that, in the case of my layout, are attached to the homepage as slides, in the style of a one-page website. We can choose if we want it to be a one pager or not in the “Settings,” the last item in the left-sided navigation.

The sub menu “pages” is structured very clearly as well. Here, we’ll find a list of the individual pages, and get to change up the order via drag and drop, or add new pages using the orange button at the top. Each page can be deleted, edited, or provided with a new page layout. We decide if the page is supposed to be visible in menu and footer depending on the type of content.

The menu item “design” lets us edit general design aspects. Here, SITE123 divides the options into six categories, with the first one, called “Layouts” having the most essential impact.

This is where we alter the entire page structure. We deposit the menu as a hamburger, create a left-side navigation, place it in the footer, and a lot more. Even parallax layouts can be created with just one click.

Under “Styles,” we change things like the pages color scheme, as well as other details such as the button design. “Fonts” allows us to access Google Fonts, and set font sizes for menu and logo. In the “Menu Options” we can integrate a search function into the menu, or display social networks and a lot more. We place our social media links or our mailing list via MailChimp into the footer using “Footer Layouts”. Last but not least “Favicon and Social Media Images” is where we define our Favicon, as well as the image that we want to integrate when users wish to share our page on social media.

Speaking about images: SITE123 offers a library with hundreds of license-free images for access directly from the backend. Of course, in times of Pixabay, Pexels, and Co., this is not a purchase-determining factor anymore, but still nice to know, and potentially useful in the workflow.

Among other things, the menu item “Settings” allows us to make basic SEO settings. An XML sitemap is generated automatically. Relevant information, such as the GTC, the data protection regulations and the implementation of the cookie guidelines is entered here. The texts are to be designed according to your own taste; there are no templates here.

The subitem “plugins” is especially interesting. Here’s where we find interesting expansion options for analysis, marketing, and support, as well as different tools for webmasters, including both Google’s and Bing’s Webmaster Tools. Most plugins only work with a paid account.

Now, before we click the yellow button to publish the website, we’ll check how our site looks in different resolutions via the responsive view behind the blue button.

SITE123: Free and Paid Services

After a click on “publish,” our website receives a numeric subdomain of the main domain Now, we’re in the web of webs, and, if used this way, SITE123 is entirely free, without the paid plugins, of course. However, it is very likely that you don’t expect your website to be displayed as a numeric subdomain of a homepage builder.

As soon as you want your own domain, you have to choose one of the paid plans. These mainly differ from each other by storage and traffic capacity, with both increasing alongside an increasing price. In the plans “Advanced” and “Professional”, two or five mailboxes are available to you, respectively, and the amount of products that your online shop can contain also rises with the price. Here’s the chart:

Not so great, however, is the fact that even in the “Basic” plan for a solid 9,80 USD a month with annual payment, there’s still a reference to Site123 on your page. While it’s not the rather obnoxious floating tag anymore, I still don’t think that a reference in the footer is necessary at this comparably not really low price.

As usual for homepage kits, it is not possible to register the website externally, and linking to SITE123 via the Cname record. Instead, we are forced to host the domain via SITE123. Principally, this is not a problem if we don’t need more than two domains. Once more, this makes the target group very clear.

The fact that we at least need the “Advanced” plan to get two mailboxes isn’t all that nice either. Here, a CName entry in the DNS would be a lot more flexible.

Conclusion: SITE123 Keeps its Promise

Now, let’s sum it all up and evaluate. SITE123 keeps its promise, making the creation of a website that looks professional by newer visual standards so simple that really anyone can present themselves on the web in an appealing way.

The defaults are both flexible and limited enough to prevent the influence of bad taste from getting out of hand, for the most part. Nobody can really ruin their website with SITE123. This speaks for the service.

Ultimately, the only thing that can’t be rated entirely positively is the cost-benefit profile. There are two things that bother me. “Advanced” is the minimum package needed to remove the SITE123 reference from my website. And I also have to at least get that one to receive a total of two mailboxes. This way, SITE123 would cost me about 190 USD with annual payment, which doesn’t make it an impulse buy for me.

If the price tag doesn’t scare you off, you’ll get a very simple homepage builder that creates modern, flexible sites, while being usable by anyone. Thus, regarding functionality, I can give an unrestricted recommendation for SITE123, but everyone has to decide for themselves if they want to pay the price.

It’s best to take a look for yourself. You only have to pay once a dedicated domain comes into play.

Catégories: News dév web

WordPress Plugin: TinyPNG Compresses JPG and PNG For Free

28 février, 2017 - 10:00

TinyPNG compresses JPG and PNG like no other tool. Especially for PNGs, there are few alternatives, due to the lossy compression that sets TinyPNG apart from the competition. As a WordPress plugin, TinyPNG takes care of optimal image sizes fully automatically.

TinyPNG: No Stranger When it Comes to Image Compression

Loyal Noupe readers have already known TinyPNG for five years. In 2012, I stumbled across the smart tool for PNG compression for the first time. Back then, compressing PNGs was only possible via upload using the web app. It was possible to upload a stack of images and to download it again one by one after successful compression. This was tedious, but it was worth it.

It didn’t take long until the creators of the TinyPNG also provided their algorithm as a Photoshop plugin. I was very excited and bought the software, but didn’t really like it in the end. I found this way of working to be too uncomfortable.

Since then, I’ve been using pngquant for desktop operation, in conjunction with the GUI PNGoo for Windows or Pngyu for macOS, respectively. Pngquant also works with loss compression, and, in batch operation, it is a lot faster than TinyPNG, already because of the lack of image uploads to the web platform.

TinyPNG as a Free WordPress Plugin

What I completely overlooked here is that TinyPNG has released a WordPress plugins in the meantime. Logically, it works with the same algorithm and can automatically compress the images that you upload into your WordPress, no matter if they are JPGs or PNGs. With JPGs, TinyPNG achieves the same values as others, but it really shines when it comes to PNG. Weight losses of up to 75 percent are possible, and they are always at least around 60.

A Free API Key is Required for the Operation

Once installed, you need to get an API key for the TinyPNG API directly from the backend. This is done very easily by entering the name and email address. TinyPNG will then send a confirmation link to said email address. Click it, and it will take you directly to your API key, which you then place in your backend via copy & paste. Now, the plugin is operational.

In your WordPress navigation, you won’t see a lot of TinyPNG. You may notice the newly added menu item “Bulk Optimization” under the main menu item “Media.” This is where you compress all of your media library’s images at once. This is only needed during first application because TinyPNG automatically takes care of all newly uploaded images after the installation.

TinyPNG: Bulk Optimization (Screenshot: Noupe)

In the list overview of the media library, you’ll now see the item “Compression” as the last entry on each image. Here, you control which variants of each image were compressed. Under “Details,” you receive information on every image size.

How to Adjust Tiny PNG to Your Needs

General settings can be found under Settings > Media > JPEG and Image Optimization Here, you can view how many images you have compressed in the current month. This is also where you choose the image formats that you wish to activate a compression for. You won’t use all the ones that your theme provides. That’s the case for me, at least.

TinyPNG: Settings (Screenshot: Noupe)

It is also possible to define a general size limit. This makes sense if the images you upload are normally much larger than what would make sense for WordPress, for example, uploading unedited photos from your 20MP camera. In this case, the option Resize and compress the original image with additional parameters on width and/or height would be useful. This way, TinyPNG would make sure that your 6.000 x 3.000 pixel monster would be compressed to a width defined by you, say 1.024 pixels.

Other options for JPG files let you decide if you want data to remain after compression. This includes the date of creation of the original file, the GPS position the picture was taken at, and any copyright notes.

There is nothing else to configure.

TinyPNG: Free, Yes, But Only For 500 Compressions a Month

TinyPNG for WordPress is available for free, and the compression is free as well, though not unlimited. The API key allows for 500 free compressions a month. At first, this sounds like a lot, but it is relativized very quickly, considering that every defined image size in your theme requires a compression.

If I were to compress all image sizes in my Twenty-Sixteen-powered blog – seven in total – I would only be able to compress 71 images for free. Thus, I have already excluded all sizes that I don’t use, getting me to 125 images a month. This should suffice.

When it comes to the prices for additional compressions, TinyPNG isn’t  aggressive. The information is not really easy to find, which I don’t understand as the prices aren’t unfair:

TinyPNG for WordPress: Prices Per Image. (Screenshot: Noupe)

Just play around with the slider a bit (once you found the page ;). 13.50 USD for 2,000 images a month doesn’t sound bad at all. Most bloggers will probably get along with the free package as it is.

TinyPNG for WordPress is an excellent argument for using PNG on your blog by default again. Get the plugin here:

WP-Appbox: Compress JPEG & PNG images (Free, WordPress) →

Catégories: 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