Articles by Denis Potschien

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

Design

HTML5 Brings Tables Back: Contemporary Grid Layouts with CSS Grids

July 18th, 2014
by
HTML5 Brings Tables Back: Contemporary Grid Layouts with CSS Grids

Back in the days where CSS was a rumour and content and design were not divided, building a website using tables was perfectly common. With the rise of the semantic web tables were redefined to be used only for their original purpose, structuring data, that was meant to be shown in the form of tables. Furthermore, CSS didn’t bring forward an easy way to...

Development

HTML5 Imports: Import HTML Files Into HTML Files

July 15th, 2014
by
HTML5 Imports: Import HTML Files Into HTML Files

The „link“ element is a blessing. It allows for easy embedding of stylesheets and JavaScripts needed in multiple documents. It didn’t allow the embedding of HTML files, though. To achieve that we were limited to the „iframes“ element or the JavaScript method „XMLHttpRequest()“. Thanks to the new HTML5 Imports, we can now use the „<link>“ element to load one HTML file into another. Simple...

Design

HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API

July 11th, 2014
by
HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API

Navigation devices do it since forever. Now browsers are learning to do it, too. I’m talking about speech synthesis. HTML5’s new Speech Synthesis API allows your website to speak or more precise, to read out loud what is written there using a human voice. There are different voices for different languages, even several voices per language. Now all it takes is pressing a button...

Boilerplates & Other Tools

CSS Framework Cute Grids: Highly Flexible Grid System for Responsive Layouts

June 13th, 2014
by
CSS Framework Cute Grids: Highly Flexible Grid System for Responsive Layouts

These days it is impossible to ignore the power of mobile. So, if you’re in the process of designing a website, chances are that you will do that with mobile in mind. Most likely, you are working on implementing a fully responsive layout. The lean and clean CSS framework we want to introduce you to today, wants to help you achieve that goal easily....

Development

Coming to a Screen Near You: CSS3 Animations and The New JavaScript Method Animate()

June 4th, 2014
by
Coming to a Screen Near You: CSS3 Animations and The New JavaScript Method Animate()

With CSS3 animations in HTML documents have become fairly easy to achieve. Using the "@keyframes" rule various properties such as position and size of an HTML element get defined. Then the property "animation" cares for getting the keyframes up and running according to their definitions. Without the need for JavaScript and plug-ins we are able to create even complex animations, that run most flawlessly...

Design

CSS3: Viewport Units – New Units for Responsive Designs

May 29th, 2014
by
CSS3: Viewport Units – New Units for Responsive Designs

Developing web designs that adjust to the width or – if needed – the height of a browser window is easy with percentage-based values. You will probably be doing this on a daily basis, optimizing your website for tablets and smartphones. No matter the element, text blocks, images, everything adjusts to the size given. But using percentage-based values is not always the best way...

Development

Adobe’s Snap.svg: Animations With HTML 5, Without Flash

April 2nd, 2014
by
Adobe’s Snap.svg: Animations With HTML 5, Without Flash

Flash has long been the standard for vector-based web animations. Some say for too long. The rise of mobile clients led to an acceleration of web standards such as HTML5. Thanks to the SVG formats, which is widely supported by modern browsers, we are able to embed vector-based graphics into our web projects without the need for a plug-in. Adobe’s JavaScript library Snap.svg even...

Design

Styling SVG with CSS: Capabilities and Limitations

January 23rd, 2014
by
Styling SVG with CSS: Capabilities and Limitations

SVG is the new standard for vector images in the browser. Vector editors such as Adobe Illustrator allow to directly save to that format and modern browsers have no problems to properly display SVG. As SVG graphics consist of markup, they can be created and maintained using your favorite text editor, just as you do with your HTML. It is even possible to style...

Development

SVG and JavaScript: What Is Possible, What To Consider?

January 22nd, 2014
by
SVG and JavaScript: What Is Possible, What To Consider?

SVG has been around for quite some time now, waiting. Waiting for proper browser support. The wait is now over as all modern browsers support the format today. With Flash being on the decline, SVG has grown even more popular. Just like the proprietary Flash format, SVG is vector-based and can even contain animations. You need not even miss out on scripting, as SVG...

Development

HTML 5 and SVG: Providing a PNG Fallback with PHP and ImageMagick

January 15th, 2014
by
HTML 5 and SVG: Providing a PNG Fallback with PHP and ImageMagick

Using SVG in web design has many advantages. Being a vector format is the biggest and has it standing out from the crowd of other image formats. You could have guessed, though, that while modern browsers do already support SVG, the good ole Internet Exploder doesn’t, at least not below version 9. As older versions of Internet Explorer are still out there in the...