Design

Design

SVG: How to Work With Text and Font

January 3rd, 2016
by
SVG: How to Work With Text and Font

The SVG format is not only useful for the display of vector based shapes. You can also place and edit font in it. In contrast to semantic font labelling in HTML, there are some particular things you need to keep in mind. You should also know some differences to the markup via CSS. Marking Fonts Via SVG and Editing With CSS While HTML knows...

Design

How to Create Websites That Meet Visitor Expectations

December 29th, 2015
by
How to Create Websites that Meet Visitor Expectations

Creating good websites starts with a certain consistency. This consistency is essential for the cognitive burden of a website’s visitor. When your design is consistent, using the website feels smooth and logic. However, when it is inconsistent, the user needs to put in unnecessary effort. This is what you need to avoid when you want to create websites that meet the expectations of your...

Design

HTML5: Plyr is a Responsive and Accessible Video Player

December 26th, 2015
by
HTML5: Plyr is a Responsive and Accessible Video Player

Today, those that want to integrate video and audio files in a website, rely on HTML5. Plyr is an extensive tool to help with that, allowing you to create a custom interface for HTML5 video and audio. As Plyr is a contemporary piece of web technology, it is both responsive and accessible. Simple Operation, Freely Configurable Coming to results with the Plyr is easy....

Design

Noupe says “Merry Christmas”

December 24th, 2015
by
Merry Christmas

Whether you are celebrating Christmas or not. We wish you all the best no matter what. Take the days until year’s end to reflect on what has been and what is there to come. Foremost, spend time with your loved ones. No matter the colour of your skin, your religion, your sexual orientation – we are all world’s citizens. We here at Noupe live...

Business Online

16 Fresh Free eBooks for Designers and Developers

December 18th, 2015
by
free-ebooks-teaser_EN

Being a designer or developer means that you’ll never be able to stop learning. Learning is like your second leg. You can still move with only one but won’t win any contests any longer. Free eBooks are perfect in helping you staying updated as they usually offer knowledge in a very compact form. That way they don’t take up too much of your time,...

Business Online

Four Tools for Creating HTML5 Banners in Seconds

December 17th, 2015
by

Banner ads are delivered in Flash less and less often. HTML5 has become the standard for online advertising as well. Thanks to CSS3 animations are possible without any issues and interactions are made possible with JavaScript. Of course, HTML5 banners can also be created manually. But there are plenty of free and paid tools that are specialised in the creation of HTML5 based banners....

(Free) Services

Simunity Icon Maker: Create Awesome Pictograms in Seconds

December 14th, 2015
by
Simunity Icon Maker: Create Awesome Pictograms in Seconds

Based on the Font Awesome Icons used for Bootstrap, the developers of the homepage builder Simbla came up with an icon maker that allows you to create custom pictograms in a matter of seconds. Two colour selectors, a few sliders and two collections of shadows and frames are all it takes. Good Choice: Based on Font Awesome The creators of Simbla chose Font Awesome...

Design

SVG: How to Create Interactive Graphics for Your Website

December 9th, 2015
by
svg-interaktiv-teaser_EN

You surely know that SVG is much more than just a vector-based file format. Animations as well as interactions are also a part of the vector format’s arsenal. As JavaScript can also be used within an SVG file, there are plenty of usage options. The JavaScript solution svidget.js provides an extensive framework which allows you to create and integrate SVG graphics as widgets. Creating...

(Free) Services

Web App: Drawing SVG Online with Method Draw

December 8th, 2015
by
svg-online-method-draw-teaser_EN

Adobe Illustrator, as well as the free Inkscape, are able to work with SVG. They can edit and save vector graphics in this format. These apps are not the only ones, however. The web app Method Draw allows you to draw vector graphics in a way similar to a classic desktop application, and you can test them directly in the browser. Besides SVG, Method...

Design

RulersGuides.js: Photoshop-inspired Web Design Helper Tool

December 5th, 2015
by
RulersGuides.js: Photoshop-inspired Web Design Helper Tool

The ruler and the possibility to draw auxiliary lines are indispensable features of Photoshop and other image editing and drawing applications. Why only Photoshop and such? Measuring distances and checking orientations via auxiliary lines can be helpful on a website as well. RulerGuides.js comes to your rescue. It adds a ruler with the mentioned features to any website via a bookmarklet. RulersGuides.js: Features Known...

Design

Better Portable Graphics: What the New Image Format Can Do

December 2nd, 2015
by
Better Portable Graphics: What the New Image Format Can Do

JPEG and PNG are the two popular formats used to display images in the browser. Even though the internet gets increasingly faster, it is especially important for mobile devices to keep the file size as small as possible. The new BPG format, which is short for Better Portable Graphics, is the alternative to the popular formats, and it promises smaller files as well as...

Business Online

How to Design Forms That Increase Your Conversion Rate

November 30th, 2015
by
How to Design Forms That Increase Your Conversion Rate

A visually attractive form doesn’t help much when only a few visitors fill it in. In reality, a neat design is limited in its effectiveness as it only works in combination with other factors that need to be considered as well. In this article, I will give you advice on how to shape forms regarding content to increase the conversion rate which, in this...

Design

HTML5: Create a Top-notch OnePager with Slides

November 27th, 2015
by
HTML5: Create a Top-notch OnePager with Slides

OnePagers, websites that consist of one page divided into two or more segments, are still growing in popularity. If I remember correctly, Apple were the ones who started that craze with their presentation of one of the later iPhones a few years ago. The classic OnePager consists of a full-screen presentation of a topic, garnered with large imagery, a subtle header with navigation, an...

Design

SVG without SMIL: Google Chrome Kills Support

November 24th, 2015
by
SVG without SMIL: Google Chrome Kills Support

It should be common knowledge by now that interesting charts, illustrations and complex animations can be created using the SVG format. SVG provides three different ways of creating animations. Next to JavaScript and CSS3 animations, SMIL is another approach to making shapes move. However, with Chrome 45, Google classified SMIL animations as deprecated and will not support them in the future. Why did Google...