Magento – Inchoo http://inchoo.net Magento Design and Magento Development Professionals - Inchoo Thu, 11 Feb 2016 11:54:27 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.2 How to effectively improve usability of your Magento store? http://inchoo.net/magento/improve-usability-magento-store/ http://inchoo.net/magento/improve-usability-magento-store/#respond Tue, 09 Feb 2016 12:42:41 +0000 http://inchoo.net/?p=25903 As a merchant, sometimes you may find high bounce rates, lower conversion rates than you’d like, or any other signal warning you of troubles in your online store. Online merchants are leaving plenty of money on the table by missing a very important component of an eCommerce business: online store usability. Many of them fail...

The post How to effectively improve usability of your Magento store? appeared first on Inchoo.

]]>
As a merchant, sometimes you may find high bounce rates, lower conversion rates than you’d like, or any other signal warning you of troubles in your online store.

Online merchants are leaving plenty of money on the table by missing a very important component of an eCommerce business: online store usability. Many of them fail in their primary goal of making purchasing easy for their customers.

So, why do customers leave and how to change that?

Customers could leave due to numerous factors, some will find a navigation too complicated or find themselves staring at a mobile page icons attempting to figure out what to do next. There are plenty of other sites which sell the same products and your customers aren‘t going to take time to learn how to use your site; they will just walk away and see if the shopping would be easier with your competitors.

There are many eCommerce usability guidelines online with actionable instructions which should improve your store usability and try to help you get the lower abandonment rates and boost conversion. However, there is one problem with all those guidelines, they’ve tested many eCommerce sites, but not yours.

It is true that most online stores face similar usability problems, but each business is unique with different type of customers, specific industry and business strategy. For this reason it is not possible to create feasible list of guidelines which will work for all online stores. What works for one online store may not work for another. Nevertheless, there is a way to find and resolve usability problems and make users less likely to abandon your site.

Auditing Usability Of Your Store To Detect Possible Flaws

Our Magento usability audit is a detailed analysis of store’s usability, created without any automation software. Main goal of this audit is to assist merchants with overcoming obstacles standing on the path to realize full potential of online store.

Comparing your online store against usability best practices is only small part of our usability audit. What’s different about this audit is web store accessibility analysis and analysis of micro interactions; areas that many tend to ignore or overlook even though they can have great influence on success of the store.

Another important difference is user research. Our goal is to better understand how customers are using your store and develop better experience.

It is possible to measure two types of data: quantitative and qualitative. Most agencies will use Google Analytics to collect numerical data that answer questions who, what, and when, but they fail answering more important questions: why and how? To answer these questions we need to use usability testing tools and methods. At Inchoo we use HotJar which allows us to collect heatmaps, visitors recordings, conversion funnels, and help us understand how visitors engage with a store.

To conclude, it is crucial to couple numerical data with qualitative data measurements to have a complete picture of users and their needs, to be able to detect possible flaws and compile a usability audit report.

With our Magento eCommerce usability report you get a list of recommendations based on both quantitative and qualitative data, that could help solve the issues that affect your store and improve usability and user experience.

Implementing suggested changes

With concrete design recommendations in-hand, we discuss the next steps together with a client. Sometimes, if there are too many issues to resolve, it is more efficient to create everything from scratch, but usually we recommend incremental redesign strategy to minimize risk, maximize ROI and improve your web store continually.

Let’s say one of recommendations on your list is to consider switching from carousel to alternate way of showcasing important information on the homepage because your users aren’t clicking on it. Many merchants will probably suggest to copy the layout from their more successful competitors and many designers will do that without many questions. At Inchoo we prefer to use data and power of cognitive psychology to understand customers needs and optimize your online store based on their behaviour.

A/B test – validating new design changes

Once we’ve collected enough data, we can set up conversion goals and create design iterations. However, we can’t be sure that the new design will perform better than the current version without testing. We need to discover which of the two versions will be more successful – should we go with the version A or version B? To find an answer to that question we should run an A/B or split test. This is the simplest testing method available. It is an experiment between different design versions of the same page used to test potential improvements. Once we find out which version is more effective at driving the behaviour we prefer, we are ready to implement the winning version.

So, are you facing usability issues on your store?

To conclude, if you fail in successfully converting visitors into customers, your visitors are probably facing usability issues on your store.

Recommended solutions are:

  1. Identify pages on your site suffering from usability issues by auditing usability of your store
  2. Gather quantitative and qualitative data to understand how visitors engage with a store
  3. With design recommendations in-hand set up conversion goals
  4. Create design variations for A/B testing and run a test
  5. Implement more effective design version

Whether you are running a successful Magento store or you are aware of usability issues, there’s always room for improvements so get in touch to get a detailed report with recommendations and guidelines to improve your users’ experience and increase conversion rates.

The post How to effectively improve usability of your Magento store? appeared first on Inchoo.

]]>
http://inchoo.net/magento/improve-usability-magento-store/feed/ 0
State of Magento Solution Specialist Certification – January 2016 http://inchoo.net/ecommerce/state-of-magento-solution-specialist-certification-january-2016/ http://inchoo.net/ecommerce/state-of-magento-solution-specialist-certification-january-2016/#comments Mon, 08 Feb 2016 13:58:33 +0000 http://inchoo.net/?p=25841 The latest figures on the Magento Certified Solution Specialist program and the updated wall of fame with 31 people holding all 4 available Magento certificates. This report features some interesting stats and trends around Magento certification program and the data comes from the official Magento’s certification directory (end of January 2016). As Magento 2 rolled out since my last...

The post State of Magento Solution Specialist Certification – January 2016 appeared first on Inchoo.

]]>
The latest figures on the Magento Certified Solution Specialist program and the updated wall of fame with 31 people holding all 4 available Magento certificates.

This report features some interesting stats and trends around Magento certification program and the data comes from the official Magento’s certification directory (end of January 2016).

As Magento 2 rolled out since my last report, I thought we might get into a much slower mode as many people would wait until the M2 certification.

But, it was clear that new certifications are quite some time away and many people want to prove their Magento proficiency, so we’ve seen pretty similar growth in absolute numbers compared to previous reports. We now have the total of 540 people worldwide making the proud group of Magento Certified Solution Specialists.

Overall growth continues to slow down with 35% new certificates obtained globally since August 2015 as opposed to almost 50% growth in a previously observed period (March to August 2015).

Magento 2 is certainly a factor, and some trends from previous reports have continued – Europe is still the strongest continent way ahead of all others. Asia is again among the highest growing continents with the only one surpassing a 50% growth mark (55%), and North America’s growth has declined.

Great news for Magento as an international ecosystem is that top 5 countries combined make up for just about half of all certificates – and there are 46 countries on the MCSS map at the moment.

mcss-continents-2016-01

Top fives – countries, cities and solution partners

There are no significant changes in the countries’ list – USA still holds reign with 122 MCSS badges which gives them a comfortable lead in front of its European counterparts.

United Kingdom continues its growth and will probably stay second for quite some time. Netherlands, Germany and Sweden are all there as well, but India is fast approaching with the total of 21.

TOP 5 COUNTRIES

  1. USA – 122
  2. UK – 64
  3. Netherlands – 36
  4. Germany – 33
  5. Sweden – 29

mcss-countries-2016-01

TOP CITIES

Now, this is exciting – even with Vaimo’s huge growth, we’re thrilled we were able to put Osijek right there to the top, where we used to be for quite some time. And with Stockholm and London just behind us, it continues to be a fun race. Let’s see what happens in a couple of months :)

And finally, Kiev makes the list – with Ukraine being the backbone of Magento, it only makes sense – good to have you on board, guys. And just like that, there are no US cities in Top 5 any more.

  1. Osijek, Croatia – 19
  2. Stockholm, Sweden – 18
  3. London, UK – 17
  4. Groningen, Netherlands – 12
  5. Kiev, Ukraine12

TOP 5 SOLUTION PARTNERS / COMPANIES

Scandiweb is making their way higher on the list so we’ll need to be careful if we want to hold on to our 2nd place :)

  1. Vaimo, Sweden – 34
  2. Inchoo, Croatia – 16
  3. Scandiweb, Latvia – 10
  4. Classy Llama, USA – 10
  5. Smile, France – 9

Now, one question need to be raised here – how come almost none of the top US Gold Solution Partner companies have significant numbers of certified solution specialists? I checked out some of their official partner profiles and it seems like even the biggest ones have only a handful of solution specialists on board.

They may not perceive this certificate as something valuable. This may be the case if they’re already established and have different marketing and sales channels where this may not be perceived as something contributing to their value proposition. Or it can be something else – we can ask them before the next report :)

Magento certification wall of fame – 33 and counting

It was great to see how people responded positively to shout-outs to those #RealMagento individuals who have collected all four Magento certificates (MCD, MCD+, MCFD and MCSS). Hey, we even had two guys take the MCD exam just to make the cut, so a special shout-out this time goes to Michael Türk and Nicolai Essig.

We now have 33 people in the wall of fame, and counting. If you know of anyone who should also be included but isn’t (this would most likely be due to their profiles not being searchable in the directory), let me know and I’ll make sure to include them to the full list available here.

Here they are, listed alphabetically:

  • Adriano Aguiar (Brazil)
  • James Anelay (UK)
  • Jitze Bakker (Netherlands)
  • Fabrizio Balliano (Italy)
  • Jacques Bodin-Hullin (France)
  • Kris Brown (USA)
  • Ashoka de Wit (Netherlands)
  • Nicolai Essig (Germany)
  • Bartosz Gorski (Poland)
  • Gabriel Guarino (Argentina)
  • Phillip Jackson (USA)
  • Vladimir Kerkhoff (Netherlands)
  • Francis Kim (Australia)
  • Dave Macaulay (UK)
  • Chris Manger (USA)
  • Ben Marks (USA)
  • Paul Masson (France)
  • Pierre Masson (France)
  • Daniel Navarro (Spain)
  • Derrick Nyomo (USA)
  • Vladislav Osmianskij (Lithuania)
  • Rutger Rademaker (Netherlands)
  • Martijn Riemersma (Netherlands)
  • Bas Rozema (Netherlands)
  • Sergii Shymko (USA)
  • Henry Tran (Australia)
  • Nhu Tran (Vietnam)
  • Michael Türk (Germany)
  • Toon Van Dooren (Belgium)
  • Anthony Van Zandycke (Belgium)
  • Danny Verkade (Netherlands)
  • Jakub Winkler (Poland)
  • Tobias Zander (Germany)

All hail the certification kings! :)

Magento 2 is out – what does it mean for you?

If your organization is combining developer and solution specialist certificates with a Magento 2 Trained Partner badge (like we did), chances are you are in a better position for new potential clients. Even with so many differences between M1 and M2, merchants still need to have top quality support and people they can rely on to help them grow, not merely develop an eCommerce website.

This is why we’re still investing in getting our people certified and we’re now at 22 developer and 16 solution specialist badges (several more pending in February), and we won’t be stopping any time soon.

What are your plans for MCSS certification in light of Magento 2?


Disclaimer:

The data for this article is taken from the official public Magento certification directory as well as some of the partners listings and the “heavy crunching” required for this article was completed on January 31st 2016 – if you got certified and had your profile published in the meantime, you may want to wait for this post to be updated :)

There’s also a possibility that not all people who got certified made their profiles publicly available and searchable (I know of several such cases), so the actual number of certified solution specialists is probably a bit higher.

The post State of Magento Solution Specialist Certification – January 2016 appeared first on Inchoo.

]]>
http://inchoo.net/ecommerce/state-of-magento-solution-specialist-certification-january-2016/feed/ 4
How to add an external javascript/css file to Magento? http://inchoo.net/magento/how-to-add-an-external-javascriptcss-file-to-magento/ http://inchoo.net/magento/how-to-add-an-external-javascriptcss-file-to-magento/#respond Wed, 03 Feb 2016 12:35:42 +0000 http://inchoo.net/?p=25775 Few years ago, we had an article describing how to add external files into Magento. It was quite popular, so we decided to come back to it today. Knowing that there is no way to add or remove external files via Magento layout using action/methods, this extension was introduced. Idea was quite simple actually. All...

The post How to add an external javascript/css file to Magento? appeared first on Inchoo.

]]>
Few years ago, we had an article describing how to add external files into Magento.
It was quite popular, so we decided to come back to it today.
Knowing that there is no way to add or remove external files via Magento layout using action/methods, this extension was introduced.

Idea was quite simple actually. All you had to do is to install this extension:
Inchoo_Xternal extension

Starting from there, it was possible to use two new methods in your layout.

<!-- Along with these 3 methods -->
<action method="addJs">
<action method="addCss">
<action method="addItem">
<!-- you can use additional two methods -->
<action method="addExternalItem">
<action method="removeExternalItem">

addExternalItem and removeExternalItem were just aliases of addItem and removeItem added to Inchoo_Xternal_Block_Html_Head which is the class this extension is rewriting.

Of course, nobody would rewrite class just to add methods aliases so the main thing was adding two new types there: external_css and external_js.

So, here is how it looks like if you want to add for example 

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

in all pages except product view page.

<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addExternalItem"><type>external_js</type><name>https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</name><params/></action>
        </reference>
    </default>
    <catalog_product_view>
        <reference name="head">
            <action method="removeExternalItem"><type>external_js</type><name>https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</name><params/></action>
        </reference>
    </catalog_product_view>
</layout>

You could use the code below and you would get the same result, but for readability’s sake, use aliases so you know which part of code depends on the 3rd party extension.

<action method="addItem"><type>external_js</type><name>https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</name><params/></action>

Depends” is a keyword here and one of the main reason why we got back to this article again.

Even though this extensions works now (5 years later) and even though it found it’s home in some of our projects, very important point that wasn’t made when the article was originally published.
This is the third party code. If it’s clean and nice and if you are adding many external files into your installation it can really help you speed things up, but average site doesn’t need that many external files.

So why would you want to have 3rd party extension just to be able to support your theme?

There are many developers around the globe that are looking for quick solution no matter is that the best tool for the job. Result is a website which is made of 100+ installed extensions and majority of those extensions are rarely used. Most of them are installed, I would guess, because developer was looking for an easy and dirty solution.

After some time, that becomes a burden. New developers need more time to get familiar with the project, site gets slow, maintenance becomes horror – there is just more point of failures than you actually need on an average site.

When you publish a Magento related code on the blog, that’s mostly the result of playing with Magento, but many people will use it in real life situations which isn’t always the best idea.

I am not saying that this extension is wrong, I would just like to point out that using it on an average site is not needed. Many people ended up installing the extension just to add 3 lines of text to their shop.

Unless you are already developing similar set of tools that you plan to use as a starting point on most of your sites, there are more simple solutions.

So, even though you are still free to use the extension as much as you like, we recommend that you do that in case you know why exactly you need it, otherwise, do the following:

Add this to your layout, and sleep well :)

<reference name="head">
    <block type="core/text" name="your_external_file">
        <action method="setText"><text><![CDATA[<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>]]></text></action>
    </block>
</reference>

That’s it!

Enjoy responsible coding!

The post How to add an external javascript/css file to Magento? appeared first on Inchoo.

]]>
http://inchoo.net/magento/how-to-add-an-external-javascriptcss-file-to-magento/feed/ 0
Magento’s transactional eMails do-s and don’t-s http://inchoo.net/magento/magentos-transactional-emails-do-s-and-dont-s/ http://inchoo.net/magento/magentos-transactional-emails-do-s-and-dont-s/#respond Tue, 02 Feb 2016 13:17:06 +0000 http://inchoo.net/?p=25617 Editing and styling Magento’s transactional eMails and eMails in general can be a real headache. There are numerous reasons for that, for example the number of eMail clients available that have their own quirks and the complicated workflow of the testing process. This article will cover some of the general advices and tricks that will,...

The post Magento’s transactional eMails do-s and don’t-s appeared first on Inchoo.

]]>
Editing and styling Magento’s transactional eMails and eMails in general can be a real headache. There are numerous reasons for that, for example the number of eMail clients available that have their own quirks and the complicated workflow of the testing process. This article will cover some of the general advices and tricks that will, hopefully, help you in development. These aren’t some general rules for the most part, but advices and guidelines that you may or may not use, which I discovered during my work on various projects.

Choosing the eMail clients for testing

Before you start working on your eMails, first thing that you should do is set up your testing environment. Usually, I choose around 9-12 eMail clients (alongside with a tool for local testing) to do the tests on, based on usage statistics from Litmus Labs. The way I see it, there are 3 general categories of eMail clients:

  1. Default applications which come with the operating system or device (for example, default Android eMail app, default iPad eMail app, Windows 10 eMail app, etc.). These are most accessible applications for the users.
  2. Web clients which are accessible from Internet browser (for example, Gmail, Outlook.com, Yahoo mail, etc.). These are second most accessible applications for the users.
  3. Applications that require setup which may require purchase, download and installation (for example, Mozilla Thunderbird, Microsoft Office Outlook, Windows Live Mail, etc.).

This is also the priority I usually take when choosing eMail clients on which I do the tests. This way, we can cover most of the eMail clients and make sure that eMails display correctly across majority of devices and clients. Also, it is a good idea to take a look at the statistics of most used eMail clients before making decisions.

Defining the structure

When writing HTML and CSS for eMails, we have to use outdated and deprecated workflow and code, due to the lack of support in various clients. We cannot use HTML tags we would usually use today to define the layout; we have to resort to using tables for that. Magento also allows us to create custom header and footer HTML for the eMails that can be included and used across all Magento eMails. It is also important to consult and work with the designers to define the look and structure of the transactional eMails which can be fully supported by most, if not all eMail clients, without resorting to the fallback mechanism and eMail client hacks.

Look out for Outlook and Windows 10 Mail App

Microsoft Office Outlook and Windows 10 Mail App share the similar poor support of some HTML and CSS features. But luckily, there is a way to target those two particular eMail clients with the following simple lines of code.

If you want to add some specific CSS code for Outlook and Windows 10 Mail App, add your CSS between the style tag in Magento’s eMail Header.

<head>
	<!-- ... -->
	<!--[if mso]>
	<style type="text/css">
		/* CSS styles for Microsoft Office Outlook and Windows 10 Mail App */
	</style>
	<![endif]-->
</head>

 If you want to show or hide HTML chunks of code for Outlook and Windows 10 Mail App (for example, if you want to inform the recipient to view the eMail in browser), add the HTML code between the following tags.

<!--[if gte mso 9]>
<!-- HTML code for Microsoft Office Outlook and Windows 10 Mail App -->
<![endif]-->

For reference, you can check out the official documentation for the CSS rendering capabilities for these eMail clients.

The problematic HTML paragraph <p> tag

The paragraph tag is one of the few block elements which are supported in eMails, but there are a few problems with it:

  1. Outlook desktop application ignores any padding CSS applied to it
  2. Outlook web client strips all margin CSS (without any exceptions) and replaces with their own custom bottom margins which cannot be avoided

Those are two specific reasons for me to avoid the paragraph tag. Any padding applied to the tag will only be ignored in outlook, but in outlook.com client the forced margins will just add more empty space along with the padding.

In Magento, the default eMail templates contain paragraph tags by default. The best solution I’ve found for this issue is to replace all paragraph tags with the following tags:

<span> <!-- Content of the block element --> </span><br/>

We only used inline span tag and line break tag to create our custom block element. This way we have a lot more control over it and we can be sure that there won’t be any forced styles applied to it. Using multiple line breaks before and after the block element you can control the vertical space between block elements. This may not be the best solution, but it did make the eMails look consistent across all eMail clients and it gave me a proper control over the vertical spacing.

Issues with <ul> and <ol>  tags

One of the (many) common issues with Outlook and Windows 10 Mail App eMail rendering  is bug in rendering bullets in list elements. This issue causes list bullets not being displayed in eMail. There are two ways of fixing this issue – by using CSS (more universal across the eMails) and by using HTML (requires changing code and layout for each instance of list elements).

CSS solution consists of applying left margin to the <ul> and <ol> elements in your eMails. To prevent really large left margins on other eMail clients, combine this CSS code with Outlook targeting code.

<head>
	<!-- ... -->
	<!--[if mso]>
	<style type="text/css">
		ul{
		margin:0 0 0 50px; /* Horizontal margins only */
		}
		li{
		margin:0 0 12px 0; /* Vertical margins only */
		}
	</style>
	<![endif]-->
</head>

 Another solution is to replace your <ul> and <ol> tags with tables and use UNICODE bullet point characters (like “&bull;”) to represent lists.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top">&bull;</td>
		<td valign="top">Text</td>
	</tr>
	<tr>
		<td valign="top">&bull;</td>
		<td valign="top">Text</td>
	</tr>
	<tr>
		<td valign="top">&bull;</td>
		<td valign="top">Text</td>
	</tr>
</table>

Web fonts and proper font fallback

Web fonts are supported by only some eMail clients, which makes the proper font fallback very important if you don’t want to see a default eMail client font in your eMails. Web fonts are supported by the following eMail clients:

  •         Outlook 2000
  •         iOS Mail
  •         Apple Mail
  •         Android default eMail app
  •         Mozilla Thunderbird

Even if you provide a proper fallback, like you would when you’re writing CSS for websites, Outlook and Windows 10 Mail app (surprise, surprise) can cause issues by not respecting the fallback if the web font is used. In case of Web font, Outlook and Windows 10 Mail app set their font to “Times New Roman” or other default font without respecting the provided fallback. To avoid trouble with Outlook and Windows 10 Mail app, create a standard font fallback wrapped in tags that only target those eMail clients.

Add the following line in the Magento’s Header template.

<link href='url-to-external-font' type='text/css'>

Add the following code to Magento’s noninline eMail CSS file or to the CSS text input in Magento’s eMail editor.

@import url(url-to-external-font);
	@media screen {
		body,
		td {
			font-family: "External font", fallback-fonts !important;
		}
}

And add a special font fallback code in Magento’s Header template for Outlook and Windows 10 Mail app (we know for sure that external fonts aren’t supported):

<head>
	<!-- ... -->
	<!--[if mso]>
	<style type="text/css">
		body, table, td, span, a, b {
		font-family: fallback-fonts !important;
		}
	</style>
	<![endif]-->
</head>

Bulletproof background images and buttons

Adding Image backgrounds and buttons to Magento transactional eMails and Newsletters can certainly make your eMail stand out and make it interesting and engaging to the users, but background image support and buttons support is very poor on some browsers like Outlook (both web and desktop clients) and Windows 10 where it’s difficult to set a background image and even then, it is limited to a single image.

Luckily, there are a few great online tools that will help you create, preview and edit your container with background image and buttons with universal support.

Campaign monitor’s bulletproof backgrounds generator

Campaign monitor’s bulletproof buttons generator

While creating container with background image for Magento eMails using these online generators, remember to change the image links to your media folders after you added the generated code to your Magento image.

Hiding content in eMail

Even simple styles like hiding content in eMail can be difficult due to the poor support of the “display” CSS. But luckily, there is a bulletproof method that ensures that content remains hidden in eMail method. Some of the code relies of setting the height and width of the element 0 and hiding the overflow, and some of the code relies on using Microsoft Office style “mso-hide” to hide the element on Microsoft’s eMail clients.

.hidden {
	display: none !important;
	mso-hide: all !important;
	overflow: hidden;
	line-height: 0px;
	font-size: 0px;
	width: 0px;
	height: 0px;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

Adjusting maximum width and centering eMail in client window

Similar to the previous section of this article, even adding maximum width and centering the eMail layout can be a real headache, but with the following code and following default Magento eMail structure, you can center the fixed-width table. It’s also important to note that eMail width shouldn’t be wider than 600px, this is a general rule and most frequent advice I got. Use the following HTML attributes in your Magento Header template on table and table cell tags to add the maximum width and center the eMail.

<table align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="max-width:600px; width=600px;">
<tr>
	<td align="center" width="600" style="max-width:600px; width=600px;">
		<!-- ... -->

List of widely supported CSS attributes

Best way to avoid additional fixes and special fallback code is to check out and try to memorize the CSS attributes which are widely supported and plan for various fallbacks if there is a required, but not widely supported, CSS attribute which must be used in eMail CSS. Based on the current list on Campaign Monitor’s website, the widely supported CSS attributes are:

Text & Fonts
direction font font-family
font-style font-variant font-size
font-weight letter-spacing line-height

(except on <td> element)

text-align text-decoration text-indent
text-transform vertical-align
Color & Background
color background

(limited support for images)

background-color
HSL colors
Box model
border padding

(not supported for <p>, <div> and <a> )

width

(not supported for <p> and <div>)

Lists & Tables
list-style-type border-collapse table-layout

Taking a peek into transactional eMails in Magento 2

Transactional eMails editor in Magento 2 isn’t any different from transactional eMails editor in Magento 1.9, apart from the new, modern look. It has the same barebones text input for HTML structure and CSS. The default templates have been changed, like the eMail Header which now has added meta tags for modern browsers like Microsoft Edge and automatically adds <style> tag in <head> for noninline CSS, or the new email.css in Magento 2 to be more specific.

Magento 1 Default eMail Header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
{{var non_inline_styles}}
<!-- Begin wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
    <tr>
        <td valign="top" class="container-td" align="center">
            <table cellpadding="0" cellspacing="0" border="0" align="center" class="container-table">
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0" border="0" class="logo-container">
                            <tr>
                                <td class="logo">
                                    <a href="{{store url=""}}">
                                        <img
                                            {{if logo_width}}
                                            width="{{var logo_width}}"
                                            {{else}}
                                            width="120"
                                            {{/if}}
 
                                            {{if logo_height}}
                                            height="{{var logo_height}}"
                                            {{else}}
                                            height="67"
                                            {{/if}}
 
                                            src="{{var logo_url}}"
                                            alt="{{var logo_alt}}"
                                            border="0"/>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="top-content">
                    <!-- Begin Content -->
Magento 2 Default eMail Header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, width=device-width" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<style type="text/css">
			{{var template_styles|raw}}
			{{css file="css/email.css"}}
		</style>
	</head>
	<body>
		{{inlinecss file="css/email-inline.css"}}
		<!-- Begin wrapper table -->
		<table class="wrapper" width="100%">
		<tr>
			<td class="wrapper-inner" align="center">
				<table class="main" align="center">
		<tr>
			<td class="header">
				<a class="logo" href="{{store url=""}}">
				<img
				{{if logo_width}}
				width="{{var logo_width}}"
				{{else}}
				width="180"
				{{/if}}
				{{if logo_height}}
				height="{{var logo_height}}"
				{{else}}
				height="52"
				{{/if}}
				src="{{var logo_url}}"
				alt="{{var logo_alt}}"
				border="0"
				/>
				</a>
			</td>
		</tr>
		<tr>
			<td class="main-content">
				<!-- Begin Content -->

Final steps

After you finish editing, styling and testing Magento’s transactional eMails, it’s a good idea to do an overall test and final check on all eMail clients at the same time and compare the results just in case to see if there are any minor issues with styles and layout that you might have missed.

After that, you can do a spam test. Spam test determines the chance of your eMail being caught in a spam filter by analyzing the contents of the eMail (like Subject of the eMail and plain text) and eMail code. There are many free online tools which can be used for spam testing. Even though spam analyzers cannot ensure that your email won’t be stuck in every existing spam filter due to their quirkiness, they can help you minimize the chances of that happening by ensuring that your eMail is up to standards.

These have been all the helpful little tricks that I have learned over the few months of working on transactional eMails and I hope that they will help you out too. If you have any more helpful and cool little tricks and code snippets for eMails, feel free to add your comment below this article.

The post Magento’s transactional eMails do-s and don’t-s appeared first on Inchoo.

]]>
http://inchoo.net/magento/magentos-transactional-emails-do-s-and-dont-s/feed/ 0
Magento 2 Wallpapers http://inchoo.net/magento/magento-2-wallpapers/ http://inchoo.net/magento/magento-2-wallpapers/#comments Thu, 21 Jan 2016 13:00:56 +0000 http://inchoo.net/?p=25555 It’s been a while since we’ve posted a pack of Magento 1 wallpapers so the recent Magento 2 release was the perfect opportunity to put together a couple of brand new ones. Check them out and feel free to download as many as you’d like. Climb the Magento 2 mountains and show off what a true...

The post Magento 2 Wallpapers appeared first on Inchoo.

]]>
It’s been a while since we’ve posted a pack of Magento 1 wallpapers so the recent Magento 2 release was the perfect opportunity to put together a couple of brand new ones. Check them out and feel free to download as many as you’d like.

Climb the Magento 2 mountains and show off what a true Magento fan you really are! Feel free to share with us and the rest of the community how you’re using them, we’d love to see!

If there are any screen resolutions we missed, let us know and we’ll make sure to deliver.

750×1334   1440×2560   1366×768

1920×1080   2560×1440   2960×1050

The post Magento 2 Wallpapers appeared first on Inchoo.

]]>
http://inchoo.net/magento/magento-2-wallpapers/feed/ 4
Thou Shalt Not Do Inserts in a Foreach … Unless You Know The Trick http://inchoo.net/dev-talk/thou-shalt-not-do-inserts-in-a-foreach-unless-you-know-the-trick/ http://inchoo.net/dev-talk/thou-shalt-not-do-inserts-in-a-foreach-unless-you-know-the-trick/#comments Tue, 19 Jan 2016 11:21:18 +0000 http://inchoo.net/?p=25559 TL;DR; Don’t do it. Just, simply, never write a database query inside a loop. Ever. Put in a little bit of effort and write code that will insert or read all data in one big batch, or at least group big chunks of data in the smallest possible number of queries. That’s it. Move on....

The post Thou Shalt Not Do Inserts in a Foreach … Unless You Know The Trick appeared first on Inchoo.

]]>
TL;DR;

Don’t do it. Just, simply, never write a database query inside a loop. Ever. Put in a little bit of effort and write code that will insert or read all data in one big batch, or at least group big chunks of data in the smallest possible number of queries. That’s it. Move on. These aren’t the droids you’re looking for.

But I’ve been blessed with the virtue of laziness!

Ah. Ok then, read on.

Being blessed with the same virtue myself, I’ve taken a shortcut here or there too, when i was sure no one knew it’s in a non-performance-critical piece of code.

But, that really clashed with my other virtues of impatience and hubris. What if that foreach gets a lot of data, and queries take forever, strangling the server? What if someone saw that code and got sick? Those questions kept me awake in the night and woke me, sweaty, in the wee hours. I could not look at my image in the mirror without a sense of shame.

Things could not go on like that any more.

So I learned of this little trick.

The Trick

Take a good, hard look at this piece of code:

$model = Mage::getModel('your_model/dbtable');
$data = [/* Array with lots of data */];
foreach ($data as $row){
    $model->setData($row)->save();
}

We have all seen it numerous times. Let’s admit it, we wrote code like this at some (bad) point in our life. We’ll call this one “stupid foreach”. What makes it so slow? Transactions and disk writes. For each iteration, database will make the lock, write data to it, unlock it, make a network request, etc.… And that takes time.
That’s why you really should do this instead, somewhere in your model resource:

$this->_getWriteAdapter()->insertMultiple($this->getMainTable(), $data);

That writes the data in 1 transaction, no matter how big it is. And it’s even less code than the stupid foreach! Yet, stupid foreach creeps into code again and again.

Enter the trick:

$model = Mage::getModel('your_model/dbtable');
$resource = $model->getResource();
$data = [/* Array with lots of data */];
 
$resource->beginTransaction();
foreach ($data as $row){
$model->setData($row)->save();
}
$resource->commit();

Yep, it still looks stupid, it’s the most code of the three, but this also gets the data into that database in one commit. And, it still works if you have a really messy foreach with database reads and writes combined.

Talk is cheap, show me the numbers

Here’s what the speed tests say (time in seconds):

100 iterations 1000 iterations 10000 iterations
Insert multiple 0.017 0.079 0.379
Foreach in a transaction 0.074 0.501 4.701
Stupid foreach 1.097 11.729 117.410

What’s the point?

What if you have a huge CSV that needs to be imported, and it just doesn’t fit in memory in one big batch? Reading and inserting line by line would work. What do you do when you come across badly written foreach inserts, and don’t have time or energy to refactor that? Or whatever. You know, stuff in the real world. Daily survival in backend development trenches.

The answer is simple. Yes, it’s always possible to do it properly and you really should, but if you can’t for whatever reason, at least do the trick. It’s just two lines of code around the foreach, and the performance is an order of magnitude better than the stupid foreach. Yeah, it’s still an order of magnitude worse than doing it properly, but it’s a horrible world out there.

The post Thou Shalt Not Do Inserts in a Foreach … Unless You Know The Trick appeared first on Inchoo.

]]>
http://inchoo.net/dev-talk/thou-shalt-not-do-inserts-in-a-foreach-unless-you-know-the-trick/feed/ 2
Speakers of Developers Paradise about why you should come http://inchoo.net/magento/speakers-developers-paradise/ http://inchoo.net/magento/speakers-developers-paradise/#comments Fri, 15 Jan 2016 13:40:39 +0000 http://inchoo.net/?p=25542 There’s a certain amount of buzz about the upcoming Developers Paradise. And why wouldn’t there be? You can expect not only beautiful coastline and great atmosphere but also hot Magento 2 topics from one of the best minds in the industry. We asked them why are they coming to DevParadise, here’s what they had to...

The post Speakers of Developers Paradise about why you should come appeared first on Inchoo.

]]>
There’s a certain amount of buzz about the upcoming Developers Paradise. And why wouldn’t there be? You can expect not only beautiful coastline and great atmosphere but also hot Magento 2 topics from one of the best minds in the industry. We asked them why are they coming to DevParadise, here’s what they had to say.

April will be full of lively events. Community will gather in Vegas, as it usually does, for the Magento Imagine, and then head over to beautiful Opatija to get their fair share of tense techtalks.

Jisse Reitsma confirmed:

I’m so looking forward to the Developers Paradise in Croatia. Of all the community events all over the world, this is still the one with the best techtalks!

And not only that, mentions Fabian Schmengler:

Developers Paradise is a great event to connect with the community, talk to smart people and learn new things, while having fun in the sun. I’m looking forward to meet fellow developers from all over Europe and share my own knowledge as a speaker this time.

If you were thinking whether to get that ticket (or two, maybe even ten), Yaroslav Rogoza has your answer:

Developers Paradise is a place where you can prove again that Magento is not only an eCommerce platform but the lifestyle as well. It’s a really good chance to bring some fresh ideas and meet a lot of great minds from the community by having fun and spending time together with Magento developers from various parts of the world.

Final thoughts have been well summarized by Marco Lopes:

With the release of Magento 2, there’s never been a better time to bring together the Magento community to share our experiences so far. Developers Paradise has a great reputation in the Magento world, and I’m looking forward to hearing so many different perspectives from the community.

Now, wouldn’t you want to taste some of that atmosphere? With everything we got in store for you (so far!) and working on many more things to come, we are positive the number of delegates will only grow. Join over 100 people from all over Magento globe who already bought their tickets in exploring Magento 2 – click here for more details!

The post Speakers of Developers Paradise about why you should come appeared first on Inchoo.

]]>
http://inchoo.net/magento/speakers-developers-paradise/feed/ 1
Inchoo’s compatibility extension for Magento 1 and PHP 7 http://inchoo.net/magento/its-alive/ http://inchoo.net/magento/its-alive/#comments Fri, 11 Dec 2015 11:28:23 +0000 http://inchoo.net/?p=25354 As promised,  we prepared something that will spice up your holidays better than Christmas decorations and mulled wine. In this article you can find our open-source compatibility extension for Magento and PHP 7 (yes, you read that right!) as well as some of the experiences and performance tests. We, at Inchoo, already have a few...

The post Inchoo’s compatibility extension for Magento 1 and PHP 7 appeared first on Inchoo.

]]>
As promised,  we prepared something that will spice up your holidays better than Christmas decorations and mulled wine. In this article you can find our open-source compatibility extension for Magento and PHP 7 (yes, you read that right!) as well as some of the experiences and performance tests.

We, at Inchoo, already have a few Magento 1 projects running fine on development servers with PHP 7. It’s alive, we say!

And quite lively, actually.

Despite the official status, Magento 1 loves working on a server with PHP 7. And we love PHP 7. Lots of love and liveliness everywhere, but most is already said here: http://inchoo.net/magento/php-7-and-magento-a-quick-overview/

Show us the code!

So, how hard is it to patch Magento 1 to work on PHP 7? Very easy. Just install the Inchoo_PHP7 extension, and enjoy!

https://github.com/Inchoo/Inchoo_PHP7

Yeah, you’ve patched the core, but the night is long and community and local folders are full of horrors!”, you say, with a sneer of someone who has seen many winters. Yes, sure, but here is something more for your pains:

->\$.+\[.+\]\(.*\)

This beautiful, readable piece of regex, ran against community and local folders will find a class of problematic code, which no longer works in PHP 7. If none found, your project is (probably) PHP 7 ready! Hooray!

Obligatory number crunching

Values in all tables are milliseconds to first byte. Cache, when turned on, was default core M CE cache. All other items in software stack (MySQL, Apache) were same.

Big (>70 extensions, thousands of products) M CE 1.9.1.0 project, with all patches applied

cached category, filtered home page
PHP 5.6 800 320
PHP 7.0 420 120
uncached category, filtered home page
PHP 5.6 6200 7300
PHP 7.0 3450 3400

Small (~10 extensions, tens of products) M CE 1.9.2.2 project

cached category, filtered checkout/cart
PHP 5.6 165 180
PHP 7.0 80 105
uncached category, filtered checkout/cart
PHP 5.6 310 360
PHP 7.0 100 200

Thanks to Marin Grizelj for crunching the numbers, which speak for themselves. Speedup was 2-3 times just from switching to PHP 7. And, we were comparing it with PHP 5.6, while many projects in the wild are still on 5.5 or even 5.4. (Mind you, compatibility fixes you need to do on older Magento 1 versions to make it work with 5.6, will also bring you a good deal closer to compatibility with 7.0).

Enough technobabble. It is alive and lively! Let it run into the wild, and scare the village folk!

The post Inchoo’s compatibility extension for Magento 1 and PHP 7 appeared first on Inchoo.

]]>
http://inchoo.net/magento/its-alive/feed/ 19
PHP 7 and Magento – a quick overview http://inchoo.net/magento/php-7-and-magento-a-quick-overview/ http://inchoo.net/magento/php-7-and-magento-a-quick-overview/#comments Thu, 10 Dec 2015 12:26:38 +0000 http://inchoo.net/?p=25323 There is “this language” which runs more than 50% of the Internet. Some say over 80, and who knows what is the most accurate data anyway. Given the fact that the language we’re talking about runs WordPress, Drupal, Magento and alike, it’s not hard to believe there’s a major hype around the newest edition. PHP...

The post PHP 7 and Magento – a quick overview appeared first on Inchoo.

]]>
There is “this language” which runs more than 50% of the Internet. Some say over 80, and who knows what is the most accurate data anyway. Given the fact that the language we’re talking about runs WordPress, Drupal, Magento and alike, it’s not hard to believe there’s a major hype around the newest edition.

PHP 7 is here and it’s more than popular – for a reason!

Most popular web language recently got a makeover. A complete one. After PHP 5.6, we are now looking at PHP 7 which stands for a revolution in the way we deliver applications that power everything, from websites to cloud.

You might wonder what happened to the inbetween version. Yes, guys at Zend are quite aware there is a number between 5 and 7. The thing is – there was a PHP 6 in the past, but only as an experimental project. The version never reached the production phase. So, to prevent users from mixing up the former attempt with the latest release, the new major edition runs under the name PHP 7.

(Also, it is said that 7 is a lucky number – both in Chinese culture and the Western world, and who wouldn’t want some luck in their life?)

To explain the importance of PHP 7 for Magento, we asked one of our developers, Ivan Curdinjakovic, for his opinion regarding the release. Here’s what he noted:

Magento 1 is not officially compatible with PHP 7, but it’s easy enough to patch it, and well worth it. PHP 7 constantly gives double the performance of PHP 5.6, with all other things (MySQL, OpCache setup, hardware, etc.) being the same.

If you make a calculation of the exact hardware upgrade you would need to get that kind of performance with PHP 5.6 on any specific store, and the cost of it, you’ll get a healthy appreciation of the kind of upgrade PHP 7 is on any project.

What’s more important, PHP 7 improves performance everywhere, including the worst case scenarios, while other technologies, like caches (Varnish, Redis, etc.) improve only the best case scenario. And it works on a completely different level, so you can combine all of that to get a really, really fast Magento 1 store.

ninja_novi-09

But performance is not all there is to PHP 7. There are also some very interesting new features. My personal favorites are much improved input type hints and return type declarations, as well as the null coalesce operator. They help preventing a whole class of bugs and security holes, as well as making code more self-documenting.

While these new features in PHP 7 are not used even in Magento 2 core, nor in 3rd party extensions, because they need to keep compatibility with PHP 5.5 & 5.6, we, as a custom solutions provider, are in a different position. If we know our client’s project is on a PHP 7 server, we can unleash all these goodies in our custom code. Ah, it’s a good life working at Inchoo.”

To sum it all up, PHP 7 comes with long awaited advantages our developers are enjoying working with. From the significant performance improvement, handling fatal and catchable errors, to accurate type declarations and null coalescing operators.

Now, since the holiday season already started, we got something coming up this Friday – make sure to stay tuned. Inchoo prepared something that will spice up your holidays and working with PHP 7 and Magento better than Christmas decorations and mulled wine.

In the meantime, what are your thoughts and comments on PHP 7? We’d like to know so don’t hesitate to share. :)

The post PHP 7 and Magento – a quick overview appeared first on Inchoo.

]]>
http://inchoo.net/magento/php-7-and-magento-a-quick-overview/feed/ 1
Snowflakes Magento Extension http://inchoo.net/magento/snowflakes-magento-extension/ http://inchoo.net/magento/snowflakes-magento-extension/#comments Wed, 02 Dec 2015 11:20:22 +0000 http://inchoo.net/?p=11925 Back by popular demand – it’s Inchoo Snowflakes Magento extension! Revamped to behave nicely with responsive layouts, this extension will give your store a real holiday cheer, and bring smiles to your customers’ faces. Step by step installation and customization guide included. This extension was brought to you originally back in December 2011 and we’ve seen...

The post Snowflakes Magento Extension appeared first on Inchoo.

]]>
Back by popular demand – it’s Inchoo Snowflakes Magento extension! Revamped to behave nicely with responsive layouts, this extension will give your store a real holiday cheer, and bring smiles to your customers’ faces. Step by step installation and customization guide included.

This extension was brought to you originally back in December 2011 and we’ve seen plenty of stores using it. It was about time to make a full revamp, clean the code a bit and optimize it for new, responsive layouts most of you are proud to feature on your stores, right?

We decided to let you choose among many options – number, size, speed, color (just put in the hex code or even better – type the color name) and shape.

Hey, you can even put in a text to be displayed and act as snowflakes – so, you could have a store that’s literally raining “men” 😉

Installation

Step 1:
Simply download InchooSnowflakes.zip and extract files in your root folder.
If you are using a custom theme, copy the files in the appropriate theme folders.

Step 2:
Refresh your homepage. Log out of admin and log back in.

Step 3:
Enable Inchoo Snowflakes module in Admin (System -> Configuration -> Inchoo Snowflakes),
Select “Yes” in the dropdown menu to enable the extension.

Step 4:
Reload cache and let it snow! 😉

Customize

A quick handy guide to customizing the look and feel of your snowflakes:

  • Number – recommended 25 – 75 (too many snowflakes can slow down your site)
  • Color – edit color with Hex code or color name
  • Speed – recommended 1-5
  • Size – define minimum and maximum size
  • Symbol – ❄ ❅ ❆ – or put in any text you wish

Additional customizations
In xml file you can redefine where you want the snowflakes to appear.
Change handler etc. if you want them to show only on your homepage.

Path:

app/design/frontend/base/default/layout/inchoo/snowflakes/layout.xml

(or your theme folder).

Replace:

<default> ... </default>

with:

<cms_index_index> ... </cms_index_index>

Demo

Here is our demo page with snowflakes,
and Magento Demo shop – http://demo.inchoo4u.net/ (online only this month).

Screenshots

Configuration preview (Admin -> System -> Configuration -> Inchoo Snowflakes):
InchooSnowflakes1

Homepage Madison Island – desktop preview:
InchooSnowflakes2

Homepage Madison Island – smartphone preview:
InchooSnowflakes3

Download

Download the zip file here.

Compatibility

The extension has been tested on CE 1.9.x.x and backwards to 1.7.x versions and should work on older ones as well (no jQuery, strict by-the-book Magento work with Prototype) :)

But, as always – test it out on your development environment before pushing it to production – you know the drill.

Sharing is caring

Now that you’ve installed the extension, share some screenshots of what you played around with, I’m sure you’ll be very creative :)

Happy holidays everyone!
Let It Snow! Let It Snow! Let It Snow! 😉

The post Snowflakes Magento Extension appeared first on Inchoo.

]]>
http://inchoo.net/magento/snowflakes-magento-extension/feed/ 44
How incremental design changes can bring you more revenue? http://inchoo.net/ecommerce/incremental-design-changes-and-revenue/ http://inchoo.net/ecommerce/incremental-design-changes-and-revenue/#respond Wed, 21 Oct 2015 12:00:26 +0000 http://inchoo.net/?p=25060 In eCommerce business there’s always room for design improvements, but when you decide it’s time for change, what strategy to choose? Most businesses would choose traditional full redesign strategy of switching over to completely new design. Full Redesign Full redesign strategy usually looks like this: Your website is starting to look dated and you believe...

The post How incremental design changes can bring you more revenue? appeared first on Inchoo.

]]>
In eCommerce business there’s always room for design improvements, but when you decide it’s time for change, what strategy to choose?

Most businesses would choose traditional full redesign strategy of switching over to completely new design.

Full Redesign

full redesign

Full redesign strategy usually looks like this: Your website is starting to look dated and you believe that new modern design will attract new customers, so you hire an agency with many fancy designs in their portfolio. After a few months of planning, sketching, wireframing, designing and development, new design is launched and after that everyone goes back to business until the next big redesign.

This is how most businesses do it, but there are some common pitfalls in this strategy.

If you change your design drastically you don’t know how users are going to react.
Your loyal users hate changes, and it’s completely logical, they are loyal because they like things just the way they are. They invested a lot of time mastering your design and if you change it drastically they are in the same position as new users.

Probably the best examples are Facebook and Twitter redesigns. After each redesign millions of users are frustrated and they tend to create groups and petitions against new design. They are following the “if it ain’t broke, don’t fix it” principle.

Another negative impact of this strategy is a risk of losing domain authority and SEO rankings. Only a few mistakes can lead to a complete SEO disaster and drop-offs in traffic and revenue.

Expense is also one of disadvantages. Full redesign demands a large investment because the site is rebuilt from scratch. The previous design is usually thrown away and you have to invest again.

Even though we know redesign is risky and users don’t like changes, there’s always room for design improvements, so how do we strike that balance between users desire to stick with familiar user interface and our ambition for design improvements?

Incremental Design Changes

incremental design changes

What is incremental change? Dictionary says: “Incremental describes regular, measurable movements that are usually small.”

As we can see the keywords are regular, measurable and small. In contrast to the full redesign, incremental redesign is a streamlined process that involves continuous improvements based on data driven decisions. Changes are smaller and new ideas are presented gradually.
It doesn’t involve a total overhaul of a web store, rather just a single page or page section.

This strategy minimizes risk by changing only elements that improve results. And how do we know which elements should we change to improve results? Very easily, by doing A/B tests.

What is A/B testing (split testing)?

a/b testing

A/B testing (or split testing) allows us to test design choices on real users which makes final decisions easy to make because we can ensure that every change produces positive results.

How does incremental redesign works?

1. Decide what to test
Use Analytics to identify a specific page or feature that are not driving sufficient conversions.

2. Pick an element and design a B version
Results of analysis will indicate areas in need of improvement and the next step is to design a B version of that area.

3. Test B version against the original and measure results
There are several online tools that allow you to run A/B tests, for example Visual Website Optimizer or Optimizely. Integrate split testing software in your webstore and see which version produces better conversion rate.

4. Analyze data, choose winner and implement it
Compare results of each version and choose a winner. For example, if red button drives 10% more clicks than blue button, it will be easy to make decision to change that element.

5. Repeat all steps for different element

Full redesign or Incremental design changes?

To sum up, incremental redesign strategy is more efficient because it maximizes ROI, minimizes risk and improves your web store continually.

Of course It’s perfectly fine to refresh the entire design from the ground up if there’s good reason to do so.

At Inchoo we detect that with technical, SEO and usability audits. If there are too many issues to fix, it is more efficient to create everything from scratch and then continue improving web store with incremental design changes.

The post How incremental design changes can bring you more revenue? appeared first on Inchoo.

]]>
http://inchoo.net/ecommerce/incremental-design-changes-and-revenue/feed/ 0
Meet Magento Spain features an Inchooer talking about Magento 2 Javascript workflow http://inchoo.net/magento/meet-magento-spain-features-an-inchooer-talking-about-magento-2-javascript-workflow/ http://inchoo.net/magento/meet-magento-spain-features-an-inchooer-talking-about-magento-2-javascript-workflow/#respond Tue, 06 Oct 2015 12:54:05 +0000 http://inchoo.net/?p=25024 Last Meet Magento which will host an Inchooer is Meet Magento Spain. Curious about what will be the topic Filip Svetličić will talk about, we decided to dig into what you can expect. If you happen to wonder why you should visit Madrid and be at Meet Magento, changes in Magento 2 Javascript workflow should...

The post Meet Magento Spain features an Inchooer talking about Magento 2 Javascript workflow appeared first on Inchoo.

]]>
Last Meet Magento which will host an Inchooer is Meet Magento Spain. Curious about what will be the topic Filip Svetličić will talk about, we decided to dig into what you can expect. If you happen to wonder why you should visit Madrid and be at Meet Magento, changes in Magento 2 Javascript workflow should be one of them. 

For starters, Filip, tell us something about yourself. What do you do at Inchoo, and what do you do outside of work? How did you end up applying for Spain?

Filip: At Inchoo I’m mostly doing frontend development and project management. I’m a senior frontend developer working with Magento for about 6 years now. Besides my regular work assignments I love to compose electronic music and to draw. In short, that’s something that defines me. Nowadays, I mostly enjoy spending time with my son Sven. I wanted to present at Meet Magento and Madrid was one of the places available on the schedule. It’s a beautiful city, so why not try my luck there. :)

What will be your topic and what will you cover?

Filip: My topic will be Magento 2 Javascript improved workflow. Magento 2 introduced a complete new way of how javascript workflow is organized and all that  with strong aim for a better performance. There are new ways of interacting with javascript components and I will try to cover the differences comparing it with the current system. I will mainly focus on things like javascript resources configuration (require.js), initialization, using custom javascript and interacting with magento widgets (accordion, tabs etc.).

How much time you have to present it – is it enough, what would be the ideal person listening to you talk?

Filip: Half ‘n hour is hopefully enough. I won’t go into details much, I will mainly focus on covering all the important changes and how the changes will affect our current workflow. Presentation is mainly oriented towards Magento frontend developers currently doing bunch of Magento projects, and that’s also the required prerequisite at the same time. But all attendees are welcome, of course.

So far, you’ve been a lecturer on a few of the local events. Do you feel any different preparing for Meet Magento?

Filip: Of course I feel different, it’s far more challenging. You need to prepare everything in English which makes the overall process a bit more trickier. I don’t have much experience talking in English in front of the audience so I expect to gain a lot from this one. :)

Where can people find out more about what you’ll be talking about?

Filip: I’m mainly tracing Magento 2 on my own while following their well written documentation.

Talking with Filip got us curious about the changes Magento 2 will bring when it comes to Javascript workflow. Sure, many have already heard that there will be changes, but who can name them? Meet Magento Spain is the perfect opportunity to hear all about it and get the knowledge first hand. We hope to see you there!

The post Meet Magento Spain features an Inchooer talking about Magento 2 Javascript workflow appeared first on Inchoo.

]]>
http://inchoo.net/magento/meet-magento-spain-features-an-inchooer-talking-about-magento-2-javascript-workflow/feed/ 0
Meet Magento Poland – Inchooers giving insights on Magento Solution Partner Program http://inchoo.net/ecommerce/meet-magento-poland-inchooers-giving-insights-on-magento-solution-partner-program/ http://inchoo.net/ecommerce/meet-magento-poland-inchooers-giving-insights-on-magento-solution-partner-program/#respond Tue, 29 Sep 2015 12:05:37 +0000 http://inchoo.net/?p=24980 Meet Magento Poland will be hosting four Inchooers. Some of them, as Inchooers can be, are keen to share their knowledge and insights regarding various Magento topics. This time around, event will host Aron Stanić talking about Magento Solution Partner Program and everything that comes with it. Aron, tell us something about yourself. What do...

The post Meet Magento Poland – Inchooers giving insights on Magento Solution Partner Program appeared first on Inchoo.

]]>
Meet Magento Poland will be hosting four Inchooers. Some of them, as Inchooers can be, are keen to share their knowledge and insights regarding various Magento topics. This time around, event will host Aron Stanić talking about Magento Solution Partner Program and everything that comes with it.

Aron, tell us something about yourself. What do you do at Inchoo, and what do you do outside of work? How did you end up applying for Poland?

Aron: Hi there :) At Inchoo I’m leading our sales team, trying to ensure our consultants, designers and developers are not getting bored but have some interesting projects to work on. You can also see me write an occasional blog post here and there.

Outside of work I’m a husband and a father of two amazing kids and – well, that’s it as much as “free time” goes as you can imagine, at least for now, right? :)

I decided to apply for MMPL because I had an interesting topic to share and, since I was already a speaker at last year’s Meet Magento Netherlands and attended a couple of Imagine conferences, I got to experience the real vibe around Magento community – so, you can say I kind of got hooked.

What will be your topic and what will you cover?

Aron: My topic will revolve around Magento’s Solution Partner program and our experiences from being a part of it for 5 years now. There are some really good things about it, but there is also a great deal of improvement possibilities, especially with the rollout of Magento 2. So, I will share my thoughts on things that are currently working well and some of those that we’d like to see changed, for the benefit of everyone involved (Magento, partners and merchants alike).

Aron_talk

How much time you have to present it and what would be the ideal person listening to you talk? What kind of knowledge is necessary to have for starters?

Aron: I have a 30 minutes slot in the agenda – I see it’s just after lunch break, so I believe the people will be refreshed and ready to participate. The ideal persons would be fellow Magento partner companies and those who are looking to become one, and any merchants attending will also find some really useful insights into how Magento and its partner companies work together and what kind of value they can get from working with an official partner. What will they need before the presentation? Open minds and clear hearts. :) The topic will be easy to digest.

If somebody wants to know more about the topic before the presentation itself, where can they learn more? How should they prepare?

Aron: Not much preparation is needed, but if they want to, they can explore the partnership programs Magento has in place at http://magento.com/partners/overview and check out the lists of various partners per type and country at http://partners.magento.com/partner_locator/search.aspx

Since you are an experienced lecturer, how do you feel preparing for Poland? Are you still excited and or nervous the same? How much do you teach and much do you learn as a lecturer?

Aron: Excited – of course. Nervous – it depends on how much time I have to prepare well for any presentation. This time I’m also looking to get some help from our fellow Solution Partners in the preparation so it will be a good way to strengthen some ties even before the event.

Usually in any presentation, speech or workshop you prepare, there’s much more learning than teaching involved, as you have to really be on top of your game, so preparation is everything. But I enjoy the most those moments after the presentation when you get to discuss it with some of the audience members – that’s when real sharing happens and new friendships are made :)

What would be your main message for everyone coming to Poland for MM?

Aron: Enjoy the ride! This event, from what I was able to see so far, will be filled with interesting content – you’ll have a standard set of presentations, a number of workshops (which is a new thing, and workshops are a great way to start a conversation on any topic), there’s even a competition in place for the best and brightest of Magento in Poland (sites, modules etc.) – and of course, a Hackathon as well.

But, I would like to also bring attention to store owners who are attending that we have prepared something special for them – free eCommerce SEO consultations by our consulting team. You can learn more about it at the link above and sign up directly here to be one of the companies we will provide with useful insights and recommendations to improve their business.

See you in the front row of Arons talk or on free eCommerce SEO consultations we’ll be hosting!

The post Meet Magento Poland – Inchooers giving insights on Magento Solution Partner Program appeared first on Inchoo.

]]>
http://inchoo.net/ecommerce/meet-magento-poland-inchooers-giving-insights-on-magento-solution-partner-program/feed/ 0
Developers Paradise 2016 – hosted by Inchoo http://inchoo.net/magento/developers-paradise-2016-hosted-by-inchoo/ http://inchoo.net/magento/developers-paradise-2016-hosted-by-inchoo/#respond Mon, 28 Sep 2015 12:00:49 +0000 http://inchoo.net/?p=24959 Newest edition of Developers Paradise will be held at Opatija, from 25th to 28th April of 2016, and it will be organized and hosted by, yours truly, Inchoo. Several months ago – preparations started. We wanted to prepare ourselves for the process which was yet to start and, at this very moment, ongoing process of...

The post Developers Paradise 2016 – hosted by Inchoo appeared first on Inchoo.

]]>
Newest edition of Developers Paradise will be held at Opatija, from 25th to 28th April of 2016, and it will be organized and hosted by, yours truly, Inchoo.

Several months ago – preparations started.

We wanted to prepare ourselves for the process which was yet to start and, at this very moment, ongoing process of organizing the newest “event of the season”, Developers Paradise 2016.

When we say “event of the season”, we mean going back to the roots. Original moto of Developers Paradise is “lots of code and fun in the sun” and since there was no summer edition of Developers Paradise for two years, we wanted it to be a real summer kick off.

marina in Opatija. Croatia.

That’s why the upcoming Developers Paradise is organised in the beautiful Grand hotel “4 Opatija Flowers” in the late spring of 2016. A real callout for the summer will last for 4 days, from 25th to 28th of April 2016 and is set out to bring you latest Magento 2 news.

Hotel, located in Opatija, is expected to host 150 attendees from all around the Magento globe. We expect students and teachers in the form of developers, consultants and managers from Magento themselves, a lot of partner companies or some looking to become a more involved part of a great community we all share. All of them eager to share and gain knowledge.

Hotel_view

You can expect not only development topics but also lots of free time activities which will fill out your schedule and create lifelong memories.

Want to know more? Make sure you stay tuned! Check out official Developers Paradise Tickets and FAQ page to learn more on pricing, booking and venue.

We are looking forward to hosting you – make sure to book the dates and see you in Croatia!

The post Developers Paradise 2016 – hosted by Inchoo appeared first on Inchoo.

]]>
http://inchoo.net/magento/developers-paradise-2016-hosted-by-inchoo/feed/ 0
Free eCommerce SEO consultations by Inchoo at Meet Magento Poland http://inchoo.net/ecommerce/free-ecommerce-seo-consultations-by-inchoo-at-meet-magento-poland/ http://inchoo.net/ecommerce/free-ecommerce-seo-consultations-by-inchoo-at-meet-magento-poland/#respond Wed, 23 Sep 2015 12:18:59 +0000 http://inchoo.net/?p=24910 Clear up your busy schedules and make 19th and 20th of October all about attending Meet Magento Poland which will take place in Concordia Design conference center in Poznan. We are definitely not going to miss the opportunity to meet all of you and share each other’s experiences and knowledge about eCommerce. And we have...

The post Free eCommerce SEO consultations by Inchoo at Meet Magento Poland appeared first on Inchoo.

]]>
Clear up your busy schedules and make 19th and 20th of October all about attending Meet Magento Poland which will take place in Concordia Design conference center in Poznan.

We are definitely not going to miss the opportunity to meet all of you and share each other’s experiences and knowledge about eCommerce.

And we have prepared something special for some of you who will be attending.

Since the beginning of Magento, we have been helping our clients from all over the world to design, build and improve their Magento stores. Within our consulting services, one thing stands out – it is our Magento SEO Audit in which we do our best to give clients valuable information about the state of their Magento stores.

While juggling with numerous everyday business activities, one can easily forget to take care of super important things like SEO and usability. You shouldn’t risk missing large amount of traffic, customers and sales due to improper SEO setup and usability issues on your site.

So we decided to give you a hand by offering free, 20 minute eCommerce SEO consultation sessions at the Poznan event.

NOTE: We’ve filled all available slots for free consultations at MMPL – looking forward to talk with you in Poznan.

To prepare for the consultations, we will ask you for some basic details upfront, do a basic checkup and quick analysis as our homework before coming to Poland, and invite you for a cup of coffee with our eCommerce experts where you’ll get useful, free advice on:

  • how to improve your store’s search engine rankings
  • how to bring your site closer to usability best practices

So, if you are:

  1. coming to Meet Magento Poland in Poznan this October
  2. operating a Magento online store
  3. looking to sort out some issues or simply learn how to improve your SEO

Take the first step in bringing your store to the next level by filling out this short form.

And hurry up – only the first 8 applicants will be the lucky ones and get free consultations.

See you soon in Poznan!

The post Free eCommerce SEO consultations by Inchoo at Meet Magento Poland appeared first on Inchoo.

]]>
http://inchoo.net/ecommerce/free-ecommerce-seo-consultations-by-inchoo-at-meet-magento-poland/feed/ 0
Meet Magento Greece – Inchooers on building faster Magento stores http://inchoo.net/magento/meet-magento-greece-inchooers-on-building-faster-magento-stores/ http://inchoo.net/magento/meet-magento-greece-inchooers-on-building-faster-magento-stores/#respond Tue, 22 Sep 2015 11:32:04 +0000 http://inchoo.net/?p=24907 Our Hrvoje Jurišić successfully added another flag on our Meet Magento map. We found out what will he talk about while representing Inchoo colours at Meet Magento Greece. For starters, Hrvoje, tell us something about yourself. What do you do at Inchoo, and what do you do outside of work? How did you end up...

The post Meet Magento Greece – Inchooers on building faster Magento stores appeared first on Inchoo.

]]>
Our Hrvoje Jurišić successfully added another flag on our Meet Magento map. We found out what will he talk about while representing Inchoo colours at Meet Magento Greece.

For starters, Hrvoje, tell us something about yourself. What do you do at Inchoo, and what do you do outside of work? How did you end up applying for Greece?

Hrvoje: I am a frontend developer, team leader and project manager… At Inchoo, my team and I work closely with the merchants, helping them build stores that sell more.

As a big comic strips fan, I mostly spend my free time reading comics and filling the gaps in my collection.

Greece is a beautiful country, and there is a Meet Magento conference there, so why not apply? :)

What will be your topic and what will you cover?

Hrvoje: My talk at Meet Magento GR will cover the topic of Frontend speed optimisation. Most of the Responsive Websites made today are not performing well, especially on mobile devices. The problem is so big that even RWD has earned a stigma of “not being good for perfomance”.

To be able to build a performant RWD store, developer needs to understand why is that important in the first place. But also the people who are investing in the web stores and approving budgets, because at the end of the day, if website is slow, you will lose money.

How much time you have to present it – is it enough, what would be the ideal person listening to you talk? What kind of knowledge is necessary to have for starters?

Hrvoje: Speaking slots are 30 minutes long, and it is more than enough time to send the message and the emotion to the audience. My talk is, in fact, for everyone in the business who want to sell online or develop online stores.

I won’t give out any useful links (for now). I’d like you to be there and learn on spot with the rest of the community. It’s a great way to fill in the gaps – and network! :)

ny_04

Is this your first experience of that kind (being a lecturer) and how do you feel? What do you expect to teach and to learn?

Hrvoje: I am really happy that I’ll have a chance to attend MM in Athens. I already gave several talks on conferences worldwide in the past,  and I am always a bit nervous before I go on stage. But as soon as I’m there, it’s all gone.

One thing I enjoy the most on Meet Magento conferences is meeting new people, who all share at least one common thing: making a living in Magento ecosystem.

What would be your main message for everyone coming to Greece for MM?

Hrvoje: My main message for all good folks at MM Greece listening to my speech is to think about the end user.  Respect the customer. If you do that, you will build usable, fast and beautiful designed stores.

What could be better than that to have a guarantee of both learning and quality time?

See you at Meet Magento Greece!

The post Meet Magento Greece – Inchooers on building faster Magento stores appeared first on Inchoo.

]]>
http://inchoo.net/magento/meet-magento-greece-inchooers-on-building-faster-magento-stores/feed/ 0
Adding static blocks to specific CMS pages with Magento layouts http://inchoo.net/magento/adding-static-blocks-to-specific-cms-pages-with-magento-layouts/ http://inchoo.net/magento/adding-static-blocks-to-specific-cms-pages-with-magento-layouts/#comments Wed, 16 Sep 2015 12:04:12 +0000 http://inchoo.net/?p=24861 While working on a project, I had to add a unique static block between header and main content of the CMS page on each CMS page. Element had to be fully customizable via Magento admin panel and it had to be easy to create on new CMS pages, easily modifiable and removable. Since that element needed to...

The post Adding static blocks to specific CMS pages with Magento layouts appeared first on Inchoo.

]]>
While working on a project, I had to add a unique static block between header and main content of the CMS page on each CMS page. Element had to be fully customizable via Magento admin panel and it had to be easy to create on new CMS pages, easily modifiable and removable. Since that element needed to be placed outside of the main content, it couldn’t have been added using CMS in Magento admin. It had to be added using Magento layouts. Here’s how I achieved that.

As you may know, Magento only offers the following handles for CMS pages:

  • Homepage handle and 404-page handle
  • A handle for all CMS pages

If a CMS block had to be shown on the homepage, we would use the homepage handle in our local.xml file. In the same way, if the same static block had to be shown on all CMS pages, we would have used a handle for all CMS pages.

But what about individual user-created CMS pages?

Frontend developer’s solution

Luckily, Magento enables us to define a custom layout for every CMS page by editing it from CMS editor on the Magento admin panel. That way, layout for a CMS page is modified using defined values for that specific page which are stored in the database.

First, we will create a static block that we want to add to a specific CMS page which we’ll name static-block-1 and apply some simple styles to it.

<div class=”element-blue”>
        <h3>Static Block 1</h3>
        <p>This is blue static element 1 </p>
</div>

Next, we will create a new CMS page that will contain the created static block which will be added through Layout Update XML on Designs tab, along with a header and one paragraph. For this example, we’ll use 1 column layout for all CMS pages.

<reference name="root">
        <block type="cms/block" name="myelement">
            <action method="setBlockId"><block_id>static-block-1</block_id></action>
        </block>
</reference>

And finally, we have to update our template files and add a line of code which calls our element. Since we used 1 column layout for all CMS pages and we will modify 1column.phtml template file. If you want to add the elements to CMS pages that use some other template (like 2columns-left), you need to modify those files. 

<div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <?php echo $this->getChildHtml('myelement') ?>
…

For this example, I’ve made one additional static block that is different than the first one and two additional CMS pages – one for the new element I’ve created and another one that won’t have any layout updates and because of that, It won’t contain any of the elements that we’ve created.

Results

CMS page 1 with blue static block:

CMS page 1

HTML code of CMS page 1:

01-code-1

CMS page 2 with green static block:

02-cms-2

HTML code of CMS page 2:

02-code-2

CMS page 3 for which we didn’t set any layout updates in its XML and therefore it doesn’t show any created static blocks.

03-cms-3

HTML code of the CMS page 3:

03-code-3

The good and the bad and the alternative

Although this is a really quick and simple solution that works well, it becomes tedious when you have to go through these same steps for every element that you want to add, even on a project that had 6 or 7 CMS pages.

If you want a more backend-oriented solution for this, Tim Reynolds, Magento Certified Developer, wrote an article on a topic of adding widgets to specific CMS pages in which he used event observers to generate unique handles for each CMS page.

So, how do you like this approach? Feel free to share your solutions in the comment section.

The post Adding static blocks to specific CMS pages with Magento layouts appeared first on Inchoo.

]]>
http://inchoo.net/magento/adding-static-blocks-to-specific-cms-pages-with-magento-layouts/feed/ 6
Meet Magento Romania – a place to learn from an Inchooer talking redesign http://inchoo.net/magento/meet-magento-romania-a-place-to-learn-from-an-inchooer-talking-redesign/ http://inchoo.net/magento/meet-magento-romania-a-place-to-learn-from-an-inchooer-talking-redesign/#respond Tue, 15 Sep 2015 12:10:45 +0000 http://inchoo.net/?p=24884 Now when the season of Meet Magentos is open, we have another Inchooer packing his bags and getting ready for the upcoming conference. Marko Briševac is travelling to Romania October 2 – 3 to further discuss his topic: “eCommerce Website Redesign Strategy – Incremental Changes or Full Redesign?” Find out what can you expect on...

The post Meet Magento Romania – a place to learn from an Inchooer talking redesign appeared first on Inchoo.

]]>
Now when the season of Meet Magentos is open, we have another Inchooer packing his bags and getting ready for the upcoming conference. Marko Briševac is travelling to Romania October 2 – 3 to further discuss his topic: “eCommerce Website Redesign Strategy – Incremental Changes or Full Redesign?” Find out what can you expect on Meet Magento Romania!

For starters, Marko, tell us something about yourself. What do you do at Inchoo, and what do you do outside of work? How did you end up applying for Romania?

Marko: I started my design career while I was in high school around 10 years ago. In the meantime I worked as a freelance designer for a few years, ran a small web design business for almost 5 years and joined Inchoo year and a half ago (oh, and gained degree in Financial Management but that’s not important for this story…)

At Inchoo I’m in charge of the design process from the mockup stage to the final design. My regular tools of trade are:  Photoshop, Sketch, InVision, Dropbox and Slack.

Outside of work I’m a father of a 2-year-old girl, I enjoy travelling, trying out craft beer and local gastronomy.

I applied for Romania because I have never been there and it’s also a great chance to meet people from Magento community because I’m a first-time attendee.

What will be your topic and what will you cover?

Marko: I will be talking about “eCommerce Website Redesign Strategy – Incremental Changes or Full Redesign?”

We’ll see why users don’t like changes and how do we strike that perfect balance between their desire to stick with what they are comfortable with and advanced design.

How much time will you have to present it? What kind of knowledge is necessary to be able to keep up?

Marko: My talking time will be 30 minutes. I will talk fast so it will be more than enough. :)

Who is this presentation for? Merchants, Designers, Marketers…everyone involved in redesign process, even frontend and backend developers.

If somebody would like to dig deep and find out more regarding redesign strategies before the lecture, they can refer to Kissmetrics or Nielsen Norman Group, there are some great redesign articles there.

Is this your first experience of that kind (being a lecturer) and how do you feel?

Marko: I was giving this talk at OMGcommerce in Zagreb this year so it isn’t the first time, but I’m definitely very excited.

I would also like to hear some first hand experiences from others on this topic. Many designers have a lot experience with redesigns and I’m always ready to learn from other people.

What would be your main message for everyone coming to Romania for Meet Magento?

Marko: If you want to know which strategy to choose for your next web store redesign, see you in Main Conference Room on October 2nd at 12:30.

We gave you a sneak peak, now it’s up to you to join the rest of the Meet Magento Romania crew and hear Marko talk – live. :)

The post Meet Magento Romania – a place to learn from an Inchooer talking redesign appeared first on Inchoo.

]]>
http://inchoo.net/magento/meet-magento-romania-a-place-to-learn-from-an-inchooer-talking-redesign/feed/ 0
Creating a Magento theme from scratch http://inchoo.net/magento/creating-a-new-magento-theme/ http://inchoo.net/magento/creating-a-new-magento-theme/#comments Thu, 10 Sep 2015 11:25:05 +0000 http://inchoo.net/?p=24838 Powerful fallback system, organized folder structure and tons of functionality is what makes Magento one of the most flexible and powerful eCommerce platforms out there. By default, Magento offers a lot, but as eCommerce evolved during the years, there is always additional work required to fit client needs. Probably the first thing you will do when...

The post Creating a Magento theme from scratch appeared first on Inchoo.

]]>
Powerful fallback system, organized folder structure and tons of functionality is what makes Magento one of the most flexible and powerful eCommerce platforms out there. By default, Magento offers a lot, but as eCommerce evolved during the years, there is always additional work required to fit client needs.

Probably the first thing you will do when starting a new Magento project will be to create a Magento theme that will have custom styling and functionality. Although creating a Magento theme is a pretty simple thing to do (just ask any certified frontend developer), by not following Magento recommendations and rules you can easily make your life a bit complicated.

So, how to do it properly? Read on…

If you are new to Magento, be sure to read Magento Designer’s Guide, where the Magento design terminology is explained in a PDF document.

Magento Theme fundamentals

Magento themes are placed in design packages. Each package can have multiple themes.

When You install Magento, there are 3 packages available:

1-creating-magento-theme

In Base package, there is a “Default” Magento theme with all the files necessary for Magento to work properly. You should NEVER delete or edit files in “Base” package. I will explain why later.

Default package is legacy from < 1.4CE where it was the original base package. This package can be found only in CE edition of Magento, not in EE. You can safely remove that package from your installation. However, it may be restored during a Magento upgrade.

RWD is a new package which holds a new responsive Magento theme.

Magento has two main folders which correspond with each other:
“app” directory contains files that control how page templates are rendered.
“skin” directory contains files that control the site’s appearance.

  • Template files
    app/design/frontend/package/theme

2-creating-magento-theme

Layout folder contains XML files which are used to define and control structural and content blocks of your theme.

Template folder contains .phtml files – they hold the markup for each Magento blocks that are being displayed in the frontend.

  • Skin files
    app/skin/frontend/package/theme

3-creating-magento-theme

Skin folder contains all of your assets such as CSS, images, js, Sass etc.

NOTE: Package and theme names should be the same in both design and skin folders.

For example:
app/design/frontend/MyPackage/MyTheme
app/skin/frontend/MyPackage/MyTheme

Creating your theme

First, you need to create a new design package, in both “design” and “skin” folders.

Let’s call it “MyPackage”.

In your design package, create a new folder which will hold your theme. Let’s call it “MyTheme”.

Create two new folders in your theme folder – “layout” and “template”.

In the skin folder, open your theme folder and create folders – css, js, images.

5-creating-magento-theme    4-creating-magento-theme

Next, you should create “local.xml” and place it in “layout” folder.

That’s all you need!

Working with the theme

Next step would be to tell Magento which package and theme will be used as default.

To do this, go to
system > configuration > design

6-creating-magento-theme

First, we need to tell Magento which package we will use. We are using “MyPackage” design package.

As you can see, we can use assets from multiple themes. Templates can be called from one theme, skin files from another. Yet another cool thing about Magento and its fallback system which will be explained in the next paragraph.

Now, insert your theme name in all fields except “default” field – leave that blank.

Et voilà! Your theme is all set and ready.

You are probably eager to start with theme styling and editing. Since you don’t have any files in your folders, you are probably asking yourself “what now?” Now we will talk about Magento’s fallback system and then you will be ready to start with work. :)

Magento fallback system

The fallback system in Magento is very powerful. It allows you to edit your theme without duplicating unchanged files.

So, how does the fallback system work?

Like any other modern framework, Magento consists of many small blocks which are rendered and combined before they are outputted to one html file which is served to client.

If some of those files are missing, you will probably get a render error and the site will be broken.

Basically, what Magento does is this:

it looks for specific file in your theme folder

  • if found – outputs it
  • if not found, it searches for “default” theme in custom design package
  • if “default” theme exists in a custom package, it searches for the file there
  • if “default” theme does not exist in a custom package or file is not found in “default theme”, it fallbacks to “base” package and searches for file in “default” theme
  • if file is not found, Magento outputs rendering error

For example, when 1column.phtml is required, this is where Magento will look for it:

  1. app/design/frontend/MyPackage/MyTheme/template/page/1column.phtml
  2. app/design/frontend/MyPackage/default/template/page/1column.phtml
  3. app/design/frontend/base/default/template/page/1column.phtml

Now that you know how fallback system works, you understand why you should never edit or delete files in “base” package. If you delete some file by accident, Magento has nowhere to fallback and will generate a rendering error. Also, during a Magento upgrade, “base” package can be overwritten, therefore your changes would be lost.

3 rules to rule them all

To sum up, try to stick with these 3 simple rules and your Magento career will be less painful.

  • You should always create your own Design package and the theme inside it.
  • Duplicate files from base/default but only the ones that will be edited.
  • Your theme should hold only the files that were changed. Magento will fallback and look for the rest of the files in base/default theme.

I hope that article was useful to some of you. If you have any questions, post them in the comments section below.

Thanks for reading. :)

The post Creating a Magento theme from scratch appeared first on Inchoo.

]]>
http://inchoo.net/magento/creating-a-new-magento-theme/feed/ 12
State of Magento Solution Specialist Certification – August 2015 http://inchoo.net/ecommerce/state-of-magento-solution-specialist-certification-august-2015/ http://inchoo.net/ecommerce/state-of-magento-solution-specialist-certification-august-2015/#comments Tue, 01 Sep 2015 12:00:21 +0000 http://inchoo.net/?p=24793 The latest figures on the Magento Certified Solution Specialist certification are in. We are now over 15 months into Magento’s only business-oriented certification program, and I’ve kept track of what’s happening in the world of us Solution Specialists, light-crunching the figures officially available via Magento’s certification directory. This is the fourth quarterly State of Magento Solution Specialist Certification report...

The post State of Magento Solution Specialist Certification – August 2015 appeared first on Inchoo.

]]>
The latest figures on the Magento Certified Solution Specialist certification are in.

We are now over 15 months into Magento’s only business-oriented certification program, and I’ve kept track of what’s happening in the world of us Solution Specialists, light-crunching the figures officially available via Magento’s certification directory.

This is the fourth quarterly State of Magento Solution Specialist Certification report by Inchoo – so make sure to check some of the trends.

United States have picked up the pace since the March 2015 report and they show higher growth figures that most of the EU countries, but Europe still has a firm global lead over North America.

Central and South America are currently the fastest growing continent(s) with 110% growth, but the overall, global growth has slowed down significantly – there were 50% new certificates obtained globally since March 2015 as opposed to 86% new ones in a previously observed period (November 2014 to March 2015).

This may very well be due to the fact that Magento 2 is approaching and some companies and individuals are thinking twice whether to invest in a current certificate or wait for the M2 one.

At the moment of drafting this report, the Magento community (and more importantly, Magento merchants) can count on a nice group of 400 certified solution specialists (well, those that have been publicly listed to be more accurate, and I added a couple I know of myself that don’t have public profiles accessible) coming from the total of 43 countries.

But good news is – you don’t have to visit all these countries looking for the right match – just look around for the nearest Meet Magento – many of these solution specialists will most likely flock to such an event.

Top fives – countries, cities and solution partners

USA has reached a nice round figure of 100 certificates and retains a huge lead in front of EU countries, and it has also marked higher growth than many of its European counterparts.

It has also improved on the global share which has grown from 23% in March 2015 report to 25% at the moment (100/400).

United Kingdom is also growing fast and it now hold a firm second place with Netherlands, Germany and Sweden close behind.

Unfortunately, our home country of Croatia is no longer making the Top 5 :(

TOP 5 COUNTRIES

  1. USA – 100
  2. UK – 51
  3. Netherlands – 30
  4. Germany – 28
  5. Sweden – 25

As for the cities across the globe where you can find a fellow MCSS, Stockholm – one of the Venices of the North – takes over the lead from our hometown of Osijek with 17 total certificates, thanks largely to Vaimo team.

London joins Osijek with 15, and it’s so nice to see how some of these “smaller” cities where Magento Solution Partners are based, are still topping the charts. Groningen (NL) is where MediaCT and Guapa Media are headquartered, while Springfield (US) has a bunch of Classy Llamas calling it home.

New cities about to crash this USA-EU party are Mexico City with 8 and Ahmedabad (India) with 6 – so they deserve to be mentioned, as they might just enter the Top 5 soon.

TOP 5 CITIES

  1. Stockholm, Sweden – 17
  2. London, UK – 15
  3. Osijek, Croatia – 15
  4. Groningen, Netherlands – 11
  5. Springfield, USA – 9

Vaimo continues to grow rapidly, so this time around they have the total of 30 MCSS badges spread around several European offices and it looks like they’re not going to give away their lead any time soon.

We’re happy to welcome our Latvian friends of Scandiweb to the mix – this is their first Top 5 appearance, so congratulations!

And wouldn’t you believe it, they’re not even official Magento partners.

TOP 5 SOLUTION PARTNERS / COMPANIES

  1. Vaimo, Sweden – 30
  2. Inchoo, Croatia – 11
  3. Classy Llama, USA – 9
  4. MediaCT, Netherlands – 6
  5. Scandiweb, Latvia – 6

Magento certification wall of fame

It’s a great thing to be a part of a huge Magento community, so I’m thrilled to be able to continue paying special tributes to those individuals who have taken the time out of their busy schedules to master Magento inside out and collect all four available Magento certification badges (MCD, MCD+, MCFD and MCSS).

Last time there were 18, now we have 28 such stars on the list. If you know of anyone who should also be included but isn’t (this would most likely be due to their profiles not being searchable in the directory), let me know and I’ll make sure to pin them to this wall of fame.

Here they are, listed alphabetically:

  • Adriano Aguiar (Brazil)
  • James Anelay (UK)
  • Jitze Bakker (Netherlands)
  • Fabrizio Balliano (Italy)
  • Jacques Bodin-Hullin (France)
  • Kris Brown (USA)
  • Ashoka de Wit (Netherlands)
  • Bartosz Gorski (Poland)
  • Gabriel Guarino (Argentina)
  • Phillip Jackson (USA)
  • Vladimir Kerkhoff (Netherlands)
  • Francis Kim (Australia)
  • Dave Macaulay (UK)
  • Chris Manger (USA)
  • Ben Marks (USA)
  • Paul Masson (France)
  • Pierre Masson (France)
  • Daniel Navarro (Spain)
  • Derrick Nyomo (USA)
  • Vladislav Osmianskij (Lithuania)
  • Rutger Rademaker (Netherlands)
  • Martijn Riemersma (Netherlands)
  • Bas Rozema (Netherlands)
  • Sergii Shymko (USA)
  • Henry Tran (Australia)
  • Tobias Zander (Germany)
  • Toon Van Dooren (Belgium)
  • Anthony Van Zandycke (Belgium)

Congrats, kudos, and make sure to get Magento 2 certified as soon as there’s a chance :)

What will happen when Magento 2 comes along?

Well, not much – at least not immediately and not when it comes to official certification – the new exams will be ready only after we’ve all had sufficient time (people are talking about some 6 months after General Availability that is set for mid November) to take Magento 2 for a test drive (we won’t call it that in front of the merchants, of course).

In the meantime, there’s one official Magento 2 development training available from Magento – Fundamentals of Magento 2 Development – better start preparing.

So, what are your plans for MCSS certification?

Do you plan to invest more in getting yourself (or your team) certified with the current program or will you focus your attention mostly on Magento 2 and everything that comes with it?


Disclaimer:

The data for this article is taken from the official public Magento certification directory as well as some of the partners listings and the “heavy crunching” required for this article was completed on August 31st 2015 – if you got certified and had your profile published in the meantime, you may want to wait for this post to be updated :)

There’s also a possibility that not all people who got certified made their profiles publicly available and searchable (I know of several such cases), so the actual number of certified solution specialists is probably a bit higher.

The post State of Magento Solution Specialist Certification – August 2015 appeared first on Inchoo.

]]>
http://inchoo.net/ecommerce/state-of-magento-solution-specialist-certification-august-2015/feed/ 2