New Website Yeah!

It's been more than a decade since mjau-mjau.com was first introduced, and a lot has happened since then.

Unified Design

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.

Smart Pages

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.

  • Flexible Modules
    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.

  • Folder/Albums Module
    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
    An Imagevue page layout is based on a blend of modern CSS3, Javascript- and server-side HTML5 structure. Instead of having zillions of bloated settings to define styles-, layouts- and elements for each page, X3 comes with a tag system where you can simply apply a variety of tags to a module to achieve the desired visual result. A few tags by example: x-shuffle (js) will shuffle images in a gallery, x-wide (php+css) will set the module layout to expand 100% width of the viewport, x-slideshow (js+css) will create a slideshow of images in a gallery, x-columns-3 (css) will create a responsive 3-grid columns gallery layout, x-hover-3d (css) applies a specific mouse hover effect, x-caption-below adds captions below the images, x-image-navi (css+js) adds controls to navigate vertical scroll ++ much more!

  • 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).

Gallery Features

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:

  • Image Resizer
    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)
    In a world of flexible layouts and responsive designs displaying on a variety of devices, screen sizes and pixel-densities, how does the website know what image sizes to load for a specific layout? Imagevue X3 includes a super-cool javascript image-manager that automatically calculates the size of each image to be loaded based on the dimensions that are made available for it. This means that regardless of layout, and regardless of device and pixel-ratio, Imagevue will automatically figure out the best image size to load. Furthermore, the Image manager will also figure out the best image size for images to be loaded in the new popup slideshow. Not only does this benefit layout variations, but it also allows you to offer stunning large images for large/retina screens, while offering smaller sizes for smaller devices/screens. Beautiful!

  • Gallery Layouts
    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!

  • Popup Module
    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-Friendly
    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.

Performance

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
    Imagevue loads all pages through AJAX in JSON format without having to re-load the entire page. Not only does this speed up the loading process by loading only data that changes, but also browser rendering as the browser does not need to re-render the entire page with styles and javascripts. We thereafter use the HTML5 pushstate feature to manipulate the browser URL field so it mimics normal page behavior and creates a state of history. An Imagevue page load may in fact only be 1-4 kb (excluding assets), like this index page in json format.

  • Minification
    For modern websites, it is often required to include a large amount of javascript- and CSS assets, and Imagevue is no exception. The problem is that not only will all these assets take time to load, but they will queue up as requests, slowing down both the browser and the server. Imagevue consolidates- and minfies asset files, so that the browser only needs to request a few files.

  • Gzip
    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.

  • Server Caching
    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.

  • HTML5 localStorage
    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.

Other Features

A few mentionable features of the Imagevue X3 framework:

  • Menu System
    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.

  • Audioplayer
    Imagevue includes an experimental audioplayer, currently only available on non-mobile devices for certain reasons. The audioplayer loads files from an audio folder (just like earlier versions of Imagevue), and can also read ID3 data. The audioplayer itself is html5-, Javascript- and css3 based, and loads all itss data in json format. Once tracks are loaded once, they are stored in the browser's html5 localstorage for rapid load on consecutive visits.

  • Contact Form
    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!


Comments