New Website Yeah!
It's been more than a decade since mjau-mjau.com was first introduced, and a lot has happened since then.
Instead of having different versions of a website across different devices, Imagevue has a single unified layout which is optimized to flow nicely on all screen sizes. Not only does this address multiple device screen sizes, but also pixel-density, orientation and interaction. Layout modules include responsive abilities to best suit the size-, density- and interaction method of the device they are displaying on.
Semantics, SEO and Social
New Imagevue is built from the ground up to take advantage of HTML5 semantical tags, which to some degree help browsers and search engines understand the content of a website. Also built for optimal SEO performance, essential structure- and page meta tags are included by default. Furthermore, necessary social tags- and metadata are included, so that sharing pages on any social platform is flawless. Just link up your Google-, Facebook- and/or Twitter accounts for additional synchonrization between social pages/accounts/authors and the website.
Imagevue X3 comes with smart page features that make it more flexible, yet less complicated. Unlike before, you do not need to declare what kind of page you are creating. Instead, an Imagevue page can include context, folders (albums), gallery (images) and comments, depending on what is defined in the folder. Furthermore, you can apply "tags" to the page to define certain layouts and styles, and to filter out certain elements.
An Imagevue page consists of 4 modules with subtypes: context, folders, gallery and comments. These modules are all automatically included into a page if they exist in the folder. You can easily visualize any module exclusively, or combine them together to create flexible page layouts. Furthermore, you can apply tags to define the layout- and style of each module, and also set sorting order of the modules on the page.
As a new feature of Imagevue X3, we added gallery folders view mode. This means you can view all folders (albums) on a page as preview images with (or without) titles and descriptions. This is a practical way to display gallery folders, because this structure does not always work well in menus. Furthermore, we can use the same method to maintain basic "blog" layouts, if you want to maintain a simple blog.
Disqus Comments Module
With Imagevue X3, we have given a lot of attention to integration of the Disqus comments plugin. Disqus is a wonderful comments service, which swiftly is being embraced by the industry, and not without reason. Disqus provides a beautiful comments module that integrates nicely into any Imagevue page, and works nicely across all devices. Furthermore, Disqus offers integration with social services, SEO support, strong anti-spam features and super management. Add comments to any page types including galleries!
Smart Page Settings
Define Assets (Smart Folder)
You can even set a folder to load assets (images) from a separate folder. How can this be used? For example, you may have created a gallery page with a new set of images, and maybe you want to create a blog post and introduce the new images in a small inline slideshow? Maybe you want to load images from a specific folder into your home page as a slideshow like we are doing in this page? Can.
Markdown Content Authoring
Markdown is a popular tool for writing rich text content for websites without having to deal with tedious html. Not only is the write-up easy, clean- and fast to author, but it is more secure and forgiving than writing html. You can still use basic html tags, but we will recommend using basic markdown. I will cover this more in depth later on, but in the meantime you can check these links to find out more: Real-time example, Why Markdown, a 2-minute explanation, Markdown Primer and Markdown Tutorial.
Smart Module Layouts
How wide is a website? One of the main challenges for a responsive website, is defining width of content. Not only does the width need to respond to all screen sizes, but text width should also be limited so that it remains at readable length, while allowing wider layouts for image modules. Imagevue X3 has a modular layout which allows different widths on different modules without affecting the main layout. There are several examples in the concepts section that demonstrate layout variations including wide, narrow and multiple columns. You can define layout variations on a per-module basis, or set up a custom layout (advanced stuff to be explained later).
Being the foundation of an image gallery- and portfolio website, Imagevue X3 comes with an abundance of gallery features. To mention a few that may not be obvious:
Because of the flexibility required when offering a variety of gallery layouts with different image sizes spanning across multiple devices, it is no longer sufficient to have a single thumbnail variation of an image. Imagevue X3 comes with an advanced image resizer, that is able to create image sizes based on what the layout- and device requires for a specific page. Requested images are resized on-the-fly, and thereafter stored in a cache folder for quick consecutive access. As demonstrated in the concepts section, there are dozens of layouts which each require different image sizes across different devices. Here are a few image resize examples just to demonstrate the capabilities: original, 1280, 800, small, square cropped.
Image Manager (JS)
Imagevue includes a variety of cool gallery layout types, many demonstrated in the concepts section. All the different layout types are fully responsive, and include modern features like swipe, scroll-navi and fullscreen. We aim to offer only the best gallery UI ideas and integrations in existence. Check out the various categories vertical, slideshow, justfified and columns with many more to come!
We have included a beautifully crafted image popup module, which displays images in their full glory. The Imagevue popup module is available alongside most gallery layouts, except the slideshow which has its own fullscreen method. The popup module looks great on all devices, supports swipe interaction, fullscreen-mode, preloading and smooth transitions.
Lazy loading (JS)
Many gallery pages include dozens (or even hundreds) of images, which all contribute to increasing the load size of a page dramatically. To ease the initial load of a page, images are only loaded once they appear inside the visible viewport of the visitors browser. Although all images may need to get loaded eventually if they are to be viewed, it allows pages to load and initialize much faster, and images are only loaded on-demand.
Retina, the word invented by Apple referring to devices with a very high pixel denisty, and usually a very sharp screen. These screens are becoming more and more common, not only on smartphones and tablets, but lately also on new laptops (like the macbook pro retina). The screens are capable of displaying high-resolution graphics, and Imagevue is as retina-friendly as a website can get, supported by css3, icon-fonts and a retina-ready image manager.
New Imagevue X3 uses various modern techniques to dramatically speed up delivery- and display of the website and it's contents. This results in a speedy interface, which responds swiftly to internal navigation.
Ajax and HTML5 pushstate
All data that is loaded through Imagevue is compressed with Gzip, which dramatically reduces file size of loaded data like pages and assets. By example, our current superloaded CSS file at 342kb is compressed down to 41kb, which is a whopping 90% compression rate! Very acceptable.
Before we can swiftly apply all the above, it necessary for the web server to output all data, which often includes complicated server processes that can make the loading sluggish. Imagevue caches all data- and page requests on the server, so that output is blazing fast. The server will only re-process requests if something changed on a specific page.
To add further speed leverage, Imagevue caches page requests in the browsers HTML5 localStorage. This is faster- and more failproof than normal "browser cache", and will speed up the browsing experience significantly. The browsers localStorage is only refreshed if a change is made in the website, which is identified in a meta tag.
A few mentionable features of the Imagevue X3 framework:
Depending on what screen size you are viewing this page from, you might be seeing either the horizontal menu or the mobile-friendly off-canvas vertical menu. If you are on a large screen, you can try down-sizing the browser to view the vertical menu. The vertical menu can also be used globally on all screens, as it is more suitable for substantial folder structures. The horizontal menu is elegant for simple navigation structures.
Getting down to detail, Imagevue X3 includes a flexible and advanced contact form. The contact form comes with live validation, e-mail suggestions, elastic input and anti-spam measures. Check the contact page!