Neutral Magazine experiments with triangle-based navigation

By published

Every day we showcase the best examples of web design around. Today it's Neutral Magazine by Plump Digital.

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!

Have you seen any inspirational examples of web design recently? Let us know in the comments!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Creative Bloq Staff

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Related articles