Infographics for Your Site

Nothing seems to be hotter right now than the infographic.
You can thank Pinterest for allowing us to share them all and startups like Visual.ly for helping designers everywhere create data stories with ease.
How do you use the infographic trend on your website?

What is an Infographic?

Any visual representation of information is considered to be an infographic. They come in a variety of forms – data, text with images, even those popular memes.
What’s great about infographics is that they provide a way to present information that is easy for the user. Without a lot of heavy reading, a person can potentially get a lot of information about a certain topic through a combination of text and visuals. What’s more is that infographics can be a fun way to present information.
Infographics can be a great way to present information and combat the ever-decreasing attention spans of users. They are often sharable and can bring traffic back to your site when distributed over social media. No one can guess what will make a particular infographic popular but it is usually a combination of great information, search engine optimization, social media (and marketing) and visual interest.
The caution that goes along with using infographics is time. Often many infographics only last for a short time before the “newness” and effectiveness wears off. They may need to be updated often as information or data changes.

Making Infographics Work

To really make the most of an infographic you need a couple of key components – content (data, numbers or quick facts), visual elements and interest.
Creating an infographic can be about more though than just making an image that you will use to promote your site. You can use the trend to create a design for your site itself with a concept that focuses on big design.
Think of styling your landing page with big information and charts. Consider breaking some of the traditional rules and add an extra typeface or color to create a page with high visual interest. Use white (or empty) space to your advantage to showcase your data visualization.
When working with an infographic-styled web design, think about using the concept just for a landing page. Consider the scroll (and responsiveness). For an infographic to have the most impact it needs to be readable at a glance.

5 Tips for Success

Start with a great bit of information. What content do you have that people will love? A cool fact? Interesting numbers? Something totally odd or unusual?
Figure out how to represent that information. What are they key facts you want to share?
Gather great visuals. From photos to charts and graphics, the visuals are really what make an infographic work. Lacking great visual content? Opt for striking colors or fonts to create an artistic display for your information.
Do your homework. Make sure your infographic is accurate and the content corresponds to your site. (You do want people to share and visit your site, right?) Be an authority on your topic. Use a voice and language that speaks with authority and in simple statements.
Write tight and edit. Fewer words are better. But your infographic must be understandable. Edit your copy, let it rest for a little while and edit it again. Good, clean, simple copy is very important.

Infographic Tools

There are a couple of options for creating great infographics (and infographic-based design schemes) – you can draw everything from scratch, use a tool that creates a graphic for you or a combination of the two. Many designers like option No. 3. By using some ready-made tools, creating graphics is quicker and easier than drawing by hand, plus they have the control that automated tools don’t allow.
Here are two great tools to get you started.

Visual.ly: This tool allows you to convert data into a visual form quickly and easily. The tool is used by agencies, brands and businesses to help create super-graphics in no time. The tools are sharp, easy to use and come packed with tools to help you share across a variety of social platforms. (Visual.ly infographics are popular and gaining traction all the time; they can be found all over the web.) Infographics can also be embedded into your website. This tool, though, is not for building a site; it is a component piece that is promoted as a tool to drive traffic back to your site.

Magnolia Elements Pack: This data visualization element kit is packed with tools and is the perfect starting point for any designer who wants to build infographics or a site based on an infographic style of design. This set of elements includes more than 150 ready-to-use items – graphs, charts, diagrams, lines, table, shapes, icons, arrows and more – that can be further customized for almost any projects. The great part of this vector-based kit is that it works for everything. The tools work for creating simple stand-alone infographics or websites and the designer has complete control over how the final product looks – from colors to shapes to typefaces to size. All you need to make this work for you is a bit of inspiration and imagination!

Conclusion

The infographic style is fun, trendy and informational. If your site contains data, numbers or even just a few facts, this style can be a great tool.
Consider using an infographic to drive traffic or catch a user’s eye as a landing page.
And don’t forget to try some of the cool tools out there. Not every infographic will be successful. Using tools to help you create infographics quickly is a great place to start so you don’t invest too much time in something that may have a short shelf life.

Free Responsive Plugins and Frameworks for your Projects

WooThemes FlexSlider

This great slider is built with jQuery and has a very simple, semantic markup, so if you have some knowledge of jQuery, you will be able to customize it quite easily. The plugin is supported in all major browsers (yes, in IE as well – what a surprise) and it comes with lots of effects, both horizontal and vertical slide and fade animations.
Because the toolkit is responsive, which means it works on the iPad and iPhone (both devices are driven by touch gestures), this toolkit comes with hardware accelerated touch swipe support, so you will not experience delays when swiping on portable devices. In case you make use of WordPress as a content management system, the guys from WooThemes developed a plugin as well, so you can download it for free and use it in your custom theme.

Responsive Navigation

We often find ourselves in the middle of a situation where we don’t really know what is the right way to implement navigation on mobile and tablets. While menus can look really nice on desktop, make use of negative space, good typography and big font sizes, the guidelines change when we work with smaller screens.
This plugin will definitely sort out some of your problems. Actually, more and more responsive themes implement the same style of navigation because it is very usable and saves a lot of space on small screens.
The plugin is based on JavaScript, but it is not heavy at all, weighing only 1KB. In order to make sure it works well on mobile, the toolkit uses touch events and CSS3 transitions for best performance and works very well in all major browsers, including all from IE6 and on.

Flat UI

Here at Designmodo we are huge fans of both responsive web design and flat design, so we combined both of them into this amazing toolkit that you can download for free.
The kit is built on Twitter Bootstrap, ensuring fast performance and amazing support in all browsers. All the elements in our kit are responsive down to mobile screens and look amazing both on portable and desktop devices. We doubt you didn’t try them out yet – but if you didn’t, we don’t understand what you are waiting for.

Responsive Slides

Another responsive slider coming in lightweight version is this one. It only weighs 1.4KB and is a plugin creating a responsive slide using elements from a container. There is a lot of love for Internet Explorer from this plugin, as well as support for all other major browsers.
The toolkit comes with two different modes. The one is starting to play the images automatically, allowing them to fade-in and fade-out, while the other one operates as a responsive image container featuring pagination and/or navigation for the user to fade between the slides on his own.

Bones

Bones is a great WordPress theme, designed as simple as possible, coming in as a fully responsive layout. The theme comes totally free of charge and is supposed to work as a normal theme, so it is in no way a child theme that you have to build on.
Although everything should be responsive, I am quite confused about the slider on the home page, which doesn’t seem to respond well to browser resizing, but I assume this is a bug that the developers are aware of.
Bones is built using the mobile-first approach, which prioritizes the mobile context to create a better user experience for the visitors, instead of just using a framework that resizes from desktop to mobile.

Sequence

Sequence is another responsive slider that will work amazingly fast on mobile platforms and tablets because it is entirely based on CSS3 transitions.
All modern browsers support it (when speaking Internet Explorer, only after the 10^th version) and it is very easy to add effects and transitions. However, even for Internet Explorer 7, 8 and 9, this responsive slider comes with a fallback theme, as these versions of IE do not support CSS3 transitions. You can use move, scale, rotate, fade and several others action, so there should be no limit to your creativity.

jQuery Sidr

This jQuery based plugin will facilitate creating side menus much quicker than if you would have to code them on your own. Moreover, these side menus will be totally responsive, down to mobile, so all your visitors will enjoy a good experience regardless which device they browse on.
If you know how Facebook implements its menu on mobile, and are a fan of it, you should take a closer look at this plugin, because it basically does the same. The only difference might be that while using Facebook’s code will probably get you sued, this toolkit comes as free of charge.

Golden Grid System

I have always been a big fan of websites built on grid systems and therefore I am showcasing this amazing toolkit today. Golden Grid System is a free-of-charge grid system splitting the screen in 16 columns. Nothing special until here. But what is really impressive is the fact that when resizing the browser, some of the columns disappear.
The 16 columns will fold down to 8 for tablets and to 4 on mobile devices. This grid can easily cover screen sizes from 240 to 2560 pixels wide. Now don’t understand this tool wrong. It will not just strip you down of your content when you resize the browser; it will just arrange it on a four-column grid. This will also make it easier for the browser to load the site. Great tool!

Antwort

The name of the tool is German – and we all know how much quality Germany stands for. Although this is not a product of the German government, it is still an amazing piece of work. Antwort will be golden to you if you are sending e-mail newsletters, because this is what it basically is: a responsive e-mail newsletter template.
Not only the templates sizes down after the screen size, but they also look different in several e-mail clients on Windows Phone, Android and desktop. I can imagine a lot of work has been put into this tool and I believe you should take a look at it, as it is indeed high quality.

Foundation

Foundation is one of the most amazing responsive frameworks on the web and it is also really popular. Thousands of websites are built on Foundation and the developers couldn’t be more proud of their work.
The framework also allows the mobile first approach, which means that you will be able to built your website when it is small, and then, as the screen size gets bigger, you will be able to add more and more to it. The grid is flexible and therefore it allows you to create quick prototypes, which can be previewed on all kinds of devices.
Zurb, the company that developed the framework, calls it the most advanced front-end framework in the world. Now I’ve been on the web for quite some time and I have to say that their description is not far from the truth.

Pure

We continue with another responsive resource, only this time coming with several responsive modules included. Pure is very simple, but offers developers and designers lots of modules (such as menus, buttons, text formatting and tables) that can be used for free.
Pure is not the most popular project in the world, but downloading these modules will definitely speed up the process of creating responsive designs. You can use many of these resources in combination with Foundation, so you will be able to create working prototypes much quicker than ever before.

jQuery Menu Aim

If you’ve been on Amazon at least once (let’s face it, who hasn’t been?), then you are probably already aware of the cool dropdown secondary navigation they are using to browse through their categories. This jQuery plugin will allow you to implement exactly the same concept in your own websites.
What it does is actually quite simple. It is basically a dropdown menu based on a jQuery plugin that fires events when the users aim with the cursor at particular menu items. I don’t even want to start thinking of how many projects you could implement this dropdown navigation in, as I am quite sure I would fall asleep before drawing a conclusion.

Skeleton

Some of you might have heard of Skeleton before. It is basically a responsive framework that does the same as the other do, while being extremely simple to use, customize and style.
The framework is responsive down to mobile and it is important to know that this is not a user interface framework. This is only a kit that provides the most basic styles as a foundation that you can continue to build on with your own style.
Skeleton is tested and supported in lots of browsers, including some older versions of Internet Explorer, such as 7, 8 and 9.

Bootstrap Modal

This next framework can also be very useful in different projects. Modal makes it possible to have input forms and scale them down whenever the size of the screen is lower. In the preview below you can see two columns of input fields. If the screen size had been smaller, all the input fields would stack upon each other.

Pick a date

We had lots of responsive frameworks but the one that I am showcasing now is something quite new. While working with media queries on your own is something many can do, the thing that I am showing you now is simply amazing.
In case you have a situation in which your users need to select a date, this plugin would be amazing. This lightweight jQuery date input picker is totally responsive, so you will be able to select the date on mobile, tablets and desktop. Great plugin.

Magnific Popup

This is another responsive lightbox working perfectly with images at small screen sizes. Another good thing about it is that no only the image thumbnails will be resized, but also the image preview when clicking on the image, as you can see in the screenshot below.
While many plugins resize image thumbnails, some of them are quite poor at resizing their preview, so I believe this is one of the best examples that there is.

Gumby

Gumby is another responsive framework, this time built on Sass, and comes as an open-source project. It is not very different than some of the other responsive frameworks, but you might prefer this one if you are a fan on Sass.
If you’ve never heard of it, Sass is an auto-named “awesome stylesheet language” based on CSS. It is something you might want to take a look at, it works great and if you get used to it, I am sure you will not go back to plain CSS anymore.

Susy

Our next example is another responsive framework, this time built on a plain CSS grid system. The good feature of this framework is that it doesn’t make your site look the same, only in different sizes. I like about it the fact that the framework only “does the math” and creates the grid, so you will be able to build your website as you want, at different sizes. The plugin comes with some documentation, so you will be able to use it right away, as the learning curve seems to be very quick.

Bootstrap Image Gallery

This next example is also an image gallery responsive framework, but I am showcasing it here because it also works for video, not only for graphics. I think this is quite cool and I can see that resizing the video preview window down happens right away, without any kind of delay.
This means that the plugin will be really quick to load on mobile, even if it contains video (which normally is very heavy). This must be this plugin’s selling point and if you work with video, think twice before going to the next example without taking a look at this one.

Charisma

Charsima is a one-of-a-kind example in today’s showcase, featuring a great HTML5 admin template, which is responsive down to mobile. Now you’ve probably seen lots of HTML5 themes that are responsive, but there are not many out there that can be used as admin panels or dashboards. This example is, however, one of the best works that I have seen on the internet in a while in this category, so make sure you take a look at it.
With Charisma we end our showcase for today and we hope that the free responsive frameworks that we have showed you above are something you are going to take a look at (or already have, for that matter). We believe that the resources above are high quality, therefore we think it’s important to give credit back to the authors in case you make use of their work.

Pixel-Perfect UI in the WebView

There are a number of options you can use to create the perfect UI, this article will outline some of the best practices for the mobile web in general and then some specific tricks you could use for hybrid applications.

Viewport
The viewport meta tag is of the most important tags you need to add to your web app. Without it, the WebView may act as if your site is designed for desktop browsers. This causes your web page to be given a larger width (typically 980px) and scales it to fit the WebView's width. In most cases, the result is a tiny overview version of the page that requires the user to pan and zoom to actually read content, like the image on the left.

If you want the width of your site to be 100% of the WebView's width, as shown on the right, you need to set the viewport meta tag:

 name="viewport" content="width=device-width, initial-scale=1">

Setting width to the special value device-width will give you more control over the page layout.
By default the WebView will set the viewport to device-width, rather than defaulting to a desktop viewport. However, for reliable and controlled behaviour it's good practice to include the viewport meta tag.

Desktop Sites

In some cases, you may need to display content that isn't designed for mobile devices -- for example, if you're displaying content you don't control. In this case, you need to force the WebView to use a desktop-size viewport:

setUseWideViewPort(true)
setLoadWithOverviewMode(true)



Without these methods being set and no viewport the WebView will try and set the viewport width based on the content size.

In addition to doing this, you may want to use the new layout algorithm TEXT_AUTOSIZING introduced in Android 4.4, which increases the font size to make it more readable on a mobile device. See setLayoutAlgorithm.

Responsive Design

Responsive design is the notion of changing your UI depending on the dimensions of the screen size. Here we will look at some simple examples of how you can adapt your UI and images, but if you want to dig in to other topics then this article on HTML5Rocks is a good point of reference.
One of the main CSS features you'll want to use is media queries.
A media query is a way of applying CSS to elements based on a device's characteristics. For example, suppose you wanted to go from a vertical layout to a horizontal layout based on orientation.
First, set CSS properties to default to portrait:

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

Then to switch to a horizontal layout you just need to switch the flex-direction property based on the orientation:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

This technique can be used to change layout based on the width of the screen.
For example, adjusting the size of the button from being 100% to something smaller as the physical screen size gets larger.

button {
  display: block;
  width: 100%;
  ...
}
@media screen and (min-width: 500px) {
  button {
    width: 60%;
  } }
@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  } }

These are minor changes, but depending on your UI, media queries can help you to make much larger changes to appearance of your application, while keeping the same HTML.

Tip: Try to change the UI based on width as a component starts to look out of place, rather than focusing on device sizes. By doing this, your app will look great on a range of devices, not just the ones you test on. An easy way to do this is play around with the size of a browser window. But remember that actual devices have different screen densities than your monitor, so always test on a range of devices.

There will be best practices for organising CSS and designing for mobiles on HTML5Rocks soon.

Images

The variety of screens sizes and densities also presents challenges for images. Smaller images require less memory and are faster to load, but blur if you scale them up.
The images below show the blurring that occurs when you scale a low-density image up for a high-denity screen, compared with the crisp display of an appropriately-sized image.

Here are a few tips and tricks to make sure your images look crisp and clear on any screen:

• Use CSS for scalable effects.
• Use vector graphics.
• Provide high-resolution photos.

Use CSS for scalable effects

Make use of CSS3 where you can for borders, drop shadows, border-radius, and so on instead of images. These features can scale easily. However, some combinations of CSS properties can be expensive to render, so you should always test the specific combinations you're using. (For some sample data on fast and slow CSS properties, see: CSS Paint Times and Page Render Weight on HTML5Rocks.)

Use vector graphics

Scalable Vector Graphics (SVGs) are a great way of providing scalable version of images. For images that are well-suited to vector graphics, SVG provides high quality images with very small file sizes. For more information, see Splash Vector Graphics on your Responsive Site on HTML5Rocks.

Provide high-resolution photos

Use a version suitable for a high-DPI device and scale the image using CSS. This way the image has a high quality across devices. If you use high compression (low quality setting) when generating the image, you may be able to acheive good visual results with a reasonable file size.
This approach is simple, but has a couple of potential downsides: highly-compressed images may show some visual artifacts, so you need to experiment to determine what level of compression you find acceptable. And resizing the image in CSS can be an expensive operation.
If high compression is not suitable for your needs, try the WebP format, which gives a high quality image with relatively small file size. See the official WebP site for details. Don't forget that you'll need to provide a fallback for older versions of Android where WebP isn't supported.
For more information on this topic:

• High DPI Images for Variable Pixel Densities on HTML5Rocks.
• Seeing the World Through High DPI video from Google I/O 2013.

Fine grained control

In many cases, you can't use a single image for all devices. In this case, you can select different images based on the screen size and density. You can use media queries to select background images by screen size and density. You can also use JavaScript to control how images load.

Media queries and screen density

To select an image based on the screen density, you need to use dpi or dppx units in your media query. The dpi unit represents dots per inch, while dppx represents dots per pixel.
Looking at the table below you can see the relation between dpi and dppx. 1dppx is equivalent to 96dpi, 2dppx == 192dpi == 2 x 96dpi, and so on.

Device pixel ratio	Generalized screen density	Dots per inch (dpi)	Dots per pixel (dppx)
1x	MDPI	96dpi	1dppx
1.5x	HDPI	144dpi	1.5dppx
2	XHDPI	192dpi	2dppx

The generalized screen density buckets are defined by the Android native platform and are used in other places to express screen density (for example, http://screensiz.es).

Background Images

You can use media queries to assign background images to elements. For example, if you have a logo image with 256px x 256px size on a device with a pixel ratio of 1.0, you might use the following CSS rules:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

To swap this out for a larger image on devices with device pixel ratio of 1.5 (hdpi) and 2.0 (xhdpi), you can add the following rules:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
      background-image: url('../images/html5_384x384.png');
  }
}
@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
      background-image: url('../images/html5_512x512.png');
  }
}

You can then merge this technique with other media queries like min-width, which is useful as you start to account for different form factors.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
          background-image: url('../images/html5_512x512.png');
  }
}
@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
          background-image: url('../images/html5_1024x1024.png');

          max-height: 512px;
      max-width: 512px;
  }
}

You might notice that the max-height and max-width are set to 512px for 2ddpx resolution, with an image of 1024x1024px. this is because a CSS "pixel" actually takes into account the device pixel ratio (512px * 2 = 1024px).

What About ?

The web today doesn't have a solution for this. There are some proposals in the works, but they aren't available in current browsers or in the WebView.
In the mean time, if you generate your DOM in JavaScript, you can create multiple image resources in a sane directory structure:

images/
    mdpi/
        imagename.png
    hdpi/
        imagename.png
    xhdpi/
        imagename.png

Then use the pixel ratio to try and pull the most appropriate image:

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

The alternative to implementing the above in JS, is to alter the base URL of the page to define the relative URLs for images.

 class="no-js">

  

    ...

    ...

The major downsides to this are that it blocks the page load and forces you to use absolute paths for scripts, CSS files, links and so on, since the base URL points to a density-specific directory.

12 Popular Responsive HTML5 Frameworks for Web Development

HTML5 Boilerplate

HTML5 boilerplate helps you build fast and adaptable web apps and websites.  It delivers excellent site performance and independently maintain server configuration. It helps you to get started with new projects.

Foundation

Foundation is the most advanced responsive front-end framework in the world.  Using this HTML5 framework, one can start by building websites for small devices first. It used for flexible and responsive web sites.

HTML5 KickStart

HTML5 KickStart is an ultra-lean HTML5, CSS & JS building blocks for rapid website production. It has lots of features in a small package like responsive grid layout, a touch-enabled slide show and so on.

Skeleton

Skeleton is a simple and user friendly for developing HTML5 websites and mobile applications. It has a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size. Its work on three core principles : Responsive grid down to mobile, fast to start and style agnostic.

SproutCore

SproutCore is an open-source framework for building  fast, innovative user experiences on the web.  It has incredible speed means no more waiting on your servers. Leverages the latest in web technologies and specifications. Accessible everywhere you want which gives native experience.

Montage

Montage is an HTML5 framework for building modern web apps. It will help you build scalable and maintainable HTML5 applications optimized for today’s and tomorrow’s range of connected devices. It has some amazing features like reusable components and HTML templates, declarative component model, declarative data binding and so on.

52Framework

52Framework is an HTML5 framework which aims to provide an easy way to build responsive websites using HTML5 and CSS3 while supporting all modern browsers.  It is packed with excellent components like HTML5 video players, rounded corners, HTML5 canvas examples, HTML5 validation form and so on.

Zebra

Zebra brings a fresh view and possibilities to develop WEB based Rich UI applications. The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra’s development is much closer to software engineering where you write well structured, supportable, extendable code basing on the easy Zebra OOP concept. You keep the distance from the mess of HTML, JavaScript code, CSS and DOM manipulation. Zebra is pure WEB based alternative to Flash or Applet technologies that doesn’t require a plug-in on a client side to be installed. In the same time Zebra utilizes power, simplicity and beauty of JavaScript coding.

CreateJS

CreateJS is a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies via HTML5. It has features like HTML5 audio, Object management, tweening and so on. The CreateJS Suite is comprised of:EaselJS, TweenJS, SoundJS, PreloadJS, and Zoe.

Less Framework

Less Framework is a modern front-end framework for building responsive designs. Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.