Noupe.com

S'abonner à flux Noupe.com Noupe.com
THE magazine for webworkers and site owners
Mis à jour : il y a 8 min 11 sec

Fresh Tools For Designers and Developers in June 2017

28 juin, 2017 - 10:00

Great tools and online services make the work of designers and developers a lot easier. They allow you to make many workflows simpler and more efficient. This small collection stirs creativity and provides solutions to various problems.

New Tools For Designers and Developers

So, here’s my list of the newest, and most exciting tools that I found for you:

1 – Authentiq Modern User Access With Multi-Factor Authentication.

Authentiq offers a multi-factor authentication that does not require any passwords for the login on websites. AuthentiqConnect allows your users to decide when to increase their security if they want to add a second factor or go without a password. The service is compatible with OAuth 2.0, and OpenID Connect. The service is freely usable up to 500 active users.

Visit Website » 2 – Better Font Finder

This interesting tool allows you to group similar Google Fonts, and find the optimal font for your project using different filters. Grouping fonts with similar characteristics will get you to the desired result a lot faster.

Visit Website » 3 – Vectr

Vectr is an easy and intuitive way to create vector graphics. You can either use it online or install it on your computer. You can get the app for Mac, Windows, Linux, and Chromebook. Vectr is free to use. A WordPress plugin was created as well.

Visit Website »

Vectr – Embedded Graphics Editor (Free, WordPress) →

4 – Data Gif Maker

Google’s new project allows you to create a simple Gif that compares two elements. All you need to do is fill in a simple form, add data points, and select a color scheme. You’ll receive a visual data element to embed in websites.

Visit Website » 5 – Colorion Gradient Buttons

If you are done seeing the standard flat buttons, this is a really neat alternative option with gradient effects in all kinds of colors.

Visit Website » 6 – Buttercup

Buttercup is a free open source password manager for Max, Windows, and Linux. A browser add-on for Firefox is available as well.

Visit Website » 7 – Word Counter

Word Counter calculates the number of characters, words, or paragraphs in real time. Just enter a text in the box, or copy and paste texts from other pages. You’ll get to see the statistics right away.

The tool is also able to display the required character count for social networks like Twitter and Facebook. Additionally, it’s possible to show the correct character count for the Google meta description.

Visit Website » 8 – Trendy CSS Text Shadows

More and more web projects go away from the flat design and want to use cooler effects. Here, the fascinating text effects provided by Mixfont are a perfect pick. The CSS of each effect can be downloaded for free.

Visit Website » 9 – docsify

docsify is a smart little tool able to create a documentation website for Github projects. It loads your markdown data, resolves it, and displays it as a website.

Visit Website » 10 – Free Minimalistic Phone Mockups

The Free Minimalistic Phone Mockup comprises Sketch and Photoshop files and comes with a very high resolution of 6962 x 4350 pixels. Background and telephone colors can be adjusted.

Visit Website » 11 – Emojify

Emojify is a different kind of link shortener. If you don’t want to deal with standard URLs anymore, you can also have your shortened links be displayed with neat emojis.

Visit Website » 12 – Omg-img

You can write each of the provided icons directly into your HTML code, and the tool will find the right pictogram and adjust the colors and sizes. The free usage requires a backlink. You can either use the tool online or download the app for Mac or Windows.

Visit Website » Conclusion

The presented tools and services should be interesting to a lot of designers and developers. Some tools provide a significant added value, like Authentic, Better Font Finder, and Vectr. I will take a closer look at a couple of them.

Catégories: News dév web

Tool Tip: The Really Good Email Design Checklist

27 juin, 2017 - 10:00

Email design is not an easy task. Especially the many, oftentimes undercooked, rendering engines are what makes it so difficult. On top of that, there’s also the problem that, in terms of content, emails need to get to the point as fast as possible. Thus, this challenge is not a purely design-related one, but a marketing challenge as well. The following infographic provides – what I believe is – a complete overview of everything you should keep in mind.Marketing is a domain that too many people believe they had knowledge on. In that regard, it can definitely be compared to design. Anyone can do that too. Now, if these two misconceptions unite in the one person that is supposed to create an email for your business, you are in a pretty bad spot. So, don’t be too surprised if the number of people unsubscribing from the newsletter is rather high, while the number of people turning into customers is very low.

But you can’t just ram the required knowledge into someone. If you want to stay away from commissioning an expert, or if you are not an expert in both categories yourself, at least follow the email design checklist by CampaignMonitor, which you will find at the bottom of this article.

Roughly summarized, of course, today’s email is responsive and minimalistic. This allows mobile clients to comfortably read them, and mobile clients are already dominating emails. 53 percent of all of today’s emails are first opened on a mobile device.

As clear and smooth as the design, is how you should design the texts. Prose is undesirable. Get to the point. People don’t have time anymore. At the end, there’s always a clear call to action, to prevent readers from being left indifferently, asking themselves what your email wants them to do.

If possible, personalize the emails. Here, you should not only focus on the individual reader that you will address with the proper name. Instead, you should differentiate the content for different groups of readers, like the ones that have never bought something from you, the ones that have bought something once, and those that have already bought something several times. Of course, other differentiations using dynamic content are possible as well. You know your readers better than I do.

For the creation of your strongly selling email, I have already recommended the tool Topol.io a few days ago.

Source: The Really Good Email Design Checklist by Campaign Monitor

Catégories: News dév web

Topol.io: Creating Beautiful Email Newsletters Made Easy

26 juin, 2017 - 10:00

The free web app Topol.io makes newsletter design as simple as writing a letter in Word.

Topol.io: Word-Like Newsletters

Email newsletter design is not an easy thing. There are ways to simplify the process, but the effort needed is never low. The main reason for that is the variety of different technological implementations in the various mail clients. In contrast to browsers, here, everyone likes to stick to themselves.

That’s one, but not the only, reason why it’s important to be able to rely on a technologically stable, and compatible solution. So, if your main goal is to get your content to the people, rather than a completely striking newsletter design, you shouldn’t miss out on the free tool Topol.io by Sendmark.

Te Topol.io editor is a part of the Sendmark feature set, but it is also available as a web app. Developers that want to implement their own email editor can license Topol.io. The editor’s key features are its intuitivity, and being significantly easier to understand than the Editor from Mailchimp.

How to Build a Newsletter Using Topol.io

Getting started with Topol.io is simple. First, select one of the templates. There are seven different ones available. At a glance, this doesn’t seem like a lot, but that’s not an issue as they are a raw frame anyways, allowing you to fully customize each of them. Looking at it like this, the templates are nothing more than structural design patterns.

Once you’ve selected a template, the editor opens right away. On the right, you’ll find the chosen template in the WYSIWYG view, with the toolbox being on the left, with a dark background. The toolkit is divided into the sections content, structure, and settings.

In the settings, you choose options regarding the entire email, such as the color scheme, line height, as well as fonts, and their sizes for the different text elements.

Under Structure, you’ll find six basic structures, each representing a different column layout. Use the mouse to drag the desired structure from the toolbox into the editor, right to the place where you want the structure to be provided. You’ll get a stripe across the entire width of the editor window. Within that, there are ashlars highlighted in blue, with an icon that is commonly used to depict downloads.

These blue fields are where you should drag the elements from the content area. This can be text, images, animated GIFs, buttons, dividers, spacers, social media integration, videos, or HTML source code. The content block GIF is equipped with a Giphy integration, so you can search for, and integrate fitting animations right off the bat. The content block HTML provides an HTML editor within the toolbox. Any changes made to the source code are immediately displayed in the WYSIWYG view on the right.

In-page Editing of Text Elements. (Screenshot: Noupe)

Here, there is no defined scheme to follow step by step. At any point, you can add another structure template to any desired spot, and fill it with content. The individual structural elements can also be moved to their new position via drag & drop in the email. It is possible to easily duplicate or delete both individual content, as well as entire structure templates.

The content element spacer serves as a separator between the templates. The desired space is adjustable using the mouse. Each element tells you which actions can be triggered at this element when hovering above it with the mouse. Normally, these are move, duplicate, and delete. After clicking an element, the toolbox selection on the left opens, presenting further editing options that are fitting for the particular selection.

If you are not sure if your design still works after a bunch of changes, you shouldn’t be afraid of clicking “Preview & Testing” in the top left above the WYSIWYG view. Here, you are also able to switch between the desktop and the mobile view.

Images that you add to the layout are loaded into the producer’s AWS cloud, for the WYSIWYG view to work. Once you’re done and satisfied with your newsletter, click “Save & Download.” Topol.io creates a Zip file, which contains the newsletter as an index.html, as well as all used images packed into a subfolder called Images.

Conclusion: Creating Working Email Newsletters Doesn’t Get Any Easier

Topol.io is a modern, easy to use tool that turns the creation of email newsletters into a trifle. Anyone can use this without any accidents. And, on top of that, it’s free.

Catégories: News dév web

Little Snitch: What WordPress Theme is That?

23 juin, 2017 - 10:00

Going through the WordPress theme index is nice and all, but most of the time, we end up finding the fascinating themes out in the wild. Unfortunately, it is not always easy to tell which setup is hidden behind the attractive appearance. A simple web app changes that.

What WordPress Theme is That?

Using the slim snooper called “What WordPress Theme is That?”, you can figure out which theme is responsible for the layout of any website you like. On top of that, the tool also checks which plugins are being used. This way, you don’t only know the visual cornerstone, as you also get to look how the respective website provides its functionality.

The Application Doesn’t Raise Any Questions. (Screenshot: Noupe)

However, the tool is not perfect. Heavily modified designs can not be assigned to a theme anymore, resulting in no information being displayed in these cases. The determination of the used plugins is not flawless either. Whether the app finds it or not depends on the method and aim of the plugin. Thus, you shouldn’t rely on the list. The chances are high that there are more add-ons working in the background than you get to see.

Using the web app is as simple as using Google. Just copy or enter the URL of the website you want to check into the centered input field, and click the magnifier icon, or confirm your entry via enter or return.

The List of Ingredients of One of My Blogs. (Screenshot: Noupe)

Subsequently, you’ll receive an overview of the data that the web app was able to draw from the website. For my private blog, it found quite a bit, but it didn’t find anything for Noupe. Although there is a chance of not receiving any information, “What WordPress Theme is That?” is a useful starting point whenever you need to solve these types of questions. Of course, you could also go hunt for the name of the theme in its HTML and CSS source code, but the web app is significantly faster.

Catégories: News dév web

10 Fresh and Free Plugins for Your WordPress

22 juin, 2017 - 10:00

We all love our WordPress and the option of quickly extending its functionality. Thus I went for a deep dive into the ocean of the public plugin repository and found ten cool free plugins with useful functions for your WordPress. Enjoy trying them out.

1 – Contact Form 7 Multi-Step

The plugin is an expansion for the popular contact from plugin Contact Form 7. If you happen to have created contact forms with a lot of fields, “Contact Form 7 Multi-Step” makes for more clarity by turning your form into a multi-step form.

Contact Form 7 Multi-Step (Free, WordPress) →

2 – Custom Product Stickers for Woocommerce

The name says it all: set yourself apart from your competition using unique, very customizable stickers on your product images. You can easily edit the color, text, and placement of the stickers, allowing you to create a unique WooCommerce shop.

Custom Product Stickers for Woocommerce (Free, WordPress) →

3 – Contact Page With Google Map

An easy and efficient way of designing independent contact pages with a cool Google map.

Contact Page With Google Map (Free, WordPress) →

4 – Tabbed Editor

The Tabbed Editor is your anti-box charm. If your “Create Post” page is filled to the brim with plenty of meta boxes for tons of possible functions, this plugin clears it up by only displaying boxes that are not needed if you click a particular button. Highly recommended!

A Screenshot:

Tabbed Editor (Free, WordPress) →

5 – WooCommerce Fly Cart

A unique shopping cart for WooCommerce shops. Whenever a button like “Add to cart” is clicked, this Ajax shopping cart window opens. Of course, the design can be adjusted to your needs.

WooCommerce Fly Cart (Free, WordPress) →

6 – Secure Frontend Ajax Login

You have a member website or a WooCommerce shop? If so, you should consider this plugin. It provides you with an Ajax-based login form for your frontend. After a click on a “login button,” the login window opens and allows for logins without having to leave the website.

The option to guide users to a specific page after the login is another goodie.

Secure Frontend Ajax Login (Free, WordPress) →

7 – Custom Landing Pages – LeadMagic

After installation, you have to register for a free account at RegistrationMagic, allowing you to use the plugin for free from that point onwards. This way, you get to create and design new landing pages in no time.

Custom Landing Pages – LeadMagic (Free, WordPress) →

8 – Nzymes

You want to be able to execute PHP code in your posts or pages? This tiny plugin allows you to do just that.

Nzymes (Free, WordPress) →

9 – WooAdvance Settings

This plugin contains additional, useful settings for your WooCommerce shop. For instance, you can easily alter the amount of displayed products in a column.

An Extract of the Possible Settings.

WooAdvance Settings (Free, WordPress) →

10 – Accordions or FAQs

If you want to create an FAQ page in your project, this plugin is just what you’re looking for. It provides plenty of customization options, helping you find a design you like. Watch the video on the plugin.

Accordions or FAQs (Free, WordPress) →

Conclusion

There are a couple of excellent plugins in this selection. The “Tabbed Editor,” as well as the “Secure Frontend Ajax Login” impressed me. I’ll definitely use the login plugin in a customer project, as it generates a real added value for the user.

Catégories: News dév web

How Long Does it Take For Your Website to Reach Page 1 of the Google Search Results?

21 juin, 2017 - 10:00

It’s a question asked by virtually every web design client ever: “When will we be among the top spots in the search results?” Serious web designers will give a reserved reply, while the common SEO will say “tomorrow.” But how long does it really take?

A serious answer can only be given on the basis of tons of data, and even then, it’s more of an approximate value. The parameters and variables that need to be factored in are too different for each case.

How Old is the Average Website Ranking in the Top 10 For Keywords?

The team of ahrefs, a toolset for search engine marketing, tried to figure it out nonetheless and took a systematic approach on their database, which contains a couple million of domain data pools. The results of a large-scale project like that can’t be entirely wrong.

(Source: ahrefs)

First, they compiled a set of two million randomly selected keywords, and checked the top 10 domains for each of those keywords. Here, they found out that no website in the top 10 was less than two years old. On average, the frontrunners were about three years old.

22 percent of sites that were younger than a year old, but still in the top 10, contributed to this average, although they only provided about two to four percent of the top rankings.

Interim Conclusion: Search result pages are heavily dominated by older domains. While there are young sites, they are only represented in single digit percentage numbers. You could call them exceptions.

How Fast Can a New Website Establish Itself in the Google Ranking?

To figure out how long it takes until a site is ranked in Google, the team of ahrefs took a dataset of two million randomly selected websites, which were first seen by the in-house crawler about a year ago. About three-quarters of all of these websites were not even in the top 100 of results. Anyway, 19.5 percent of them made it to the spots 11 to 100, and only 5.7 percent made it into the top 10. Websites with especially stable backlink profiles had a better performance to boast.

Now, they took a look at the top 5.7 percent, trying to find out how long it took these exceptions to reach the top 10. This value is between two and six months.

(Source: ahrefs)

Furthermore, it was discovered that the ranking was only that positive for keywords with a low search volume. Only 0.3 percent of websites trying to get a keyword ranking for words with high search volumes, got into the top 10 in the first six months. Even these whizkid sizes were only successful after about a year when going for keywords with high search frequencies.

Conclusion: About 95 percent of all new websites won’t make it to the top 10 in their first year. 75 percent won’t even make top 100. Nonetheless, the study shows that effort and hard work makes it possible to achieve high rankings.

But, what’s our answer to our customer’s question? I recommend: “It depends.” ;)

Find all numbers, data, and charts over at ahrefs.

Catégories: News dév web

Another Look At Webydo: Professional Websites Without Code

20 juin, 2017 - 10:00

Noupe readers have known Webydo for a while. We had already introduced you to the web design software in 2013. Today, we want to take a look at how the website builder has evolved since then.

2013 was an exciting year for Webydo. While the system already existed for two years at that point, the public didn’t know about it. These two years were used to finish the software for the market release in a private beta. This way, it was no surprise that Webydo boasted references from over 13,000 designers and more than 70,000 websites from the get-go. Today, the website is a matured product maintained by a matured company. What it offers is a wide array of solutions directed towards designers, and drawn from their B2B needs.

 

Webydo, Clear Separation From Homepage Building Kits

What makes Webydo so unique? At a glance, you might think of Webydo as just another one of those homepage builder specimen. There’s a lot of competition in that space, and all website builders are mainly aimed towards consumers.

Modern Websites Created With Webydo.

This is where Webydo clearly sets itself apart. Its clear focus on designers and the support of their business models stays present throughout the software’s entire philosophy. Designers that open Webydo for the first time will feel at home right away, as the interface, the controls, the style, and everything else reminds us of the design products made in the house of Adobe.

Webydo’s Outstanding Features

To an extent, the precise orientation towards designers as the target group already defined the design of the user interface, and the entire feature set. As mentioned before, Webydo is close to the giants of graphic design software. This makes the learning effort accordingly low. Especially Photoshop aficionados will love Webydo, as a beloved, old friend is also available here: layers.

Design without code is Webydo’s motto.

Different modes allow you to view and evaluate the websites from the perspective of the designer, the customer that is supposed to add content, and the casual internet visitor. Although it’s almost standard these days, I still want to mention that Webydo creates responsive websites.

There are a few fascinating features that deserve to be mentioned separately.

The Automatic Layout Tool, Smart Grouping, and Drag Handle

The Automatic Layout Tool lets you move elements into new layouts automatically. This makes it possible to display a bunch of elements as a grid, and – on click – turn it into a single column for the responsive variant. Always keep in mind that we’re talking about a solution that does not require any coding knowledge. The author of this article is fully aware that such can be done with CSS ;-)

The Automatic Layout Tool (GIF: Webydo)

Using smart grouping, users can group different elements, and edit that group as a whole. This is another essential tool for responsive sites.

The drag handle allows you to move elements around the design by mouse, while always keeping the element within the grid. Even small movements, to minimize whitespace, for instance, are smooth and straightforward.

Drag Handle (GIF: Webydo) Interface Design

Being able to freely arrange the toolboxes (called panels), should also come in handy to a designer’s workflow.

Flexible Panel Management (GIF: Webydo) Typography

Typography on the web has become more and more important over the past years. Here, Webydo provides access to all Google Fonts, a connection to Typekit, as well as the option to upload fonts.

Other Contemporary Features Sell Your Products with Webydo.

Of course, the website builder also offers all the features that are currently trending, including parallax, even in the 3D form, ghost buttons, galleries, and tons of other stuff.

Strengthen Your Brand with a Blog.

In the on-site Webydo blog, you’ll find explanations, inspirations, and general information on the Webydo feature set. The blog basically marks the link between the product and the wider design environment.

Just Like your Favorite Pixel Editor: Layers Webydo’s Business Functions

Webydo’s goal is to not only help you with a design tool but also provide you with the best possible support when it comes to handling your business. It does this in different ways.

First, Webydo gives you a very user-friendly CMS, enabling your customers to take care of his content on his own. In advance, you have already defined which areas they are permitted to alter in the layout.

Next, Webydo allows you to brand the entire system. This way, none of your customers will ever see the term Webydo. This white-labeling is also possible for the CMS backend. There are almost no others in the branch that are that altruistic.

To round out the feature set, you get to send bills for your services to your customers, directly from the backend. On this occasion, I should probably mention that all the traffic to, and away from Webydo is SSL-encrypted.

While this is not one of the traditional services designers usually offer, it does belong to a complete website package: SEO, the search engine optimization. The integrated tools can even be used for that. Thus, the SEO basics are always covered.

Webydo’s Knowledge Base Helps You Get Started And Going

As building a community had been a high priority from the beginning, Webydo was able to create an active, friendly following, willing to help you at any time. Webydo’s support staff is also available 24/7 and even helps you through difficulties via live chat.

An extensive video documentation educates you about all of the tool’s aspects. For direct requests or individual problems, there are feedback forms, but also the old reliable phone line available to you. You can also suggest new features, report bugs, or upvote new features in the roadmap.

In any case, you’ll never be left alone. Webydo doesn’t give you the impression that you’re just any random customer. Here, someone seems to be legitimately interested in improving your business.

Webydo and the Prices

At the latest, a look at Webydo’s pricing model will show you that this is not meant for the average consumer. Even the smallest package includes CMS and hosting for ten websites when used by one designer. The billing system is also included in the plan. With annual payment, you’ll pay 75 USD a month. Starting with the team account for 150 USD, aside from thirty websites, the above-mentioned white-labelling is possible. Find other plans with higher limits on this site.

At this point, you’ll realize that choosing Webydo is not like choosing other tools. Webydo represents the aspiration to fully support you in your design business, making it an all-or-nothing decision.

Of course, this is not easy to decide, and should always be looked at individually. However, there is nothing wrong with the feature set. If you don’t know Webydo, you should definitely give it a try.

Related Articles
  • Webydo: The Center of Your Web Design Business | Noupe
  • Put Straight! 8 Amazing Sites Created With Webydo, a Code-free Platform for Professional Designers | Noupe
  • There We Go: 25+ Incredible Sites Created Using Website Builders | Noupe

(Disclaimer: This article is sponsored by Webydo.)

Catégories: News dév web

40 Creative Screensavers and Wallpapers To Go

19 juin, 2017 - 10:00

Every day, we’re sitting in front of the computer: thus, we’ll enjoy a nice wallpaper or a screensaver that welcomes us when we return from grabbing a coffee. We have collected fifteen screensavers, and a solid 25 creative wallpapers for you. Enjoy!

High-Quality Screensavers IMAX Hubble 3D

Cute slideshow with recordings of the IMAX film Hubble 3D.


© IMAX

fliqlo

fliqlo (for Mac and Windows) shows a stylish digital clock.


© fliqlo

PolarClock

A special clock that displays the time and current date in a circular shape, and 28 languages.


© Pixel Breaker

briblo

If you like Lego, you’ll love this screensaver. Here, bricks build up and turn into a tower.


© briblo

League of Legends

Complex Screensaver with plenty of images from League of Legends.


© League of Legends

Nintendo Screen Saver Features

As a retro gamer, you’ll enjoy this screensaver: here, NES games are simulated in real time.


© ubernes.com

Electric Sheep

Psychedelic interferences as a screensaver. Plenty of styles to choose from.


© electricsheep.org

Apple TV Aerial Views

The screensaver from Apple TV, now for Windows.


© John Coates

Lost Watch 2 – NVIDIA Edition

This clock is in a flowing stream (but still shows the correct time).


©

Numbers dropping into water

Fascinating screensaver where the numbers fall into the water, displaying the current time.


© dropclock.en

Moonlit Ship Screensaver

A pirate ship in the distance, clouds over the full moon, and a handy clock on the side.


© saversplanet.com

Lightning Bolt Screensaver

Cloudy, rainy skies, with lightning flashing.


© screensavergift.com

Countdown

Simple countdown, able to remind you of a particular appointment.


© soffes

Beautiful Fractals

Fractals are fascinating objects, made up of multiple smaller copies of themselves.


© softonic.com

Featured Photo Screensaver

This screensaver by Google continuously displays new images from all around the world.


© google.com

Creative Wallpapers Hd Car Wallpaper


© wallpaper-gallery.net

The beauty and the beast


© wall.alphacoders.com

Free Think


© alphacoders.com

Mountain


© pexels.com

pacific rim


© alphacoders.com

Battlefield


© Battlefield

Legends


© legenden-von-andor.de

Programmers


© imgur.com

Flowers


© 7-themes.com

Fish


© 7bna.net

City


©

Creative Wallpaper


© pixelstalk.net

Cloud


© Adobe

Creative Art Wallpaper


© photoshdwallpapers.com

Wallpapers Abstract


© besthqwallpapers.com

People Fight


© wallpaperhd.pk

Art and Creative


© shydesigns.com

Waterfall


© wallpaper-gallery.net


© 111wallpaper.com

City


© wallpapersafari.com

Sniper


© 7-themes.com

Garen


© 7-themes.com

Rain


© hdwallpaperbackgrounds.net

Computer Wallpapers


© wallpapersafari.com

Sun


© wallpapersafari.com

Catégories: News dév web

June 2017: 10 Pretty, New and Free WordPress Themes

16 juin, 2017 - 10:00

After a longer break, we’re back to present you the newest and prettiest free WordPress themes in the repository. Give your website a new look.

Sweeping through the site and installing a new theme creates a fresh, spring-like feeling, hopefully impressing your visitors. Here are the new stars of the official theme index:

1 – Excellent

Excellent is one of the prettiest themes I’ve noticed in the recent past. You can use it as a blogging, portfolio, or business theme. A closer look is worth it in any case.

Download on WordPressTheme-Demo

2 – Brilliant

Brilliant is the right theme for a blog or a magazine. You can use your own colors and upload a logo. A few layout settings can be altered as well.

Download on WordPress | Theme-Demo

3 – Glob

Glob is a well-conceived representative of magazine themes. You’ll get a rather quickly loading theme with a few setting options, and individual widgets that can be adjusted further.

Download on WordPress | Theme-Demo

4 – Zyloplus

Zyloplus is one of the so-called “Multi-Purpose Themes,” said to be suitable for every application purpose. To me, the theme appears to be an excellent choice for business websites. There are plenty of settings to adjust, and you get a lot considering it’s a free theme.

Download on WordPress | Theme-Demo

5 – Wlow

Wlow is a truly exciting one-pager with really cool parallax effects. It is a good pick for both business, and freelancer websites. The theme provides you with a lot of setting options for a perfect customization of your site.

Download on WordPress | Theme-Demo

6 – Juliet

Juliet is a fresh and modern blog theme that contains a lot of settings for you to use. Because of that, customizing Juliet the way you want to should be very easy. But it doesn’t stop there, as it’s also prepared for a nice WooCommerce shop.

Download on WordPress | Theme-Demo

7 – Blog Way

Blog Way is a stylish, minimalistic blog theme with plenty of settings via the theme customizer. It allows you to edit colors, background, and the logo.

Download on WordPress | Theme-Demo

8 – GreatMag

GreatMag is a pure magazine with a lovingly detailed design. A couple of widgets, tons of theme options, different blog layouts, and Google Fonts round out the package.

Download on WordPress | Theme-Demo

9 – Clean Commerce

Clean Commerce is a clean theme for your WooCommerce shop. It provides a couple of theme options, a “Featured Carousel,” and four widgets. The menu and the logo are adjustable as well.

Download on WordPress | Theme-Demo

10 – V12

Do you need a pretty new business theme? If yes, take a closer look at V12. It provides you with tons of options that you’d normally only find in pro versions of other themes. The V12 theme comes with everything you’d like to use.

Download on WordPress | Theme-Demo

Catégories: News dév web

Simbla 2017: Dynamic Pages Straight Out of the Website Builder

15 juin, 2017 - 10:00

The website builder Simbla sets itself apart from the competition in several aspects. To the customer, the most noticeable one is the database connectivity. The new feature “Dynamic Pages” is another highlight from Simbla’s scope of functions.

Readers of Noupe Magazine have known the Simbla Website Builder for several years. Now and then, we reported on the product and its rapid progress in features. You can find all links to our past articles at the end of this post.

Simbla’s concept of data connectivity is what impresses us the most. A simple visual user interface allows you to create databases, as well as content in a way that is so intuitive, that even almost entirely clueless users can do so without any issues. Professionals are also happy to have such a comfortable and flexible solution.

Creating and Managing Databases Using Simbla

A well thought-out detail is that the database section is a separate pillar, and independent from the actual website creation. This matches the approach of conventional database systems, which don’t operate with a fixed output medium either. This way, you get to take care of your content first, without being influenced by visual aspects.

You Don’t Need to Search For Long to Find the Database Feature.

After setting up a database, define your users and roles. The default user “Public” grants public access to the website. However, you’re also able to create further users that only gain access after a login.

The distribution of rights is appropriately differentiated. For instance, it is possible to give the user “Public” reading rights for one database, while granting writing rights to other users. Here, you can also distribute the rights “find”, to search, “get”, to display, “create”, “update”, and “delete”. Aside from the definition of individual users, and the declaration of individual sets of rights, using so-called roles to grant the necessary rights for a whole group of users can save time.

Sufficiently Differentiated Rights Distribution Via Click.

Once that’s done with, take care of the creation of the required data tables, the actual content. Comfortably add columns, and define the type of the column. Character strings, numbers, arrays, Boolean values, and files are possible. In contrast to other databases, such as MySQL, files, like images and documents, can be integrated into a table via an own type, allowing for easy access later on. In addition to that, you’ll receive a preview of image files.

The columns “Id”, “createdAt”, and “updateAt” are added and taken care of automatically. The visual user interface makes the creation, and management of databases as easy as it can be. Set up new rows, and fill them with content in no time.

If you want to use a table for non-web purposes, export it to the CSV format with a single click. However, embedded files will be ignored during the export. It is also possible to import data from the CSV format.

From Database to Dynamic Web App

Now, a database would be rather useless, if we were not able to integrate it into our website. Simbla has also found an intuitive solution for that functionality. The implementation is straightforward and comfortable.

First, you need to select the database in your website’s settings. After doing so, all contents of this database will be available from within the site editor. Here’s where the so-called app widgets come into play. These predefined content elements provide predefined database connections for certain purposes.

Thanks to the extensive options, you can create simple, or complex web applications, even without lots of effort, or knowledge on programming and database queries. It doesn’t matter if you’re dealing with registration forms, or the display of contents in a table, the app widgets speed up your website.

Dynamic Pages: Simbla Turns Into a CMS

Especially the brand new app widget combination of “Dynamic Grid,” and “Dynamic Pages” can give your website a real boost in terms of dynamics. With the help of these widgets, you’ll make sure that Simbla displays your content in a grid overview, creating a separate page for each data set from your database that shows the details of the respective set.

The Configuration Dialogs Are Very Comprehensible. Step 1: The Dynamic Grid

The first step is to create a dynamic grid within the Simbla Editor. This is done entirely visually and requires no programming in SQL or other languages. When it comes to defining what to display in the grid, you can make use of filters to limit the amount of data. It is also possible to use a search box so that only content actively sought for by the user makes its way into the grid. On top of that, define the number of results per page, as well as the order, and sorting, depending on a data field that also needs to be selected.

New Addition to the Toolbox, the Dynamic Grid.

In the page design, you place specific contents in the form of variables, which are enclosed by double curly brackets, like this {{Field Name}}. These variables can be formatted freely. Above all else, you can design the rest of the page however you like. Using the “Dynamic Grid” doesn’t bring in any new restrictions.

Design the Dynamic Grid However You Like.

The result is a self-filling grid with content from your database, filtered by you or your users. That’s a neat thing, but it’s only half of the solution.

Step 2: The Dynamic Pages

Here’s where our “Dynamic Pages” come into play. They start at the grid and expand it. This additional widget gives each of our dynamic grid’s contents a link to a detail page, where you get to freely design what the user should see.

A good example for the usage of the widget combo is this Escape Room Directory. Escape rooms are a new kind of group game. You, and a small group of fellow gamers get locked into a room, and have to escape within 60 minutes. To do so, it’s necessary to solve all kinds of tasks and riddles. Escape rooms exist all around the world, and the numbers are growing quickly.

The Escape Room Directory Begins With the Search Box as a Starting Point.

Thus, an index of these wonderful playgrounds is just the right task for a dynamic grid with attached dynamic pages. The designer doesn’t need to do any additional work, once the layout is done. Each additional database entry automatically causes another page to be generated and makes it accessible from the grid view.

Within the “Dynamic Pages” widget, you mainly define the URL structure behind the display of the detail pages. When it comes to content that only registered users should have access to, activate the according restriction to authorized roles.

The Template For the Detail Page Can be Defined Freely. All You Need to do is Add the Variables.

For the detail pages, set up a new page on your website. This will then serve as a template for the looks of the detail view. Of course, you can freely design this one as well. Add the content from the database in triple curly brackets, like this: {{{Field Name}}}. Next, connect your template to the same data table that you already selected for the grid, and activate the checkbox “Dynamic Pages” in the settings. That’s all you need to do.

Conclusion: Integrating Dynamic Content Doesn’t Get Easier Than This

With the new combination of “Dynamic Grid,” and “Dynamic Pages,” the Simbla Website Builder provides a flexible solution for the display of larger amounts of data on individual pages. I have yet to see this elsewhere in the competition. I also don’t know of any other solution that makes database content web-compatible this comfortably, without any additional programming efforts.

Find more articles on Simbla here, here, here, and here.

Catégories: News dév web

20 Tools for Web Developers and Designers from this Spring

14 juin, 2017 - 10:00

Much of the success lies in the tools that you have at your fingertips. A well-chosen set of instruments helps to achieve your goals more efficiently. It saves you time, improves your daily routine, and can help you avoid banal mistakes. Today we have picked 20 valuable tools that were created for web developers and designers just this spring.

Shop.js

Shop.js is aimed to enrich your website with e-commerce functionality. It is a powerful set of universal UI components that works thanks to El.js and Hanzo.


Creator: David Tai
License: BSD.

SQLPad

SQLPad does what is said in its tagline: it allows you to run queries right inside a browser. It supports Postgres, MySQL, SQL Server, Vertica, Crate, and Presto.


Creator: Rick Bergfalk
License: MIT.

MiniCSS

MiniCSS is a minimal yet robust CSS framework. It is made with both desktop and mobile devices in mind so that building fully responsive cross-device layouts of various kinds has become much easier.


Creator: Angelos Chalaris
License: MIT.

Tippy.js

Tippy.js is a tiny JavaScript-powered tooltip library that has a dozen of engaging options. You can add classic, animated and modern tooltips in seconds. It is also quite friendly with touch screen devices.


Creator: Atomiks
License: MIT.

Foxholder

If you want to enhance forms with some zest then this small tool will provide you with 15 different ways how to do that. Here you will find a range of beautiful effects that embellish interaction with input fields.


Creator: Natali Davydova
License: MIT.

EnjoyCSS

EnjoyCSS is a generator that offers tools to get the most out of CSS. It is great for newbies and those who do not want to waste their time on trivial routine.


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

Sizzy

Sizzy is a basic instrument for testing responsiveness. It quickly shows a website in different dimensions including Android and Apple-powered devices and others.


Creator: Kitze
License: GNU General Public License v3.0.

Animista

Animista is a simple way to create animations. You can choose among the dozen of standard effects such as scale, rotate, swirl, slide etc. as well as assign an animation to text, background and even exits and entrances.


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

RAGrid

The RAGrid promises to build intrinsic layouts that can have an offbeat structure. It is very easy to use thanks to similarities with regular image editors like Photoshop.


Creator: Adam Argyle
License: MIT.

App Iconizer

App Iconizer lets you escape the routine of creating pixel-perfect application icons both for Apple App Store and Google Play Store. Just choose the image that you want to convert into your piece of brand identity and upload it to the service.


Creator: Exevio
License: Royalty-free.

Mirr.io

Mirr.io is an extension for Sketch that injects some life into your designs.  Select event, transition and the artboard to compile a fantastic presentation


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

Fontjoy

Strike the harmony in font combinations can be pretty challenging especially when it is not your sphere of expertise. Fontjoy helps you to avoid common mistakes in choosing the perfect pair of typefaces for the interface


Creator: Jack Qiao
License: MIT.

Pictones

Need some excellent color combos? Turn to photography. Upload your beloved picture and extract the colors from it, getting a perfect color scheme ready-to-be-used in your projects.


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

Thumbor

Thumbor is all about cropping, resizing and filtering images. It applies different advanced algorithms to bring about precision, neatness and pixel perfection.


Creator: Thumbor
License: MIT.

Britecharts

Britecharts will take your visualization to the next level. It is driven by D3.js v4, another popular and powerful data-targeted JavaScript library, and offers a simple API.


Creator: Eventbrite
License: Apache License, Version 2.0.

Ambiance

Ambiance includes a collection of gorgeous handcrafted color palettes that will not only inspire you on creating something beautiful but also can be used as a base for your future designs.


Creator: Sudipto Mondal
License: COLOURlovers Terms of Use Agreement.

Slinky

Slinky converts designs into HTML-based email templates. The only drawback is that the plugin is applicable only for SketchApp


Creator: Finch.io
License: Apache License, Version 2.0.

LogoMak

LogoMak is a generator for logotypes. Describe your business through tags and activity types and the service will provide you with the fonts and colors that are inherent to your industry as well as show excellent samples.


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

Lists

Dummy text is always on demand. In case you are a bit tired of Lipsum you can always diversify your workflow with some real data in your own language.


Creator: Julien Perriere
License: MIT.

Android adaptive icon templates

Create your Android O adaptive icons with this template without much trouble. It is available for Photoshop, Sketch, Illustrator, and Affinity Designer.


Creator: Marc Edwards
License: BSD.

Catégories: News dév web

Modern Web Design: Common Mistakes You Should Avoid

13 juin, 2017 - 10:00

Web design and development have changed a lot over the past years. Mobile internet is mainly responsible for this, changing when and where we use the internet. Many things that were common ten years ago are now considered outdated. This even applies to a lot of things that were completely up to date two to three years ago. What should you avoid doing when it comes to designing and developing modern websites?

Layouts For Desktop Devices and Smartphones Only

The days of developing your website for one view only have been over for a while. By now, you’ll only find very few websites without a responsive layout.

However, in a lot of cases, only two devices, or types of displays, are considered when it comes to responsive layouts: the classic monitor and the smartphone. Here, the desktop layout receives a fixed width, while the mobile layout is often stretched across the browser window’s entire width.

The differentiation between desktop and smartphones alone is not sufficient anymore. Nowadays, there are tablets, phablets, and a bunch of other different devices with various resolutions. Differentiating between two types does not do this evolution justice. Thus, you should keep your layout flexible enough for it to work on all resolutions.

On large monitors, your layout shouldn’t have any lavishly large borders on the left and right. And on tablets, the layout for mobile devices shouldn’t be displayed.

Mobile Version of Your Website

Let’s stick with mobile web design. When the options of responsive websites were very limited, own mobile versions for websites were developed. Even today, a lot of major news portals have an own mobile version, which is often accessible via an own subdomain.

Of course, this makes us face the same layout problem. On top of that, you’ll always have to take care of two versions of a website. The display of the correct version also fails to work in many cases. For instance, the mobile version is often loaded on tablets, although displaying the desktop version would actually be entirely possible given the resolution.

Hiding Content From the Mobile Internet

Websites are becoming increasingly more complex. This applies to the content, but also for the design. Large format images and graphics are combined with multi-column texts and additional sidebars.

The difference between the display sizes is becoming increasingly larger. Thus, nowadays, the goal is to design websites that look equally good on large monitors, and small smartphones.

This certainly is a challenge. A lot of web designers take the simple, but not recommended route. Supposedly expendable content is simply hidden on smartphones. This may make sense at a glance, making the website a lot clearer on a smartphone.

However, this approach is not beneficial for the visitor, as websites are accessed via mobile devices more often than via desktop devices. Because of that, no content should be withheld from smartphones. Instead, you should figure out a way to present all content in a clear, and space-saving way. This can be done by using sliders, or hiding content via the sidebar, and displaying it via a button.

Unsolicitedly Placing Windows and Videos Above the Content

So-called “Modal Boxes”, which are placed above a website’s entire content when a user tries to leave it, have turned into an annoying custom. These areas are often used to tell the visitor about the newsletter, or certain offers.

If you’re actually about to leave a site, they are not annoying. However, if you accidentally leave the top area of the site with your mouse, you’ll already get molested by said screen.

So, if you don’t want to annoy your visitors, you should stay away from these popups in modern web design – as beneficial as they may be for a website operator.

The same applies to videos that hide a website’s content without asking the user.

Simple Resolutions and Wrong Image Formats

The internet did not only become more mobile; the resolution increased as well. For displays and monitors, the size is not the only factor anymore, the resolution is one as well. This way, the pixel density increases, and the resolution becomes sharper.

This becomes increasingly noticeable with images. In a simple resolution, an image looks blurry and fuzzy on a high-resolution display. But HTML5 and CSS3 allow you to set different images for different pixel densities.

Use this option to make sure that your website looks good and razor-sharp on new devices. Alos select the right format for your images and graphics. Use JPEGs for photos, PNGs for graphics, and SVGs for vector drawings.

System Fonts and Too Small Fonts

Since web fonts have made it into all browser after many years, using system fonts is not necessary anymore. There are tons of free and charged fonts that you can take over into your web project. Make sure that these fonts are available in the new format WOFF2. This replaces the previous default format WOFF, and saves, even more, space thanks to better compression. Especially on the mobile internet, this is a big advantage.

Also, make sure to not make your fonts too small. And don’t use a single, set font size. On smartphones, fonts should have a different size than on large monitors.

Making the Visitor Wait

Today, users expect websites to load fast. Thus, you should develop your website in a way that makes that happen. Optimize images and use the right format.

Use techniques like the “<picture>” element, to always deliver the appropriate image size. Load lower resolution images on smartphones, instead of resolutions that are required on a large monitor.

Make sure that JavaScript doesn’t block or slow down the distribution of HTML, and ensure that externally integrated files don’t have a negative effect on your loading times.

Catégories: News dév web

SEO in a Nutshell: To Reach Google’s Page 1 Pay Attention to Links, Content, Keywords, and Performance

12 juin, 2017 - 10:00

Search engine optimization (SEO) is not rocket science, and anyone can do it with a rather small effort. You just shouldn’t believe the gurus and focus on a few aspects that make up the majority of your ranking success instead.

SEO: Pseudo-Scientifical Shamanism Dancing Around the Holy Grail of Google SERPs

Did I mention that I have a rather reserved stance on the SEO branch? The highly complicated, pseudo-scientific style is what scares me off. There’s no way that you either have to learn a 700-page book on the topic by heart or pay for an expensive SEO service just to get your website a proper ranking in the Google search results.

And you know what? That actually isn’t the case. Actually, there are only a few aspects that you need to pay attention to if you want a proper placement for your site. Of course, you can always dive into more details, dig even deeper. But keep in mind that the old Pareto rule also applies here. With 20 percent of the effort, you’ll achieve 80 percent of the success. That’s enough for me, what about you?

These are the aspects you should actually focus on:

Links

It has always been like that, and it’s probably always going to stay this way. The more pages the Google Crawler finds that have placed a link to your pages, the higher the guys from Mountain View will rank you in the results. This logic is feasible. If there are that many external websites agreeing that your content is good enough to link it, there has to be some truth in that. That’s Google’s way of referral marketing.

However, to prevent you from turning this referral marketing into a multi-level approach, the Californians also make sure that the incoming links are relevant as well. So, if you run a magazine on paragliding, Google will acknowledge links to your magazine coming from the sanitary wholesale, but it won’t consider them for the ranking.

This is supposed to make sure that backlinks are not only good in terms of quantity but quality as well. How do you get to this kind of backlinks?

Content

This leads us to the second important aspect, your content. If you’re looking around on the web for a bit, you’ll have an easy time finding content that has clearly been written for ranking purposes only.

These texts are often very long, and full of keywords, while being weak in terms of actual content, and not worth reading. This type of content does not help you in your overall concept.

In order to get external links in an organic way, without buying them, you need excellent content. Otherwise, there is no reason for an external page to link to your content. Excellent content is well researched, clearly worded, interesting, and exhaustive. It deals with a subject in a way that requires no further sources, as everything users need to know is already included.

Naturally, these texts are long, which generally is a good thing.

An important factor, related to the quality of your content, is the bounce rate. Google checks, how long your visitors stay on the website. If the leave the area within seconds, Google rates that as a negative sign. This would mean that your content is not as relevant as you thought.

However, if your content is good, but you still have a high bounce rate, you should check if your definition of “good” is not a bit lackluster.

I know fantastic texts that are 100 percent true and profound, yet nobody wants to read them. This has many reasons. It can be because of the typography, or because of a generally messy page design. It may be because there are no images or another type of structural clearing up.

In other words: content without design doesn’t work. Clear up your texts, so that not only Google but also your real readers like them. If you do that, the chance of the latter to stay on your website for longer increases, and the bounce rate improves.

Keywords

It’s also good to define relevant keywords, and use them in the text. All of this has to stay natural, though, and shouldn’t seem constructed. The only construction that’s allowed is when it comes to headings and your website’s title tag. Here, the keyword coming first is always positive. This way, the Google crawler gains the impression that this is content that specifically deals with the respective topic. While you can bend the title tag however you want to, please make sure to keep the headings legible.

Similar to the previously mentioned backlinks, Google also pays attention to the relevance of the used keywords. So you can’t just sprinkle keywords into your texts that don’t have anything to do with the content. This used to be very popular in the past, but nowadays, the search engine giant notices when people try to fool it like that.

Performance

On Dr. Web, you’ll find entire series of articles on this topic. Ever since performance, meaning a website’s loading speed, became a ranking factor in 2010, you should have looked very deep into it. Visitors will thank you for that by not leaving your website right away.

Experts are not sure to what extent Google currently uses the loading speed as a ranking factor. Some claim the topic was done with by now. I think, that the general speed increase in the web since 2010 may have lead to loading speeds being less problematic.

Nonetheless, going for a loading speed of at least below two seconds is recommended. WordPress users can find our big series on the topic here.

In general, responsive web design results in a better performance, as slim layouts are preferred here. As mobile friendliness is also a Google ranking factor, you can kill two birds with one stone here.

Conclusion

You need a slim, fast design, for both your website overall and your individual contents. Backlinks are generated via top-notch content that doesn’t leave any questions unanswered, doesn’t have an ad-like character, and is interesting enough to make users want to read it. Use keywords to make Google notice that your content is relevant.

Is this a shortened way of explaining this? Of course, it is. But that’s why I wrote the entire text above the conclusion. Now, go follow the mentioned aspects, and bring your Pareto effect to life.

Catégories: News dév web

JavaScript and Search Engines: What You Should Keep in Mind

9 juin, 2017 - 10:00

Just a few years ago, JavaScript was very controversial. Annoying ad popups were the reason why the programming language was often blocked by default. Now, it’s become hard to imagine modern web design without JavaScript. JavaScript is especially important in the mobile internet – as a means of playing media, but also for geolocations and navigations. But how well do JavaScript and search engines get along? What should you keep in mind?

Search Engines Have Learned

First things first, it should be said that the times when search engines were unable to handle JavaScript are over. While content loaded via JavaScript used to be invisible for search engines, they have learned something new by now. And when talking about search engines, I obviously mean Google, for the most part. The search giant is still the measure of all things.

To Google, JavaScript is no hazard by default anymore. However, that doesn’t mean that you can use JavaScript without any hesitation. As Google keeps the ways their search algorithm works secret, the following tips are to be taken with a grain of salt.

Loading Content Via Load Instead of User Events

Oftentimes, events are used to alter a website’s content via JavaScript. Here, search engines usually only consider content loaded via Load events.

These results are fired from the browser as soon as a site’s DOM tree is loaded. Search engines like Google allow for load events during crawling, so that the site’s content is usually only indexed after the execution of the load events.

User events are not loaded, though. Thus, all changes triggered via click or touch events, for instance, will not be considered during indexing.

Push-States and URLs

In order to allow Google to index a site, it always has to be accessible via a URL. Thus, click events cannot be considered either, as they always display content triggered by an individual user.

Thanks to JavaScript’s push state API, it is possible to influence a website’s URL. This allows you to realize a website’s entire navigation via JavaScript, by using “pushState()” to alter the URL displayed in the browser, while loading and replacing content via JavaScript at the same time.

As Google can’t index URLs that are exclusively realized via push state API, each URL created using “pushState()” also needs to have a “real, existing” URL.

By the way, this is not only interesting for search engines, but for social networks as well. That’s because you can only share sites that have a “real” URL. Facebook and Twitter also need to extract content from a site, which only works if there’s a URL.

It’s important to always use “pushState()” to create correct URLs that also always have the right content via JavaScript. A wrong push state URL that doesn’t load any new content may lead to double content. And search engines don’t like that either.

Don’t Exclude JavaScript

It may be self-evident, but should still be mentioned. Of course, you have to make sure that JavaScript files are not excluded for search engines. If the “robots.txt” generally prohibits JavaScript files, search engines don’t have a way to access them.

As JavaScript itself doesn’t contain indexable content, it is often hidden from search engines.

Progressive Enhancement

Regardless of all options that Google and other search engines give you to allow you to crawl content created via JavaScript, the safest method is still the so-called “Progressive Enhancement”.

This principle pursues the approach that content has to be prepared in a way that makes them available, regardless of the browser, or crawler.

Concretely, this means that texts, images, and other content supposed to be found and searched by a search engine, should function without JavaScript, if possible.

However, this is often related to a significant additional effort for the web developer. Each website basically has to provide all content even without JavaScript. Depending on the type and preparation of the content, certain compromises where only important content is displayed without JavaScript can be viable options.

Here, you have to judge which effort is reasonable for your project.

Correct Semantics

With and without JavaScript: in any case, it’s important that your content is labeled semantically correct. Headings loaded via JavaScript need to be labeled with the respective HTML elements as well.

Here, the same rules that apply to normal content apply. In the end, for Google, the decisive factor is what the HTML source text looks like after the execution of JavaScript. Thus, choosing the right elements is crucial.

Testing Crawler View

If you choose to load content exclusively via JavaScript (not following the “Progressive Enhancement” principle), you should test to see if search engines can correctly, and completely see and crawl your content.

Google’s “Search Console” is one of the things helping you here. Under “Crawl”, you’ll find the function “Fetch as Google”. Here, you can display a website for mobile and desktop devices, in the way that Google actually crawls it.

However, there are other, mostly charged, tools like SEO.JS, and preprender.io which have specialized on checking if a website’s JavaScript contents are properly displayed during crawling. This may be a sensible addition for complex projects.

Catégories: News dév web

Webdesign Inspiration: 10 Unusual Navigation Menus

8 juin, 2017 - 10:00

Sick and tired of overused hamburger buttons and boring streamlined top navbars that stick to the header? Lack of ideas how to take your navigation to the next level, keeping its UX properties but making it a design’s star? We have got you covered.

In today’s article, we are going to examine ten different websites whose owners had guts to stand out from the crowd by transforming their navigation menus into original components. Some of these solutions are refreshing takes on the classic approaches while others are the new kids on the block.  Explore our collection and tell us which one is your favorite? And what do you think about the extraordinary menus?

Cesare’s Personal Portfolio

Cesare’s personal portfolio has an intriguing isometric navigation. Presented as a classic template wireframe in eye-pleasing ¾ view with all the functional blocks neatly animated it recreates truly powerful impression and engaging user experience.

Dino Balliana

Dino Balliana offers its online visitors two styles for the navigation menu. The first option is standard: it is regular and plane; whereas the second one is three-dimensional and solid. You can switch between these two and choose your preferred one.

Block Studio

Block Studio’s front page has a distinct high-tech vibe enhanced with some corresponding animations. Although the menu is merely a set of 4 links, nevertheless, thanks to a skillful organization they ideally blend into the environment, finishing off the look and playing an integral part of the composition.

Off-Box

Off-Box goes for a simplicity that is subtly reinvented. Line style, clean and neat classy 3d presentation, a ton of fresh air and dominant white color generate a fantastic user interface.

Hi-Pointe Drive-In

Hi-Pointe Drive-In is bursting with energy and positive emotions. Its main navigation is displayed as a bunch of whimsical photo-based blocks that are jazzed with vibrant splashes of color. It is a great example of how to inject some life into a common menu.

Compact Disk Dummies

Compact Disk Dummies welcomes the online audience with a 3D scene populated with numerous objects. This slightly untidy room hides all the navigation links. It is your job to find them all. Hint, hover the mouse cursor over the old-timey TV set and you will see a link to the video section.

Bar Formations

Bar Formations is up to producing a strong visual impact from the get-go. Much like in the previous examples, the navigation takes in its possession the entire screen. It combines the regular sidebar panel with links and image- and video-based blocks that represent the most important sections of the website. Brilliant typographic pieces give a design special appeal.

Gibeon

Gibeon is succeeded in embracing chaos. There are so many things happening here. However, the boxy structure with rigid organizational layout effectively glues everything together bringing about a more less harmonious homepage. It serves as a navigating tool.

Do you Speak Human?

If the previous example overwhelms you with its content-heavy solution then this example will delight you with its neatness, accuracy and spacious. Although Do you speak human? adopts the same grid-like structure, its navigation feels much cleaner and tidy.

Truff

Down with the artificial angular graphics with sharp and robust feeling. Truff takes the advantage of the illustrative approach. The website is impregnated with an artistic vibe so does its navigation through the inner structure. Each section is introduced as a lively mysterious drawing.

Catégories: News dév web

Free for Commercial Use: Another Load of Free Stock Photos

7 juin, 2017 - 10:00

FFCU is the abbreviation of the new stock photo provider “Free for Commercial Use,” and that name says it all. All you’ll find on FFCU are completely free to use photos. You probably already know the mind behind the service.

FFCU: Public Domain For Every Legal Purpose

Regular readers of Noupe already know the name Markus Spiske. The photographer and media designer from the German city of Erlangen is also responsible for the stock photo page Raumrot, which we also presented here, back in 2014.

Of course, brain-active readers will immediately ask why you’d need two of these websites. The answer is simple. On Raumrot, all images are under the license CC-BY-2.0, requiring users to mention the creator, origin, and license.

Spiske gets rid of this requirement on Free for Commercial Use (FFCU) entirely. Of course, he’ll be happy to see you give back attribution, but it is not required for you to be allowed to use them. The contrary is the case, as Spiske clearly labels all images on FFCU under CC0 and public domain. This means the photos are completely free to use for any legal purpose.

The photographer stays true to his style on FFCU. Spiske’s photos always have a vintage touch, and always focus things in detail or off the common perspective. You won’t find random snapshots in his arsenal. Nonetheless, he manages to take images in a way that still makes them good options for general purposes. The following photo can serve as a good example:

FFCU already contains 1,000 images, and Raumrot has also grown to more than 1,000 photos. The delivery of the FFCU photos is done via the photographer’s Strato Hi-Drive. All images are provided in 300dpi resolution and weigh about 10 MB. Only time can tell how long Strato will let this slide. In the worst case, it should be possible to find an alternative solution for the distribution pretty quickly.

Clean: Wanted and Found

On FFCU, photos are sorted by topics, and displayed in grid overviews. You get to like, and share individual images on Facebook, Twitter, or Pinterest, directly from the grid. One click on the photo preview opens the respective image’s detail page. Here, you’ll receive some background information on the picture.

However, information that would be interesting for photographers, such as the entire EXIF area, is missing. Alternatively, you can use the free text search to go through the individual subject areas. As a result, you won’t get a grid overview, but a list of results.

If you’re looking for public domain images that don’t look just like a million others, FFCU is definitely worth visiting. The photographers’ special style won’t appeal to everyone, but, in the times of the omnipresent Instagram filters, it is entirely suitable for the masses, without obviously trying to be.

Catégories: News dév web

Parallax-driven Hero Sections: 10 Great Examples

5 juin, 2017 - 10:00

Keep the theme alive and enhance the visual experience – are two main things that parallax effect introduce to the website.

While we have accustomed to seeing parallax effect in tandem with long scroll-powered pages, for several years in a row this simple method is applied individually and locally across the entire website. You can stumble upon it on work sections, sliders and most often in hero areas. Traditionally, it is used to recreate a sense of depth and smooth motion. Today we are going to look through 10 websites with parallax-driven front pages.

Fotonaut

Fotonaut’ homepage is based on a sophisticated, multilayered layout. A ton of 3D objects is scattered throughout the screen, making the page look chaotic and complicated. Here the smooth parallax effect helps to add a pleasing sense of depth.

 

Matthieu Tourdes

Matthieu Tourdes leverages parallax effect to reinforce the appearance of the front-page slider. It is applied to the central part naturally driving the overall attention to his works. Also, it plays nicely with the opening transitions.

 

Vyctoire

Vyctoire’s homepage gives off a little charm: gorgeous pastel coloring and lots of fresh air produce a compelling visual clarity. The parallax here is increasingly subtle: it glues only the elements that are located in the heart of the screen, gently reinforcing the atmosphere of elegance.

 

PixelPink

PixelPink has an oversimplified first page of their portfolio. It is clean and populated with plain geometric shapes like circles or squares. Here parallax is used to give a composition a nice zest transforming a dull design into an engaging scene.

 

2016 Changed Design Forever

The team behind this project uses the boxy vibe in a creative way. Not only have they skewed the image panels to make them look three-dimensional, but they also connect everything together with the parallax effect, completing the tone of the website.

 

Jay Vi Official

With such a stunning 3D rendering used as a hero section, it is only natural for the team to bring in some parallax effect here, boosting the general impression significantly. It ideally blends into the environment, making its important contribution.

 

Keley on Mars

Much like the previous example, the official website of “Keley on Mars” greets the online audience with the refined multilayered hero section. There are many renderings that due to parallax effect smoothly move and float over the screen.

 

Big Horror Athens

It is here where the parallax effect meets the chaotic yet eye-pleasing and enticing particles animation. Together they recreate a harmonious symbiosis that converts a plain page into a small amusing playground.

 

Raoul Gaillard

Not only is the welcome screen of Raoul Gaillard’s portfolio charged with a parallax effect, but also the work section. Both of them benefit from the technique. The design stays clean and tidy; and, thanks to tricks with shapes and parallax it looks alluring and intriguing.

 

BorgoVeneto

BorgoVeneto uses parallax effect to embellish the already intricate and elaborate slider. Here the multilayered compositions are spiced up with advanced particle animations that react to the mouse cursor. And parallax just works together with all this, bringing about an incredible experience.

Catégories: News dév web

Page Weight: Free Web App Checks Your Website For Image Obesity

2 juin, 2017 - 10:00

Big images slow down your website’s buildup on the visitor’s device. That’s logical. Nonetheless, a lot of page operators don’t think about this circumstance at all. The free tool Page Weight helps you diagnose and remove graphic obesity.

Page Weight by imgIX Focuses on the Image Effect

Of course, pictures are not the only thing straining your site. To go through a complete performance optimization, you need to look at other factors. However, images are the area that is the easiest for you to improve, even without a lot of expertise, if you are not a web developer, to begin with. Unoptimized or not properly optimized images can easily double, or even triple the weight of your website. The longer the visitor browser needs to download the pictures, the later the visitor will see your content, and he may even lose patience and switch to the competitor next door.

Thus, focusing on the image weight is a pragmatic thing. The provider of the free web app Page Weight, the company imgIX, doesn’t have any altruistic motives, and simply wants to promote their optimization service. However, this does not reduce the usefulness of the tool. Thus, let’s just acknowledge that. If you happen to be interested in delivering optimized images from within the cloud, aside from imgIX, you could also look at Cloudinary. These two competitors seem to be the most potent to me.

Page Weight: Which of Your Images Performs the Poorest?

You can use Page Weight by entering the URL of the website you want to check in the prominent input area on the service’s landing page:

After a bit of thinking, Page Weight gives you a rather extensive result, starting with the important information how it rates your page weight overall:

As you can see, our German sister site Dr. Web is rather light-footed but has further optimization potential. Looking at what Page Weight criticizes, I can tell that it dislikes a couple of images that were uploaded by an author that, apparently, didn’t care about our optimization guidelines. Well, be that as it may.

In any case, Page Weight tells you when the measurements of your images exceed the ones of their containers. Of course, this also leaves room for potential weight saving. At the top of the overview, you can switch between the analysis for desktop and mobile.

Page Weight is a fast and uncomplicated way to determine if a larger optimization project would make sense on your website. For that reason alone, the handy web app belongs into your toolbox.

Catégories: News dév web

Website Builders: Are Web Designers Dying Out?

1 juin, 2017 - 10:00

The tension increases. It’s almost impossible to surf the internet without stumbling across ads of one of the major website builders. “Do it yourself” is on the come up, it seems. Are web designers dying out?

First, the Answer

The question whether web designers will die out in the near future or not can be answered with a clear yes, and a clear no. It depends. It depends on how you define the job.

Web Design in the Year Dot

In the past, web design was a gold mine, simply because there was barely anyone doing it. It was also nice that there was, and still is, no qualified job, so that anyone could (and still can) call themselves web designer. It didn’t take long until cooks, apprenticeship dropouts, and academic high school students called themselves web designers, and built the internet’s first, terrible, wooden shacks.

Over time, the graphic skillset of many, though not all, competitors improved, and web competencies became a part of studies and apprenticeships. Professionalization set in.

The beginning of web programming was the beginning of the web’s appization. From that point onwards, websites didn’t just have to look good, they also had to be able to do a bunch of things. Content management systems, like WordPress, came into play, making content management on the web available to everyone.

Surprisingly, web designers adopted the topic CMS under the aspect of theme development, and in no time, there was a vast amount of pretty, and less pretty templates, that clients could apply to their CMS.

Pretty coatings were popular back then, and they still are today. Some people may make a living of being a theme creator, but most don’t.

The Rise of Website Builders

For everyone that can’t, or doesn’t want to deal with CMS technology, or is not ready to commission a web designer, the industry of website builders was created. Their abilities grew quickly. Nowadays, website builders have features that leave little to be desired.

The code quality has shifted from abysmal to top as well; not for all of them, but for the leading builder systems. Partially, the code quality is so good that even a manual coder couldn’t improve it any further. Oh, my.

Designwise, as long as we’re talking about aesthetics, there is nothing left to criticize either. As websites become more and more similar visually, the design doesn’t really allow for a portrayable separation.

This may shock good part of the branch. “If a customer can get a website that’s just as pretty as the one I would make much cheaper by using a builder, why should he even commission me?” At a glance, this seems like a justified question.

“Oh, just offer additional services” is what some people will tell you, and what they have in mind is the technological hosting, like classic web mastering. More and more people also use search engine optimization as a service that’s important to every customer. Others focus on a programming language that basically allows them to read all of a client’s wishes in their eyes. The number of people trying to convince a customer that a custom-made suit is still better than a stock one is decreasing. And so is the number of clients that believe it.

All of these web designers have one thing in common. To them, web design is both a design-related and technological task. Web designers that think this way will disappear from the market. Yes, they’ll die out.

The Emperor’s New Clothes

Now, let me ask you a question: “What do you think? Will Mr. Meyer from the post office become just as good of a seller as our top seller Mr. Smith as soon as I buy him the same suit?”

You might think this was a stupid question, and you’re right. And as soon as you realize that, you’ll have realized where the assessment error is when looking at the relation between a web designer, and the website builders. Do you think your customer wants a neat coat for his website, as well as a few SEO tricks, and a reliable hosting?

Of course, he does, but it’s not his primary goal. For most clients, the goal of a website will be selling goods or services. Of course, our top seller can’t be naked when talking to the clients. He does need a representative suit, but his abilities as a seller are much more important.

No website builder and no CMS takes this approach. They are able to provide a structure and the looks, but that’s it. You as a designer, are able to form this basic mass, this dough, and turn it into a product that you can sell. Just like back then, selling is done using words and images.

Away From the Roots

You should think of your design job in a much more extensive way. Of course, you have to create a technologically reliable, visually appealing basic environment. But, in order to reach your clients’ goals, you have to support their marketing.

Thus, I don’t think it’s an exaggeration to say that the designer’s future is in the words. Modern websites tell stories of products and services, as well as people that use these products and services. So, looking at the designer of the future, I’d say: “He who writes, remains.”

Based on the tendential uniformity of modern websites, UX design becomes increasingly significant. The path of the customer through the website has to be labeled and signposted as good as possible. A purchase has to feel natural and be smooth and fast. Microinteractions are more important than ever. Look at different apps with the same purpose. The app that makes the given task as simple and comfortable as possible is always the most popular.

You can customize web sites using images, illustrations, words, videos, and well thought-out UX features, as well as the above-mentioned micro interactions. All of these aspects are ways for you to set yourself apart from website builders, no matter how great they may be aside from that.

You should do all of this in a contemporary website. No matter who provides it. If this is how you define your job, you won’t be one of those that’ll die out.

Catégories: News dév web

Security For Any Website: Cloud-based Web Application Firewalls

1 juin, 2017 - 10:00

Keeping the bad guys away is no longer a question of space, expertise, bandwidth and money. Cloud-based web application firewalls are available to just about anyone running a website.

Firewalls Then and Now

Running a firewall in front of a web presence is generally advisable. All visitor traffic is directed through the wall, which is able to tell malicious requests from regular visitors. As soon as a malicious attack is identified, the firewall will block the attacker from reaching the web server. This way, no security breaches or exploits that might exist on the web server can be made use of. Imagine a firewall as sitting between the visitor and your web server, acting as a filter through which any information in and out has to pass.

On-premise means physical, a disadvantage in itself. (Photo: Pixabay)

Firewalls can be run on the same machine that hosts the web server, but this is a security flaw in itself. Thus, typically, firewalls for websites are run on their own hardware, which constitutes a disadvantage: anyone able to corrupt the firewall automatically gains the access they were trying to. However, as web application firewalls are off-site, constantly monitored and updated, and maintained by security experts, in the unlikely case of a breach, 24/7 teams will deal with the issue.  This way breaching the web access firewall does not automatically mean accessing the web server as well.

From that perspective, it becomes clear why firewalls have been a luxury product in the past. They were only used by companies that drove their own server farms with the proper bandwidth connection and had large hardware requirements, networking expertise and the money to install and maintain them, including someone to keep an eye on their reports and status at all times. All the many page operators running on hardware not their own were left out of the game.

That changed with the rise of cloud-based services on the one hand (you can even keep your fonts in the cloud nowadays) and the increase of connection speed and bandwidth on the other. Today, this “filter” – the firewall – can be located just about anywhere, as long as it has a robust internet connection. With the ever-rising amount of data centers around the world and the ever-rising power of the big cloud service providers such as Google, AWS or Azure, this problem declines and will rather sooner than later disappear completely provided individual operators consider security and deploy a WAF.

These new developments are not only very appealing to companies that have not opted to use firewall protection up to now but also for those that have. When space and costs are issues, cloud-based firewalls can be a perfect relief.

Advantages of Cloud-based Firewalls

Although much more frequently used in recent years, web applications have been around since the early ‘00s, and experts have always called for increased levels of security for web applications due to their more accessible nature. As rising the security levels and blocking potential attackers is the general task of any firewall, let’s concentrate on the specific benefits that are unique to cloud-based offerings.

Performance

We all know that computing power in the cloud is limitless. Cloud servers are as virtual as can be. You need more processor power? Book it for three hours or however long you need? The same goes for memory, space, whatever. In-house, also called on-premise firewalls, are limited to their physical configuration. This is certainly something you cannot change with a click of your mouse for the next three hours.

Cloud-based firewalls are not one device but a virtual powerhouse that is as large as it needs to be and can be easily extended. If you let it, it scales infinitely. Conceptually, this makes it faster as any on-premise firewall you could think of, at least when your money resources are not limitless.

Expertise and Uptime

Booking a managed cloud-based firewall frees you of all sorrows regarding that firewall. Managing a firewall is no child’s play but a challenging task that demands real expertise. Are you able or even willing to pay for a team of 24/7 experts?

Security Staff is Expensive. (Photo: Pixabay)

Firewall providers are. As they can solely focus on the management of their firewall services they usually reach uptimes of close to 100 percent. They’re able to update the rules to the latest threats rather than relying on annual (or worse) updates. Try to achieve that with an on-site team.

Higher Recognition Rate and Handling Capabilities

Providers of cloud-based firewalls see way more traffic than you will when running your appliance. Thus, they will recognize new types of attacks earlier than you would, which makes it likely that they will be able to respond faster to these future threats than you could.

It is also possible for dedicated firewall providers to architect specific solutions for specific problems. The sheer computing power also allows then to handle large-scale attacks more successfully than you would.

Lower Cost and Higher Relaxation Rates

Cloud-based firewalls bring better security to more page operators and at affordable rates. Even companies running on-premise appliances might double-check whether it wouldn’t be wise to add cloud-based firewalls to their security strategy. Security won’t suffer, that’s for sure. And the addition will not cost a fortune or put further load on the IT team.

Disadvantages of Cloud-Based Firewalls

Nothing comes without downsides, not even cloud-based firewalls. These are only to be considered if you have alternatives, however. If it is technically impossible for you to run your on-premise firewall, you need not read further. Book a cloud-based firewall instead. If you have the capacities needed to run on-premise security, the downsides of cloud-based security are evident.

If your IT room doesn’t look like this, go cloud-based. (Photo: Pixabay)

It is Cloud-based

The security of your company is dependent on third-party reliability. The provider’s staff will have access to all the information passing the filters. Any outage will happen out of your range. You will need to rely on the provider taking proper care of the security of their security appliances.

You get the point. Outsourcing a firewall service is about letting go and trusting. This goes for any outsourcing you’d ever consider. If you ask me, I wouldn’t see too many problems hiding in the shadows as long as we are talking about a web application firewall. There are companies that offer both appliances for on-premise installation as well as cloud-based services based on the same technology.

When it comes to a firewall strategy as a whole, a hybrid approach might be preferable as soon as you meet the requirements for own installations. If you don’t, cloud-based is your only friend.

Catégories: News dév web

Contact

Une question, une remarque ?
Une demande de devis ?

Contactez-moi

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