Web Design Academy

Monday, February 16, 2015

Design Strategies for Information Dashboards - Six Revisions

Design Strategies for Information Dashboards

Posted: 16 Feb 2015 06:00 AM PST

An information dashboard is a single-page display that presents key performance indicators in real-time. To make its content easier to read, a modern dashboard will often utilize information graphics such as charts and tables.

When designed well, a dashboard should help you quickly see critical information and discover data patterns.

Below are some tips and techniques for designing user-friendly dashboards.

Display the Information Logically

We know from usability studies that when we are shown a web page, our eyes generally start at the top-left region of the page. As we read the contents of the screen, our eyes move from left to right. A good dashboard design takes advantage of this natural reading pattern.

As a solid design strategy, place the most important and urgent information at the top-left region of the dashboard. Lower-priority and infrequently-changing information should be placed towards the bottom region of the dashboard.

Let’s look at the dashboard below, a case where content wasn’t arranged in a logical fashion:

Incorrect information architecture of a dashboard.

The information in the two upper charts, "Top 10 Customers by YTD Revenue" and "Number of Users by Age Group", doesn’t change frequently.

On the other hand, the most frequently-changing information, "Signups per month" and "Daily Metrics", are placed at the lower portion of the dashboard, a location that’s not optimal for the charts.

In the situation above, every day the user accesses the dashboard, they will need to go through the first two charts that don’t change frequently before they get to information that changes on a regular basis.

Highlight Important Information

You should be able to look at a dashboard and have your eyes immediately be drawn to the most critical information on the page. Visual techniques can be used to achieve this. (Read Creating focal points in your web design for tips and tricks.)

Color is powerful in highlighting important information. For instance, if we use light and neutral colors for most parts of dashboard, we could make specific sections stand out by using dark or saturated colors.

When looking at the following dashboard, take note of where your eyes first naturally go to:

Highlighting important dashboard components with the use of colors.

Perhaps your eyes were drawn to the line graph at the top-left region of the dashboard, or pie chart at the bottom-right region because they were colorful.

Group Related Information Together

Grouping related information helps users understand and discover connections within them. In the same token, positioning connected information far apart can cause confusion and make it harder to holistically evaluate them.

Consider the following dashboard:

Good grouping of dashboard information graphics.

In the dashboard shown above, you can see an implied grouping of charts based on color scheme and positioning:

The first row shows overall sales metrics
The second row shows product sales metrics
The third row shows regional sales metrics

As you can see, smart use of color and positioning helps users understand and compare related information easily.

When components on a dashboard look similar, people tend to see them as being related. We must be aware that this can be a double-edged sword because similar-looking dashboard components might unintentionally suggest relationships that don’t actually exist in the data.

Let’s look at the dashboard below:

Bad grouping of dashboard information graphics.

The sameness of colors suggests there’s a shared meaning among the dashboard components. The two colors (blue and red) do in fact share the same meaning in three of the charts — blue represents the Americas and red represents Europe — but this meaning does not hold up in the fourth chart, where blue represents "Quarterly Growth" and red represents "Annual Growth".

Use Colors Sparingly and Strategically

Because dashboards are often densely packed with information, the visual content must be kept as simple as possible. Using too many colors can result in a lot of visual noise.

Colors can be used to highlight key information and to show information relationships, as we have already seen. By using too many colors, their effectiveness in helping users understand the contents of the dashboard will be reduced.

Also, some colors immediately demand our attention, while others are less eye-catching. When a color makes a particular dashboard component stand out from other components, we naturally pay attention to that component and subconsciously attempt to assign a meaning as to why it’s different from the rest. (Read Gestalt principles applied in design learn why this happens.)

The two charts below present the same data.

Bad color use in dashboard information graphics.

Good color use in dashboard information graphics.

In the first chart, the additional colors don’t convey any new information. In addition, it subconsciously tempts us to find meaning in the different colors: "Does red mean something bad happened in December?", "What positive event happened in October?"

In the second chart, the single color correctly gives us an indication that all the bars measure the same metric (i.e. sales volume), and it helps us quickly make comparisons and discover trends within the data.

Choose the Right Type of Information Graphics

One of the most common design mistakes that happens when presenting information in visual form is the chart type used isn’t appropriate or isn’t the most effective. Making an error in chart type selection will convey the wrong message. It might lead to confusion and false assumptions about the information being shown.

The two charts below present the same data.

Wrong chart type.

More appropriate chart type.

In the first chart, the viewer ends up wasting time between looking at the legends and the corresponding pie slices. It’s the incorrect chart type to use in this situation.

In the second chart, you can see that the appropriate type of chart makes the data presentation much more efficient and effective.

Here’s a handy diagram that will help you choose the right type of information graphics to use in your dashboard.

Diagram showing how to choose the right chart type. source

Allocate Screen Space to Information Based on Importance

The size of a dashboard component is a naturally strong indicator of its importance. Pieces of information are not all of equal importance, so they shouldn’t be allocated the same screen space.

If a particular section of information is relatively less important than others, try to give it less space.

Provide Context

Numbers, tables and charts are incomplete unless you mention the context in which they are measured. The right context for key performance indicators helps us understand their meaning. Descriptive chart titles, for example, help us understand what we are looking at as well as what we need to look for.

The following dashboard chart misses to inform the viewer of the proper context in which to view the data with:

Dashboard information graphics that does not have enough context.

With a slight tweak of the chart’s heading, the same chart now tells the viewer something that may not be obvious at first:

Dashboard information graphics with proper context.

Conclusion

When designed well, information dashboards can serve as an indispensible tool for gauging performance and making decisions. On the other hand, a poorly designed dashboard can lead to confusion, wasted time and inaccurate data interpretation.

About the Author

Sreeram Sreenivasan is the founder of Ubiq, a web-based dashboard reporting application. He’s also a web developer and data analyst. Connect with him on LinkedIn

The post Design Strategies for Information Dashboards appeared first on Six Revisions.

Friday, February 13, 2015

1stwebdesigner

What is The Best Professional WordPress Theme To Use in 2015?

Posted: 13 Feb 2015 02:31 AM PST

Is X theme the ultimate WordPress theme?

Does X Theme Fit Your Development Style and Needs?

This is the second review from the series about the best WordPress themes you should consider using to increase the speed of how quickly you develop websites for your clients.

Now, you will be choosing a WordPress theme or WordPress theme framework that fits your development style and needs. When you make a decision, you will use your top choice as a base for building all your websites.

In this article, we will deeply review and analyze the X theme, which recently has been getting wide popularity among graphic and web designers. You might have seen their ads appearing in the web design community all over the place and wondered what’s the deal with this mysterious X?

While X is not officially titled as the theme framework based on theme functionality, it can be used as one. As I go deeper in reviewing the theme, you will understand how and why.

X is a much cheaper premium solution compared to its competitors, but the value and functionality you get for the price is amazing. X theme is here to disrupt the WordPress market loudly standing out of the crowd.

Currently X is the Number 2 best WordPress theme on ThemeForest, but seeing what X has created, I am very confident this year that X will gain the No. 1 spot.

Things to consider when choosing WordPress theme or framework:

Price – how affordable is it?
Visuals – how beautiful and cool WordPress theme is right outside of the box?
Theme functionality
Is the WP theme SEO friendly?
Social media integration
It it WordPress responsive theme?
Check for browser compatibility
Support level Forums
Documentation and manuals
Are there video tutorials?
Number of themes, how many different designs are there?
Number of users – how popular is theme?
Refund policy
Speed and Size – how fast loading is the theme right outside of the box?
Translation – how easy theme can be translated to other languages?
Extendability, third-party plugins – can you use it as one page WordPress theme, as shopping cart, as portfolio theme as BuddyPress theme?
Coding requirements – how advanced programming skills theme will require?
Dashboard interface – how intuitive is dashboard for new users?

For X WP theme review I will especially focus on four main criteria:

Theme Support – level of support, documentation, tutorials, and user base
Design, visuals – how beautiful the theme is straight out of the box
Price – I would say themes and frameworks are generally very affordable, but I know cost is also important to some people.
Functionality, flexibility – This will be the most in-depth section because it helps you discover what happens under the hood. It will include things, like additional extensions available, SEO friendliness, responsiveness, security, ease to update, site load speed, and ease of customization (page templates, widget areas,easy of adding custom CSS, child themes).

*Note – before picking the X theme for review, I analyzed the top ThemeForest themes ElegantThemes, WooFramework, Thesis, OptimizePress, Themify, WpZoom etc.. To make it an easy affordable, premium WP theme choice, I am reviewing X theme first.

When you buy X theme, you don’t just get one theme, you get 4 unique designs (called Stacks) and 33 unique pre-built demos.

X Professional WordPress Theme by ThemeCo Review

While X isn’t called a framework, it is built as one. X might feel as a surprising choice to use as a framework but as you keep reading, you will understand why it’s worth giving this theme a try and why I am considering it the best WordPress theme of 2015.

For several years, Themeforest themes had a bad reputation because most themes don’t use the best coding practices. Themes are bloated adding unnecessary code and making theme files and databases larger and slower than they should be. The situation has been improving but still it is the case with most of the ThemeForest themes. X theme stands out from the crowd because it is not only a very beautiful and non-coder friendly theme, but also has a clean code, amazing functionality, and good site loading speed. It does not clutter your theme with code you don’t want to use. In addition, X is very powerful in terms of functionality and customizability as well as great for professional web developers as well.

X theme was launched on December 2013 by Scott Marlow and Kyle Wakefield. After working for a year on X theme, they released it to the public one year ago. They don’t have a long background in the WordPress field like the Genesis founder but they are very experienced entrepreneurs. They came in the market with a fresh look to bring in innovation and change.

X theme has been built from a marketer’s perspective, which is what I like most about the X theme. Because in the end, no matter how beautiful your website is, what matters most is that your website gives you the results you desire and the leads to conversions.

Design is not just what it looks like and feels like. Design is how it works. - Steve Jobs

Click To Tweet

On 17 July 2014, they achieved the Power Elite status on Themeforest in just six months by selling $1,000,000+ worth of WP themes and achieving the fastest selling Themeforest theme status.

Currently, the X WordPress theme has been purchased more than 40,000 times and answered over 20,000 support questions (within Themeforest and their website). X theme definitely was one of the best WordPress themes in 2014, and has committed to do even better in 2015.

When I reached out to X theme founders and asked what is the single best thing about their theme, they responded with one word – SUPPORT.

Their theme is mostly purchased by designers and is even used by the Utah US government. It does require quite a bit of learning before you can utilize the X theme to its full potential. I do believe it would take at least a few days of studying to use maximize the X theme’s full potential. This is pretty easy, though with their thorough documentation and training videos.

As a not so technical person anymore (haven’t been actively developing websites myself for several years), I did appreciate that I could achieve all the functionality and visuals I wanted without touching code. All I need to do is just use their management panel and connect the pieces together. This power makes the X theme a great option for graphic designers to build powerful custom WordPress themes without an extensive programming knowledge.

Professional developers and web designers can choose to deactivate the visual components and work in code straight from admin section. No need to touch FTP, re-upload files, or setup local servers anymore.

You get access to X own support center, besides being able to use Themeforest comment section.

Theme Support and Documentation

Support

Once you buy the theme, you get access to X forum where you can ask all your interesting questions. Questions can also be asked within Themeforest comments though the main activity happens on the forum. On Themeforest alone, there have been 3,600 comments answered while more than 20,000 questions have been answered within the forum.

Themeco has over 10 dedicated full-time staff who handle support related to X, and their response times are extremely fast. They aim to respond within 24 hours (including the weekends if possible) and generally are able to respond much faster.

Documentation

First of all, you can download the 40-page PDF documentation explaining how X theme works and how you can set it up.

Their knowledge base is really comprehensive with the following sections:

Setup section explaining how to install X WordPress theme, setup WooCommerce shopping cart, update and translate X
Integrated plugins section explaining how to setup bbPress, BuddyPress, visual composer, revolution slider, and Soliloquy within X WordPress theme
Solutions to potential setup issues with Customizer, Revolution slider, visual composer, and navigation
Features section explaining page templates, sidebars, one page navigation, sliders, portfolios, mega menus, and gallery
Customizer section – detailed explanation how to use Customizer to modify your theme design
Addons section explaining all the different addon plugins you get when you purchase X
Customizations section
Meta Options section
WordPress training – in depth training how to start using WordPress, great for new users
Shortcodes – visual composer tutorials explaining how to use all 40 built-in shortcodes.

Their knowledge base is very helpful including textual as well as video explanations covering basic and advanced customization topics.

Within the X dashboard, you get access to following resources:

4 custom wp designs (called Stacks by X)
15 powerful X theme created plugins
Demo content – there are 10 different unique designs for the Integrity, Renew, and Icon themes and 3 designs for the Ethos theme. Here you can download the demo content for all these 33 versions and immediately apply it to your website. This is a great way to rapidly achieve exact setup you see in the demo
Changelog section – view all the updates, bug fixes, and improvements. This is a good place to learn about the new functionality and see if any bug you had has been fixed. The X theme had 25 major updates in 2014
XIP experts – the X theme was built by consulting with the world’s top online marketers. In this section, you can exactly see what advice these top 10 marketers gave to the X theme creators
Marketing training section – here you can watch in-depth videos about marketing and entrepreneurship which will help you to think like a marketer when creating websites for yourself or your clients. From these videos, you will get basic understanding about affiliate marketing, buying and selling websites, email marketing, power of membership websites, SEO, information products, selling online, and using videos as a marketing tool.

Learn basics of internet marketing with X videos!

X theme strong marketing focus is one of the biggest reasons why I like this theme so much. It’s not about just a pretty website, but it is about building a website that leads to results you want. With X, you even get basic marketing training to be a better help for the clients you serve..and be able to charge more since you now provide higher level help.

X has gorgeous retina visuals and stunning animation effects.

Design and Visuals

Now this is where X really shines. X looks amazing straight out of the box and you can duplicate their beautiful demos to achieve the same look and layout with just a click of button! That is pretty damn impressive!

You must have a Stack (how X refers to its 4 unique designs) selected to use X. Switching Stacks doesn’t just mean you get a new skin, it means you’ll get a whole new set of styles, features, and functionality specific to that Stack. For example, Icon’s unique fix sidebar is only available in that Stack because you cannot use it in any others. Additionally, Ethos’ magazine-type has features, such as Post Carousel, Post Slider, featured post display, and more, which are only available in that Stack.

It is better to fail in originality than to succeed in imitation - Herman Melville

Click To Tweet

Then on top of that, you will be able to further customize a theme by creating a child theme to overwrite the styling of the Stack you use.

Hope this helps you to understand how Stacks work, Now, we can dive in deeper into the four main Stacks X has:

Integrity is the most feature rich, cool all-purpose WordPress business theme
Renew is a creative, clean, professional theme, focused around flat web design trend
Icon is the simplest theme with minimal design, no distractions
Ethos is a versatile theme best used for news or magazine websites, where vast amounts of content needs to be displayed in one page.

That’s a quick overview, but lets dive deeper now.

integrity-themeco-x-wordpress-business-child-theme

Different demos in different sizes for Integrity theme.

Integrity X theme

10 Integrity theme designs are multipurpose and best suited for small business owners who have a lot of needs. Maybe you want music, fashion, restaurant, photography, agency, video, portfolio, eCommerce, responsive, one page, BuddyPress, real estate friendly WordPress theme? X theme gives you functionality and the visual support to do it all.

Compared to Icon (which is best for light, clean and white designs), Integrity has light and dark, black theme versions and by default is more feature rich. This design sports big background images with parallax effects and possi. Integrity makes an excellent option for landing pages and one page websites presenting your product or services in style.

1-icon-themeco-x-wordpress-stack-child-theme

Enjoy professional minimalism with Icon theme styles.

Icon X theme

10 Icon theme designs are great if you prefer minimal and clean style. There are 10 unique demos available, which basically means you get 10 different minimal website designs. Demos are incredible and once you find design you or your client likes, you can activate it with a click of button, add content, change visuals and you’re done.

Icon design is a good choice if you want a white, clean portfolio website design, modern and minimal shop or minimal blog design focused around content.

renew-themeco-x-wordpress-business-child-theme

Renew themes are all about being flat and beautiful.

Renew X Theme

10 Renew theme designs are built all around a popular flat design style. Use it for your blog, online store, or portfolio website.

Lastly, 3 Ethos theme designs are the best for busy news blogs and magazine type websites. One of their demos look extremely well for a photography or video site. No visual for this one, you need to check live demos to appreciate the design and power of visuals anyway! Go do it now, and come back when you are done!

Basically all demos showcase everything you can do with the X. Use it as a landing page, one page website, single column, 2-column, animation effects. I keep repeating myself – but with X you can do so much easily!

As a conclusion, it was really hard to review 4 main theme designs and their 33 demos because every design is truly unique. One thing about X theme demos is that most designs look great because of the great product images and photographs which can be a downside if you don’t have access to great looking images. Keep that in mind, when looking for a WordPress theme you will use to build website for your client.

How affordable is X?

How Much X Theme Cost?

Compared to other ThemeForest premium WordPress themes, $63 price may seem expensive but if you look at the included features, functionality, training videos, and customer support, it is a steal. You also don’t just get access to one theme, but you get access to a powerful framework with many professional theme designs, free WordPress plugins and world-class support included for no extra cost!

What exactly do you get for $63?

Free updates and support
Textual and video training videos for both WordPress and their theme usage
20 internet marketing training videos
Four different Stacks with specific functionality for each plus 33 more unique designs.
15 additional plugins developed by X
400 vectorized icon fonts
Revolution Slider plugin ($15 value)
Visual Composer Plugin ($28)
All designs in PSD version
41 built-in short-codes to extend your site functionality
single site license. There is no multi-site license, which means you will need to purchase theme again if you want to use it for several websites.

If we would compare Genesis framework and the X theme in terms of price, X theme is 6X cheaper. But there is no option of buying unlimited or multi-site license which means you need to buy a new license for each website you develop.

X Theme Refund Policy

X is using Themeforest from the Envato network to sell their theme which means you will need to follow the Envato refund policy. Envato Market will generally only offer refunds if the item you purchased is broken, malfunctioning, or corrupt, or doesn’t work as described.

x-wordpress-theme-functionality-responsive

X is very powerful, you can do so much with it, if you know how to utilize X correctly!

X Theme Functionality, customizability and flexibility

Now let’s explore what’s under the X theme hood and explore how easy it is to customize WordPress with X.

Search Engine Friendliness (SEO)

X theme has been built up using the latest, semantic HTML5 markup allowing search engine spiders to easily read different parts of content starts and ends. It also easily understands what the content is about.

X theme doesn’t have built-in SEO options but you should install Yoast WordPress SEO plugin for every WordPress installation anyway.

When looking at the themes in terms of SEO, the most important factor is site loading speed. We will explore how fast loading X theme is in the speed section, but keep in mind X has included lots of beautiful visual effects, retina support. If you want to use these features, you need to expect your site will take a bit more to load, for SEO focused sites Icon minimal designs probably will be the best choice.

Responsiveness

All the X designs are fully responsive, 100% fluid, and retina ready ensuring that your website looks amazing even on high resolution displays.

There are icon fonts, optimized CSS, retina logo, and favicon support looking sharp on any device. You can also specify within theme settings what elements will be shown or hidden on different size screens.

X theme truly looks awesome on all devices and it is following latest web standards meaning it is HTML5 valid.

Updates and security

The biggest danger with security is when you don’t update WordPress version, themes, and plugins. With the X theme, you can choose to enable automatic updates for theme and plugins to ensure you are always up to date and possible bugs that come up are fixed fast.

Built-In Customization Options

The X theme is packed with customization options allowing you to use it as a fully functional website builder if you choose so.

My favorite feature is Demo Content allowing you to pick one of the 33 design demos you like and achieve the same look in a few seconds (without images because of copyright reasons). If you don’t like to start website building process with a blank page, this is an excellent way to start quickly.

Demo content feature in action. Choose demo content, click on few radio buttons and you are done.

This is the view I get on Appearance>Customize WordPress section. I did deploy Integrity 1 demo on test site, which you can see in screenshot.

builtin-theme-co-customize-visual-editor

This is how Integrity Stack looks right outside of the box.

In the Customizer you can:

choose between 4 Stack (unique designs with with specific features and functionality) options which will, in turn, provide you with different set of options within the customizer
customize whole site typography, textual logo settings
customize button style, header navigation position, footer widget areas, and contents
change main blog, single blog, and archive pages styles and layout
add social media profile, RSS buttons
add favicon, Touch icon for retina displays and tile icon for Microsoft
add custom CSS or Javascript scripts like Google Analytics snippet
customize widget areas.

Create Custom Posts and Pages

You can create and customize custom pages easily using the Visual Composer page builder. This is great for quickly creating one page layouts, landing pages, or custom home pages.

When creating new posts and pages, there is also the X short code button, which allows you to quickly add powerful functionality anywhere you want. There are 40 different functionality short codes you can add in all. Make sure you preview live demos to understand why I am so excited about X built-in short codes.

Skill bar looks so stunning in action! Use it for your own portfolio site to show off your skills!

Make Use of Built-in Short Codes in X Theme!

Here are just a few examples of what you can add:

accordion menus great for FAQ pages
add table of contents within a post. Great if you have a long post (like this) and you want to add easy navigation for readers. Also Google really loves table of contents.
responsive pricing table
tabbed content
animated modern counter
code shortcode to easily add HTML, CSS or any other code. Great for tutorials.
Google map embed
animated skill bar

Get access to 15 more plugins for added functionality with X.

Get access to 15 more plugins for added functionality when you purchase X.

Additional Functionality with X extensions

There are 15 plugins built by X which you can use to add more functionality to your website. Since X is built with marketing in mind, their plugins reflect that.

What’s a great thing about X extensions is that each of the plugin is maximally optimized to run as fast as possible within X.

For example:

There is a minimal CSS output to the page, eliminating extra HTTP requests and keeping page size as small and efficient as possible
Similar to CSS, JavasScript for these extensions is kept inline whenever possible to make the page load faster
Extensions expand in more short codes which you can use to mix together with core short codes to get a new functionality.

There is more to the extensions than you would guess at the first moment.

Plugins:

Video Lock – this plugin allows you to control when the call to action button appears on your video. Great for landing pages, where there is only video. Only after the visitor has been hooked with the video does the buy button appear. You would usually need to pay for such feature as a standalone plugin.
Content Dock – allows you to slide out any content or marketing offer you want as read scrolls down your content. Great to use to show up related articles, opt-in form.
Mailchimp – integration with the popular Mailchimp email solution to build your email list
Add Disqus comments
Add Custom 404 page
Easily add Google Analytics to your website
Add Facebook comments to your articles
Olark live chat integration – great way to interact with visitors and answer their questions while they are making decision to purchase your product
Smooth scroll – add smoother scrolling to default scrollbar
Revolution slider – build complex slides and demonstrate features with style
Soliloquy – alternatively add lightweight slider for simple picture display effects
Terms of use – add terms of use checkbox and page when users register on your website
Under construction – handy little maintenance plugin you can easily activate when doing updates. Customize the page visitors see during maintenance
White label – personalize your site login page and add custom messages to your clients within dashboard.

X theme also has built styling support for popular plugins Gravity Forms, Contact Form 7, WooCommerce shopping cart, bbPress forum and BuddyPress social network. This means that these plugins will feel native to each Stack, right after installing them and you don’t need to spend extra time styling them one by one.

There aren’t really any third party plugins for the X theme yet but seeing how fast they are growing, I wouldn’t be surprised to see some in future.

How Fast And Optimized For Speed X Themes Are?

Let’s check how fast the X themes are using Google Pagespeed, Pingdom and GTmetrix tools. What I like about X is that they seem to be doing the best they can with the beautiful visuals, functionality and animation effects they include in their themes.

When looking at the test results, remember that X theme demos have included lots of visuals, functionality to show off their theme, which is increasing the number or requests and page size.

For example Integrity theme demo has:

background fullscreen video in place, which looks amazing, but it is sizeable video file;
all the shortcodes are active so you can demo them;
Woocommerce shopping cart is active
there are 12 active pages for preview
BuddyPress and bbPress is activated

Keep these things in mind when previewing performance reports. If you would want to include all of the functionality and visuals, you will need to make trade-offs how fast your site loads. For usual website you would use 1/3 or 1/4 of all the functionality and visuals X has included in the demo.

X full demo page size is 8.5mb, taking site to load in 5 seconds.

Integrity Stack Main Demo Results:

Google PageSpeed – 79/100 for desktop, 54/100 for speed, 98/100 for user experience
Pingdom – performance grade 72/100, load time – 4.37 seconds, page size 3.3 mb, 103 requests
GTMetrix – page speed grade 90%, YSlow Grade – 76%, page load time 5.18 seconds, total page size 8.50 mb

Integrity Stack is pretty heavy because of the video preview on the background and large feature images. The request number is high, because of included JS effects, Woocommerce, BuddyPress, bbPress.

GTmetrix-x-theme-renew-performance-report-speed

JavaScript and images slow site the most, strongly consider yourself how many visuals you will include.

Renew Stack Main Demo Results:

Google PageSpeed – 74/100 for desktop, 62/100 for speed, 92/100 for user experience
Pingdom – performance grade 87/100, load time – 3.60 seconds, page size 959.2kb, 48 requests
GTMetrix – page speed grade 84%, YSlow Grade – 80%, page load time 3.25 seconds, total page size 970kb

The Renew site is much lighter and hence achieves pretty good page load speed time.

GTmetrix-x-theme-icon-performance-report-speed

Icon is the fastest demo, because of the minimal style.

Icon Stack Main Demo Results:

Google PageSpeed – 73/100 for desktop, 53/100 for speed, 99/100 for user experience
Pingdom – performance grade 90/100, load time – 1.93 seconds, page size 1.8mb, 60 requests
GTMetrix – page speed grade 86%, YSlow Grade – 79%, page load time 3.06 seconds, total page size 1.84mb

Icon achieved high results in the Google user experience loading pretty fast considering the page size is 1.8mb.

And finally here are Ethos Stack Main Demo Results:

Google PageSpeed – 75/100 for desktop, 63/100 for speed, 99/100 for user experience
Pingdom – performance grade 89/100, load time – 2.52 seconds, page size 2.2 mb, 50 requests
GTMetrix – page speed grade 94%, YSlow Grade – 79%, page load time 3.95 seconds, total page size 2.16mb

Good Design is Good Business. - Thomas Watson

Click To Tweet

If you want to have beautiful retina images, video backgrounds and lots of animated sliding effects, you must consider page load time. It’s a gamble and you should decide how much visual effects you want to add. X designs are amazing and the big reason for that are high quality visuals and animation effects. You can customize within the X theme settings what JavaScript effects to use and which ones to leave out to achieve higher site speed or better user experience.

What I suggest is to look past all the animation effects and include just one or two of them in places where it really counts. For example, include animated video header, but then afterwards don’t add any more animation. Or go for simple clean pattern in background and then include some nice loading effects throughout the design. X theme demos are packed because they want to show everything you can do with their theme. But professional web designers will keep in mind that “less is more” and utilize built-in effects only in places where it counts.

X theme does a really good job by not adding unnecessary code to your theme for the features you don’t use. Use X with caution and don’t overdo the effects. It is a bit hard, at first I was taken too much with all the beautiful effects, but you cannot overdo them. Don’t include all the shortcodes, sliders, plugins you can – only include ones that counts and then your site will look great, load fast and look professional.

Finally, I reached out to X creators and got their feedback and suggestions regarding WordPress theme load speed. Kory Wakefield, X lead developer shared some really good tips in general and explained what they are doing to make X fast:

“While these speed tests can be a good indicator of things in general, there are certain aspects of their testing that we as theme authors have no control over.

For instance, they might convey that “all scripts should be moved to the bottom of the site” – however, we do not necessarily have control over this for numerous reasons:

Some scripts and libraries are loaded in specifically by WordPress and we have no control over their placement. For example, WordPress loads its bundled jQuery library in the <head> of the site, and since it is a bad practice to remove this and move it elsewhere, this must be left in place.
Plugin authors include their own scripts and styles and we have no control over how this is handled. Some authors might include multiple files for their plugin at once, which will make these systems say “you have too many HTTP requests, please reduce them”, but again, we have no control over this.
Regarding deferring the parsing of JavaScript, we avoid inline script tags whenever possible, and utilize HTML data attributes extensively to keep JavaScript in their own files, but still have access to data from PHP. Our recent short-code JavaScript overhaul in v3.0.0 of the short-codes plugin significantly reduced the amount of inline <script> tags, providing large gains in this area.

Additionally, some of the items listed in these speed tests are not theme related at all, and instead have to do with server-side configuration:

Always make sure your site is gzipped to ensure speedy delivery of your content. Gzipping is a method of compressing a website’s markup, JavaScript, and CSS before sending it to the client to reduce their sizes and therefore increase loading speed.
Setting up caching on the server level can help to ensure that resources are saved for easy recall later and quicker loading times
Caching plugins can take this a step further by creating “static files” from dynamic PHP to make things even quicker on the front-end (this must be used with caution though as it can be known to create problems if it is not setup properly)
Setting up a CDN can help load resources from multiple domains and combine scripts/styles into fewer HTTP requests rather than many.

For our X demos, we do not have any extensive caching setup or use any CDNs. This is done to show as “raw” a result as possible without all of this extra setup as many users do not take the time to do these things. However, with a little bit of proper server-side configuration these metrics can increase significantly to ensure things are running as smoothly as possible.”

X is beginner friendly

For total beginners – you can easily build websites using one of the 33 pre-built designs and customize basic looks with the X visual editor and theme options without touching any code.

For amateur graphic and web designers – the X has been used a lot by graphical web designers who utilize the X’s functionality and flexibility without being hardcore programmers. We will be having an interview case study soon with a graphic designer who now creates powerful websites for her clients without being expert programmer.

For advanced programmers – the X is very extensive and has plenty of action hooks which you can use throughout the theme for making alterations. Heavy modifications are easily possible using “Views”, that break the theme up in smaller pieces. Think of each View as a Lego brick which can be used together with other bricks to build a more complex structure.

Learn more about X theme customization best practices and available actions and hooks.

To conclude, it will take some time to learn how the X theme works. Right after installing the theme, I was a bit overwhelmed with all the functionality I had access. If you make a commitment, however, to spend time to read their getting started PDF guide and view their training videos, you will have serious superpowers in your hands in just a few days.

X is here to disrupt the market and aim for being the theme of 2015. It is an amazing theme, you can get with only $63 investment and use it to quickly build high quality and great looking websites for your clients.

We actually did interview with Dana, a professional web designer who scaled her design business by using X theme effectively. Learn how she did it and listen to the interview now!

Interview with Dana about using X theme to scale her business.

What others are saying about X?:

WordPress X Theme Review: Is It Really All It’s Cracked Up To Be? – written from a straight up user objective point of view.
X Theme Review – Is It REALLY The Ultimate WordPress Theme?
X Theme | A WordPress Theme Review For Photographers – website owner is using X theme on his own website as well.

1stWebDesigner Rating for X theme:

X is truly a steal deal for designers.

Who Should Use X theme?

At the start of article I promised to help you make suggestions so you can choose the right tools, that will be the most effective for you. This review intended to show off X best features and possible challenges, and I hope you already have a good picture if this theme is right for your development style.

In a nutshell, X theme intends to be great choice for everybody, not only professionals, but it is also very beginner friendly. Professionals will find lots of helpful functionality, shortcodes and functions built in to improve their site development speed. Beginners will find many helpful training videos, visual editors, where they can achieve results they want by just clicking the buttons. X is basically a visual website builder for beginners, and lets professional go under the hood and utilize X built-in functionality.

Who X theme is for:

Starting and amateur web designers, who want to be more productive, but don’t have a lot of money to invest to get that. $63 makes it a great starting option.
Beginners – even for people, who have never built any website in WordPress, you will be able to build good-looking and functional website with X. It will probably take a week for you to learn the basics. But if you are on budget and not willing to make excuses to yourself, X will be great help to getting your site live and look professional.
Freelancers, who work with clients, who don’t know what they really want. With X theme demos, you can put different website concepts together very quickly, build great looking personal brand website and amaze your client with the fast and beautiful results you provide to him.
Professional web designers, who appreciate visuals, animation effects and built in time-saving functionality. If you have internet marketing experience, X has strong marketing based functionality, allowing you to really help your clients create CONVERTING websites.

Who X theme is not for:

If you are building minimal websites with very little visuals and no animation effects, you will not find X as useful, because you simply won’t use most of its features
If you are not ready to invest time to learn the theme, X won’t be very easy to set it up. X has lots of functionality built in and you will need to spend time to understand how to use it effectively. If you want to setup super simple website, probably you shouldn’t go with X as a newbie. If you do take time to learn your way around X, you probably never want to use any other theme though.

Read more about X theme features and view demos on their own ThemeForest page.

What has been your experience with ThemeForest themes and more importantly have you tried X theme? Would love to hear your experience in comments section!