Web Technologies

  • 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 structure layouts in rows and columns. Now, with the new CSS Grids rasterized layouts return and they resemble the way of table-based designs quite closely.



    Read more 
  • 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.



    Read more 
  • 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 and the browser will read your website contents to any visitor who demands it. A nice service for anyone and inevitable even for the visually impaired.



    Read more 
  • CSS Vocabulary: Definitions for Beginners

    Even experienced designers are not constantly keeping CSS vocabulary in sight. Or are you permanently rattling off commands with your eyes closed? If so, people might start to avoid you. Did you notice such signs, now you probably know where to search. Thank me later. Probably it helps to know that there is a very conclusive technique to avoid running around murmuring CSS properties. Simply visit the project "CSS Vocabulary" and free your mind.



    Read more 
  • Google Web Fundamentals: Free Handbook for Multi-Device Web Design in the Making

    A few days ago, Google released a beta version of a stylish and comprehensive new online handbook for web designers and developers to the public. The project is a work in progress and will lead to a more polished version 1.0 in June. Yet, you shouldn’t wait until then, as Web Fundamentals is a fine collection of best practices in multi-device, responsive design just now. Work on the handbook is coordinated via Github, while the product itself has its own shiny website – a best practice example in itself…



    Read more 
  • 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 allows for the creation of vector-based animations with SVG.



    Read more 
  • Responsive Images: Still Waiting for a Standard? Try Rwd.Images.Js Instead!

    Responsive Images is a topic far from resolved. Will it be the picture element as proposed by the W3C or will it be the srcset attribute as proposed by WHATWG in the end? No matter what time will bring, responsive images are a problem that needs to be solved today and not sometime in the future. No wonder that JavaScript is the remedy of choice. There are quite a few scripts targeting responsive imaging, quality varies though. A brand-new script by Matt Stow from Australia shows the potential to become the best available client-side interim solution…



    Read more 
  • Pixeno: Web Designers Hosting for Free (with Luck)

    Today we are back with another special giveaway. Pixeno, a company offering web hosting for web designers and developers by web designers and developers, gave us six of their annual hosting plans, which we don’t want to keep but raffle off to our dear readers. Participating is easy. Simply answer the questions at the end of the article correctly and you are in the draw…



    Read more 
  • 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 supports JavaScript right inside its own format. Think of an open ActionScript, only more commonly known.



    Read more 
  • 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 wild, you should always consider implementing a fallback solution. Using PHP and ImageMagick makes it a snap to provide a fallback to PNG..



    Read more 
search form
 
image description image description