Neutral Magazine (opens in new tab) is built by Plump Digital (opens in new tab). “Our creative director laid down the challenge of creating a triangle-based article index, so we needed to work out how we could break out of the standard rectangle-based HTML/CSS,” says technical director James Howard.
SVG was the answer. “We used MooTools for animations, Ajax and DOM manipulation,” Howard adds, “combined with Modernizr for detecting browser support for SVG and touch. Where there is SVG support, the page HTML is converted into SVG elements, giving us freedom to clip and mask into triangles. Working with SVG elements meant getting back to using core JavaScript (opens in new tab) and creating elements within the SVG namespace.”
Finally, Plump used the HTML5 (opens in new tab) History API to track users’ progress through the site: “Articles are loaded over Ajax so we made use of the History API to update the URL in the browser, allowing deep links to articles be shared or bookmarked.”
Liked this? Read these!
- Create a portfolio website using Behance ProSite (opens in new tab)
- Great examples of doodle art (opens in new tab)
- Brilliant Wordpress tutorial (opens in new tab) selection
Have you seen any inspirational examples of web design recently? Let us know in the comments!