Articles by Denis Potschien

Google Profile: http://plus.google.com/108355723592614585569/posts

Design

Chartist.js Creates Responsive, Animated Charts with SVG

June 12th, 2015
by
chartistjs-teaser_EN

Numbers and statistics are usually bone-dry and sometimes not really clarify but obscure even more. By visualizing data with charts, you can attract much more attention. The JavaScript library Chartist.js from Zurich turns as many numerical sequences as you like into easy to understand bar, line, pie, or other charts. They not only look good but are also responsive and can be jazzed up...

Design

Lining.js: Controlling Text Lines per CSS Selector

May 30th, 2015
by
Lining.js: Controlling Text Lines per CSS Selector

The numerous available CSS selectors let us easily access almost each and every HTML element on any given page. The pseudo-element ::first-line even allows us to apply CSS properties to the first line of text in a document, no matter whether the line is automatically or manually wrapped. Unfortunately, besides ::first-line there are no selevtors to manipulate the second, third, last or whichever line. The...

Business Online

How Does Google’s New Ranking Factor Mobile-Friendly Affect Your Website?

May 29th, 2015
by
mobilefriendly-teaser_EN

Google has been changing its search algorithm time and again to deliver better search results. Factors like keywords, link building, and loading performance play a key role in how Google ranks a website. On April 21st Google officially issued a new ranking factor: the mobile-friendliness of a website. How is this going to affect site operators and what does mobile-friendliness mean from Google’s point...

Design

Stitches: Free CSS Sprite Generator

May 22nd, 2015
by
stitches-css-teaser_EN

As we know, less files to download mean better loading performance and page reproduction. Therefore, icons and other images, particularly small images, are often combined into a sprite. A sprite is a collection of several images put into one image file. Creating a sprite manually requires some work. The images are arranged in an image file and their position, width, and height need to be...

Boilerplates & Other Tools

WebAnimator Plus: Sophisticated HTML5 Animations Made Easy

May 18th, 2015
by
webanimator_landingpage

Not too long ago, Flash was an established element of the web. Did you need anything related to animation, you were more or less doomed to use it. Of course Flash was the top dog – the alpha male – and alternatives didn’t exist. But that was only one-half of its success. The second half was its ease of use. Flash videos were created...

Development

Animsition: User-Friendly jQuery-Plugin for Animated Page Transitions

May 15th, 2015
by
animsition

JavaScript along with CSS3 make it easy to create website animations. Some use CSS3 animations to pimp page transitions within a website. The current Cascading Stylesheets version allows you to create simple fade-in and slide-in effects as well as 3D transitions to other pages. The fairly new jQuery plugin “Animsition” helps to easily integrate such animated page transitions into your web project. Incorporate Data,...

Design

HTML5: Screen Orientation API Uses Javascript to Rotate the Screen

May 8th, 2015
by
html5-screenorientationapi-teaser

Media queries allow websites to adjust their layout depending on the screen orientation of a smartphone or tablet. But sometimes you may want your website locked to a particular orientation, portrait or landscape. The format of native apps can be specified in such a case. The app will then only be displayed in the preset format – independently from the actual device orientation. By...

Development

Flickity: Beautiful Galleries on All Devices – Responsive and With Gesture Control

May 6th, 2015
by
Flickity

There are several solutions to creating galleries via JavaScript. But sometimes you may find the handling is not convincing, others provide a rather poor functionality. Flickity, however, is a state-of-the-art JavaScript framework for galleries that works great on desktops, as well as mobile devices. The gallery is responsive and can be controlled with your mouse or gestures – or even your keyboard. Thanks to...

Design

HTML5 and CSS3: Get Your Website Ready for High-Resolution Displays

April 22nd, 2015
by
HiDPI and HTML5/CSS

When Apple introduced a new high-resolution display – the so-called Retina display – for its iPhones, iPads, and MacBooks a couple of years ago, they ushered in a new era of display quality. On such screens, the human eye can’t discern individual pixels anymore. With high-res displays being the norm rather than the exception today, you’ll find more and more middle-range high-res mobile devices....

Essentials

OCR on Images with Project Naptha – a Clever Chrome Extension

March 19th, 2015
by
OCR on Images with Project Naptha – a Clever Chrome Extension

You rarely come across bitmap-based image formats like JPG or PNG that have longer texts in them. However, titles and additional information in images are quite common. Often you’ll find longer texts in screenshots. This text information can’t be highlighted and read by your browser, however. The Chrome extension Project Naptha allows you to highlight and read texts thanks to its built-in OCR. And...

Development

JavaScript: Create Circular Navigation Menus With Wheelnav.js

March 13th, 2015
by
JavaScript: Create Circular Navigation Menus With Wheelnav.js

Navigations don’t always have to be arranged horizontally or vertically. They can indeed go round in circles. And that’s where Wheelnav.js comes into play. This smart little tool allows you to arrange menus in circles. Selections are made by spinning the wheel. Wheelnav.js is based on Raphaël.js, which allows you to draw SVGs using JavaScript. Kick-start: Incorporate Libraries and Mark Elements Before we start,...

IMHO

A Life Without Adobe: Possible, but Pointless (IMHO)

February 28th, 2015
by
A Life Without Adobe: Possible, but Pointless (IMHO)

Adobe celebrates the 25th birthday of Photoshop. The first version of the image editing program came into market in 1990 and marked the beginning of the worldwide success of the Californian company. Photoshop is in all likelihood still the most famous product of Adobe; being popular and in use by a broader clientele than just the design industry. Throughout the last 25 years, Adobe...

Design

Logo Design According to Zeitgeist: Not Only the Times are Changing

February 26th, 2015
by
Logo Design According to Zeitgeist: Not Only the Times are Changing

Logos, be it wordmarks or symbols, are rarely „timeless“. Instead, they are regularly adapted over time – sometimes tentatively, sometimes more radical. Apart from taking on style details such as gloss, 3D, and shadow effects which disappear with the fading of those design trends, there seems to be an underlying general direction in logo design: shapes get more simple, proportions more harmonious, and details...

Design

Adobe Lightroom Mobile: Image Processing on the Go (including Android)

February 18th, 2015
by
Adobe Lightroom Mobile: Image Processing on the Go (including Android)

Last month, Adobe released a new version of its Lightroom app for mobile devices. For the first time this app is not only available for iPhones and iPads, but for Android devices as well. But how efficient can image processing on tablet or smartphone actually be? Lightroom Mobile: Free of Charge, but Can Only Be Used with a Subscription The Lightroom app is free...