The Benefits of PSD to Magento Template Conversion

Electronic business is getting more and more popular, one effect of which is increased competition. To differentiate and make their venture stand out among others, business owners strive to add more useful functionality and design features to their sites.

But many of them face various hurdles in the way for being not much tech-savvy. This results in implementation of various actions that cause only harm to their business, quite often what made with good intentions turn out to be time-consuming and expensive. So when it comes to web development, it’s better to find a reputed company that can professionally guide you through the jungle of e-business insides.

As a leading ecommerce development platform Magento offers multiple opportunities to its users. It’s the most widely used CMS (content management system) and many businesses have already fully enjoyed its advantages. Magento is an open source framework, which determines a huge amount of useful tools, plugins and overall flexibility it offers. Online stores developed on this platform are not only attractive for visitors but also cross-browser compatible and SEO-friendly.

If you have specific design requirements it’s a high time to benefit from PSD to Magento conversion. Besides the fact that this process is a fast way to refresh your site, among the important reasons to add PSD transformation to your e-business development plan is that it helps to increase conversion rates.

As for other weighty benefits, check a few ones below:

  • Unique design. There are a lot of Magento themes and templates available on the market. But as business owner you know exactly who your target audience is and can say for sure what should your store look like. Converting your PSD design files into Magento you get absolutely exclusive theme that will make customers come back.
  • Lift up on search engines. Properly implemented conversion is impossible without SEO-friendly codes. Well structures and clean coding that corresponds all basic standards ensures top page rank in search engines.
  • Speed optimization. Online stores contain a lot of data and changeable content, which influences pages load speed. Adding more and more functionality and design elements can affect loading speed and as a result users will leave your site without making a purchase. PSD to Magento theme conversion helps to avoid this problem by splitting Photoshop files into different design layers.
  • User-friendly interface. Ecommerce site are made for people, so user-friendliness is crucial for them. PSD to Magento conversion helps to make functioning web pages out of regular picture. Sites created on Magento are easy to navigate and as a special advantage its coding allows to implement media files upload such as video and audio.
  • Pixel-perfect dynamic interface. The conversion of PSD files into Magento requires solid expertise from developers and entails a long-term process. Only skilled programmers are able to provide really smart and totally hand-coded markup. Such a smart and clean conversion allows to add JS and attach images later.

Magento is a powerful framework and it’s getting more and more popular everyday. The benefits above are just a few major reasons to act in this direction. In fact due to its popularity the platform is being constantly upgraded and a significant amount of programmers all over the world create the new features and modules for it every day. Start your own online ecommerce business or enhance the existing one with the help of professional PSD to Magento services.

Add Facebook Like Reactions to Your WordPress Website

Add Facebook Like Reactions to Your WordPress Website

By now everyone is familiar with Facebook’s new reaction system, and while it’s not without its downsides (we still don’t have a dislike button, albeit for understandable reasons), we have to admit it’s pretty engaging. In fact, wouldn’t it be great if you were able to set up such a system on your own WordPress website?

If your answer to the above question was yes, you’re in luck! There are already a few up-and-coming plugins offering you the option of setting up similar ‘like reaction’ systems on your own posts.

We’ve gone ahead and compiled a small list of the best plugins providing similar functions, including all the information you need to choose the best one for your site. Let’s see how they stack up to the original system.

1. MyEffecto-Instant Visual Feedback

myeffecto-instant-visual-feedback

MyEffecto is a plugin designed to help you implement an emotion-based rating system into your WordPress website (which is just a fancy way of referring to the like reactions system). It does this by providing your visitors with a simple menu, which includes multiple emotional responses ranging from the positive to the negative, much like Facebook:

myeffecto-menu

 

 

 

 

 

The plugin comes with a solid configuration panel, found under the Settings tab after it’s been activated. By default, the like reactions system will be added to all of your blog posts, but you can pick and choose in which pages it will appear by visiting theBlog Settings tab.

The default menu includes emoticons for awesome, love, like, dislike, and sad. Furthermore, the plugin provides you with the option to create new menus by mixing and matching dozens of emoticons and text labels.

We didn’t find any glaring bugs during testing, and the plugin played nicely with multiple themes – displaying without issue every single time. As an added bonus, the developers behind the plugin seem to be pretty active on their support forum.

Key Features:

  • A customizable like reactions menu, with dozens of available emoticons. The plugin also enables you to change the text below each reaction, keep track of your reactions using either a regular count or percentages, and change the icon sizes.
  • Available in 23 languages.
  • Includes optional recommendation and social sharing widgets.
  • Enables you to toggle a mobile-friendly version, which minimizes the menu down to a single emoticon, displaying it in full when clicked.
  • Choose exactly where the like reactions menu gets displayed on your site – on posts, pages, and your homepage.
  • Includes an option to add custom CSS to your menus.

Price: FREE | More Information

2. DW Reactions

dw-reactions

 

 

 

 

 

 

 

DW Reactions is a simple plugin that enables you to include a reaction menu, based on Facebook’s UX design, on your WordPress website. The plugin includes six basic reactions – like, love, laugh, surprise, sadness, and anger – as you can see in the example below:

dw-reactions-menu

 

 

 

 

 

 

As far as plugins go, DW Reactions is a newcomer to the field. It enables you to implement the like reactions system in a couple of steps, and select exactly where it should appear. However, the system itself (despite looking pretty nice) lacks configuration options, and it still shows a few kinks as far as compatibility goes with multiple themes. During our testing, it didn’t play nicely with the Divi theme (it worked, but the menu didn’t display properly), but it did support the default WordPress themes without any problems, so your mileage may vary.

Aside from these issues, DW Reactions offers a solid and easy to implement like reactions system, making it perfect for users who want something that doesn’t require in-depth configuration. On top of its ease of use, the plugin’s developers are also pretty active when it comes to answering threads on the plugin’s support forum, which is always a great sign.

A premium version, DW Reactions Pro, is also available for those who desire a more customizable experience. On top of the free version’s regular features, DW Reactions Pro also includes detailed reaction statistics – including historic data from individual users, additional reaction styles, and a widget enabling users to check out your most popular posts as far as reactions are concerned.

Key Features:

  • Similar UX design to the original Facebook like reactions system.
  • You may choose to display the reactions menu and a corresponding count together, although the count can be disabled.
  • The plugin can be set so that only logged in users may choose a reaction. This option can be disabled from the settings screen if you wish, to allow anonymous reactions.
  • Optimized for mobile interfaces.
  • Enables you to choose on which pages the system will be displayed, including your homepage, archives, posts, and pages.
  • The menu can also be manually implemented through the use of shortcodes, which are included on its configuration screen.
  • Your like reactions menu and the corresponding count can be set to be displayed either above or below your post content.

Price: FREE | $17

Understanding the WordPress File and Directory Structure

Understanding the WordPress File and Directory Structure

While it’s entirely possible to interact with your WordPress website only through the dashboard, understanding how your install is structured, and which files perform which functions, is crucial in order to attain a higher degree of control over your site. At the very least, this understanding will enable you to troubleshoot any errors that might arise much more easily.

Each WordPress install starts out with the same directory structure and core files. Every plugin or theme you install, every script you add, and every error screen that appears, is possible thanks to the CMS’s backbone. While the idea of poking around these files may seem intimidating at first, it’s much simpler than it looks.

Over the course of this article, we’ll review the contents of the most important WordPress folders, paying special attention to the core files that power your site.

Introducing the WordPress Directory Structure

The WordPress file structure is honestly pretty simple at the higher levels. You have your public_html folder, where its three key folders are located, as well as a lot of important files such as wp-config.php and .htaccess. Even if it’s your first time poking around in the back of your WordPress installation, chances are that you’ve already familiar with those names.

In order to access these files and folders, you must use either your hosting service’s cPanel file manager, or a File Transfer Protocol (FTP) client. For the purposes of this guide, we’ll be using FileZilla. Regardless of your choice, this is what the inside of yourpublic_html folder should look like:

public-html

Before we jump into those three top level folders, let’s take a look at some of the files laying around inside public_html. First of all, we have .htaccess (short for “hypertext access”). This enables you to control permalink structure, files, folders, and access to them across your WordPress installation. A pristine .htaccess file should look as follows:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Then we’ve got index.php, which will be returned as your homepage by default unless it’s superseded by either a front-page.php or a home.php file:

public-html-index-php

 

 

 

 

 

 

 

Another crucial file in this directory is wp-config.php. This handles WordPress’ base configuration, and includes your MySQL settings, secret keys, and database table prefix. This is what your database settings should look like:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'notarealname');
/** MySQL database username */
define('DB_USER', 'notarealuser');
/** MySQL database password */
define('DB_PASSWORD', 'notarealpassword');
/** MySQL hostname */
define('DB_HOST', 'localhost');

Other notable files on this directory include wp-activate.php, wp-signup.php, and wp-signup.php, which together handle the signup, login, and user confirmation process. We’ve also got wp-comments-post.php (which handles the commenting function and prevents comment duplicates), and wp-settings.php, which sets up some common WordPress variables.

Having covered those, let’s move onto the first of the top level folders, wp-admin.

The wp-admin Folder

wp-admin

 

 

 

 

 

 

 

As its name implies, this is the folder that houses the files powering your admin tools as a WordPress user. For example, admin.php (which is at the heart of the folder), enables connection to the database, displays the WordPress dashboard, and performs any other number of key functions, such as checking whether any given user is in fact the admin in question. If they are, the script proceeds to call upon the wp-load.php file, which in turn loads the wp-config.php file:

/**
* In WordPress Administration Screens
*
* @since 2.3.2
*/
if ( ! defined( 'WP_ADMIN' ) ) {
define( 'WP_ADMIN', true );
}
if ( ! defined('WP_NETWORK_ADMIN') )
define('WP_NETWORK_ADMIN', false);
if ( ! defined('WP_USER_ADMIN') )
define('WP_USER_ADMIN', false);
if ( ! WP_NETWORK_ADMIN && ! WP_USER_ADMIN ) {
define('WP_BLOG_ADMIN', true);
}
if ( isset($_GET['import']) && !defined('WP_LOAD_IMPORTERS') )
define('WP_LOAD_IMPORTERS', true);
require_once(dirname(dirname(__FILE__)) . '/wp-load.php');

If you pay attention to the names of the files in this folder, you’ll find that most of them correspond to the functions you’ve come to know on the WordPress dashboard. For example, profile.php powers the user profile administration screen, while theme-install.php controls the theme installation panel, and plugin-install.php does the same for the plugins panel.

As for the other important folders inside of wp-admin, images is filled with images used in the WordPress administration panel, css and js are devoted to CSS code and JavaScript scripts respectively, and network houses the PHP files necessary to powerWordPress multisite.

The wp-content Folder

This is the section of the back end where you’re likely to spend most of your time during the course of your relationship with WordPress. Its two most popular functions are located inside – of course, we’re talking about themes and plugins:

file

The plugins Folder

wp-content-plugins

 

 

 

 

 

 

Each plugin you upload to WordPress will have its own subfolder within the plugins folder, as seen in the example above. The contents of each of these vary from plugin to plugin. Here, for example, is a quick look inside the Akismet plugin’s folder:

wp-content-akismet

How to Create Retina Display Image Assets for Better Looking Websites

How to Create Retina Display Image Assets for Better Looking Websites

You’ve invested a lot of time into making your new website perfect, so why does it look so fuzzy when you view it on your iPhone? You made sure to use beautiful high quality images but they don’t seem to be displaying correctly at all. Cue panic!
Many people don’t realize that newer devices – especially those from Apple – use advanced display technology that affects how images are displayed. Fortunately, there are some tricks you can use to make sure your images are optimized to ensure your website looks perfect on devices like your iPhone.
This article will introduce the topic of retina display and how it impacts your website images, then show you how to create image assets that will display well on retina screens.
Retina Display Images Explained

Device screens have continued to improve in quality over the last several years, and Apple in particular have been working on making their screens extremely clear and viewable – in fact, ‘Retina Display’ is a brand name from Apple used to describe the screens of their newer devices.
Retina screens aim to display text and images as sharp as possible, with no pixels visible to the naked eye. The challenge for designers is that retina displays is not a standard – it varies depending on the size of the device’s display (for example, a watch screen compared to a tablet), and how close a typical user would be to the screen.
When talking about retina displays we have to think about pixel density, which is the number of pixels a display can fit into a fixed distance. This is not the same as resolution, which is the number of pixels across the entire height and width of a device. A smaller screen (such as an iPhone) with the same resolution as a larger one (such as an iPad) would have a greater pixel density.
Dividing the physical width of the display by the number of pixels displayed horizontally gives us the pixels per inch (ppi, also called dpi for dots per inch). ‘High DPI’ is used to refer to any device that has over 200 pixels per inch. This includes all retina display devices from Apple, and some devices from other manufacturers. For a more in depth explanation, check out this article on the Designer’s Guide to DPI.
Traditionally, web graphics were optimized at 72dpi. An image at that density displayed on any high DPI device (especially a retina display) will be displayed in one of two ways:
As a fraction of the size if shown at the device’s DPI.
Shown at the original dimensions with extra pixels guessed (interpolated) and filled in reducing the quality of the image.

Retina-Comparison

 

This means that for the best quality image display on retina display devices, you need to be working with higher resolution images. This ensures that the image can be displayed at a pixel density appropriate for these newer screens. Let’s take a look at how you can do that within your Photoshop.

How to Use Photoshop to Create Retina Display Images

Working with images at double or quadruple the resolution means you may need to zoom in to be able to see any fine detail, but extremely large image files can create performance issues and file storage challenges.

The solution for most designers has been to either create multiple layers and groups, turning them on and off as needed using the comps feature of Photoshop, or to work at the the original resolution and export the sizes they need (using an action likeretinize.it).

The challenge with both of these methods is that you cannot see multiple images at the same time. If you need to view the differences in the images at the necessary sizes, you have to switch between them or export and then rework.

Fortunately for us Photoshop lovers, Adobe has added functionality that makes creating multiple images even easier. Now you can create multiple canvases side by side using the artboard feature, and create multiple image sizes using Generate. Let’s see how this works to create images for retina displays.

1. Create Your First Artboard

The new Artboard tool, introduced in Photoshop CC 2015, can be found hidden behind the Move tool. You can either click on the tool in the menu, or use Shift+V to switch between Move and Artboard:

Artboard-Tool1

To create an artboard, click and drag an area. The new artboard will be displayed in the Layers panel with a default name of Artboard 1.

2. Set Up Your Artboard

You can add any layers you need to your artboard, and they will be nested similar to layer groups – enabling you to create an appropriate layer structure. We would suggest adding your various assets, such as shapes and type, so that they’re positioned as you need them before moving on to the next step.

3. Duplicate Your Artboard

Once your first artboard is set up to suit your needs, you can duplicate it using the contextual menu. Right-click on Artboard 1 in the Layers panel and select Duplicate Artboard. This creates another artboard of the same size and position, containing the exact same layer structure with all the included assets:

Artboard-Duplicate1

4. Position Your Artboards

The big advantage of using artboards is being able to see all of your images at the same time. To do this, just position your artboards as needed. There are several ways to move an artboard:

  1. Use the Properties panel that displays when an artboard is selected to enter the X and Y coordinates for the top left corner of the artboard.
  2. Drag the selected artboard to any position inside Photoshop. The artboard is smart guide enabled, so you can automatically align multiple artboards and their positions will lock to the previous spacing.
  3. Use your keyboard arrow keys to move a selected artboard. An arrow key by itself will nudge the board by one pixel, while holding Shift+Arrow will move it by ten pixels.

5. Resize Your Artboards (If Needed)

If you need to adjust the size of your artboards, you again have multiple options:

  1. Resize them using the handles that appear when you select an artboard.
  2. Use the Options panel just below the File menu to choose preset sizes, set custom widths or heights, or switch between portrait and landscape orientation.
  3. Use the Properties panel that displays when an artboard is selected to change the size and access the preset sizes.

Artboard-Properties-Size1

6. Create Your Art

You can now work with your artboards, replacing image assets and making changes as needed. Assuming your original setup went well, you’ll now have pixel perfect images with all assets in the right place.

7. Set Up the Generate Tool

Generate enables you to export artboards, layers, or groups by using a special naming syntax. It acts as a Save for Web shortcut. To ensure Generate is turned on for your PSD go to File > Generate > Image Assets:

Generate-Tool1

8. Rename Your Artboards

Generate works by saving image assets as you work based on options you set in the name of the layer group – or in this case, your artboard. There are a few options you can set:

  • File format. Add an extension ( such as -opt.jpg, .gif or .png) to save the relevant file – for example, header-main.png. The image assets will be saved in the same folder as the PSD file, but with an -assets suffix.
  • File compression. After the extension, you can add a figure denoting the level compression used. For opt.jpg you can use percentages, and for .png use 8, 24,or 32 for the respective bit formats – for example, header-main.png8.
  • Output scale. You can set the scale of the output by adding either the percentage, or pixels (width by height) before the image name (e.g. 100% header-main.png8).
  • Multiple images. You can export multiple images from the same artboard by using either a comma or a plus sign to separate the image names. Each image can thus have its own options so long as each image name is unique – for example, 100% header-main.png8, 200% header-main.png8.

Combining these options enables you to consistently create complex image assets from your artboards:

Named-Artboard1

If standard images are needed for all of your artboards, the Generate tool enables you to create a default setting to apply to each one. To create this setting, add an empty layer at the top of your document with the following options:

  • Default keyword: The name must start with this to let Generate know to use it as the default.
  • Output scale: As before, set the scale of the output with a percentage or pixels (width by height).
  • Folder/suffix: Set the folder name where images should be saved, and a suffix to add to the filenames.

By adding multiple options, you can automatically create the images you need for retina displays – for example, default 100% end/@1x, 200% end/@2x, 300% end/@3x. You can then add extensions to any boards you want exported using the default option.