Blog


Back to Basics – A purpose of a website

What is a purpose of a website?

What is a purpose of a website?

What is a webpage for? (What’s the goal of having a webpage?)

With this article, I would like to start a cycle called Back to Basics. Its purpose it to make us think about things we take for granted in web design for business, but that sometimes are just plain myths, and in other cases those things are not so obvious as we might think.
In this cycle we will basically cover the following topic: what makes a website a successful website. What are the ingredients needed for a good website?

So what is a webpage for? Does it need to have any purpose?

YES, it does. That is a necessary element of every successful web page. It needs to have a purpose. Many webpages fail because its purposes haven’t been reflected upon during the design stage nor anybody thought about them afterwards.

What’s more, answering this question is really answering another one: Do I really need a website?!

I hear you screaming, “we live in XXI century!. Everybody needs a web site. I need a website because my competition has one.” Well, that’s not true. Even the statement that everybody needs a web presence is not true! Those are myths.
There are businesses or targets that do not require a website. Sometimes just being listed in Yellow Pages does the job better than any webpage. But you won’t hear it from most of web designers out there :)
If you are unable to maintain the web page actively or develop it constantly, there is no meaning in having a web page. Because it will not fulfill any of the aimed goals.

Getting back to the main question: most of the answers you will give to the question about the purpose of your site can be closed in one sentence. A sucessful website needs to add some value to your business and it can achieve it in 6 main ways which can overlap with each other.

  • Building Brand Awareness – to promote your brand and make it recognizable
  • Building a community of potential clients around your page to attract potential customers
  • Being a communication channel for promotions, activities, events
  • Selling your product / service directly –  another sale channel for your business
  • New business contacts – getting in contact with providers and other businesses that are not your clients or hiring new staff
  • Making your internal processes easier – internal portal to work with employees in different locations, coordinate different branches, having online CRM system or even customer service website.
6 main goals of a company website

6 main goals of a company website

I would like to explain the 2 last points in the second part of Back to basics series as those goals are almost forgotten and often overlooked. Please stay tuned, part 2 coming soon!

Having nailed those 6 main ways to add value to your business by having a website brings us down to one thing. It is all (perhaps except for the 2 last ) about direct relation with customers and potential customers. A website is a kind of a middle man between a company and people interested in their services / product.

In other words, a website is a gateway for your company to direct interaction with potential clients.

So the common sense will tell us that the whole process of designing and having a web page should be client-centric. Yet sadly in many cases it is totally the opposite.

It is often company-centric. We want to promote our company’s image by using techniques we (as business owners) like and are used to.
On the other hand,  web pages are seldom agency / designer-centric. The designer wants to show off his style and knowledge. The most beautiful colours get combined with astonishing web interface and many photos, etc.

Amidst all this, the main hero of any web page –  the VISITOR – gets forgotten. The most important thing of a web site is USER FRIENDLINESS. To let the user make things the way they like, and not to hide important (to the client, not to the company) information behind many subpages and clicks. Clean and intuitive design is key here, as well as  well programmed and planned base for the engine serving the web site. It needs to be functional and practical.

So you could ask, how should I know what the client wants, how he moves around the web page, what is a hindrance for him. Well, there is a really easy answer to this question.

Ask them! Modern technology gives us multiple and effective ways to communicate and interact with web visitors. I would like to cover them in detail in the next part of the series of getting to the basics, but I will just name them here:

direct website survey, ask your followers on social networks, analyze your site visit statistics, analyze your site keywords, analyze what visitors are doing on the page, etc.

To sum up

The first ingredient needed for a good website is to have a goal. A website needs to have a clear goal. What’s more, it needs to be designed and maintained according to this goal.
And last but not least, it needs to be client-centric.

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Opencart 1.5 File too big error – fix

Max file size you can upload in OpenCart 1.5 admin is 300Kb. But sometimes you need to upload bigger images. What then?
If you get this message while trying to upload images / files then it’s time to make some changes.

“Warning: File too big please keep below 300Kb and no more than 1000px height or width”

Opencart 1.5 File too big error message

Opencart 1.5 File too big error message

The fix for that is really easy and doesn’t require a lot of changes to be made.
To edit manually, follow the instructions below (in TUTORIAL chapter)

If you don’t want to do it manually, as always we provide vqmod that will change it for you automatically.
It will change the max file size to 10Mb.

Just download this file Opencart 1.5 file too big fix (Vqmod)

unzip it and upload it to vqmod/xml directory :)
Remember to use this module you need to have VQMOD installed.

 

How to change Opencart 1.5 image size limit – Tutorial

1.Go to you OpenCart installation dir and then edit this file:
admin/controller/common/filemanager.php

2.Find those 3 lines:
if ($this->request->files['image']['size'] > 300000) {
$json['error'] = $this->language->get('error_file_size');
}

3.Now you have 2 options: Remove the limit completely or change it to something usable like 5mb or 10mb.

3A.Variant one (removing the limit): to do that, just add at the beginning of each line # sign, so the code will look like that:
#if ($this->request->files['image']['size'] > 300000) {
#$json['error'] = $this->language->get('error_file_size');
#}

That’s it.

3B.If you want to change the limit, then edit the first line and change 300000 to any value you want (for 5mb it will be 5000000 and for 10mb 10000000) The first line should look like this:
if ($this->request->files['image']['size'] > 5000000) {
And basically, that’s the whole solution.

If you have any questions or problems just ask in the comments :)

Share this article if you liked it and it solved your problem.

 

 

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

A follow up on Google mobile friendly ranking change

Here is a follow-up on Google new mobile-friendly algorithm that will roll out on April 21.

Few days a go (on Wednesday, March 24) Google hosted a hangout on their official Google webmasters page. Google shed some light or better said clarified some points about new algorithm’s implementation planned on April 21.

First of all, they confirmed that the update will affect all languages, but the changes won’t be global immediately. To update all languages it will take a few days to a week.

Google also confirmed that this is an important update and a significant ranking change.
But this change wont affect desktop users. It will only be applied to searches conducted from mobile phones.

But taking into account that mobile traffic is about 30% of all global internet traffic and that users often enter from their mobile phone and then switch to desktop if they like the site or online shop, you can’t really just ignore this change or care only about desktop anymore.

As for the mobile-friendliness factor, there won’t be any page rank points for being more mobile friendly than others. Either you are mobile friendly (and score higher in mobile searches) or you are not mobile friendly (and score lower). Also the algorithm will check page by page on your site and each mobile-friendly page will receive a badge and score higher. It is not site based but page based.

People from Google webmaster department also confirmed once again and named all the things you need to do to be mobile friendly.Those guidelines are numbered on their Mobile-friendliness test tool and the general rule is that if the page gets the green light in this tool it is prepared for the algorithm change. So if you get a green light in this tool you are OK.

A list of those mobile friendly factors that Google will have in mind for giving you mobile-friendly badge as stated during hangout are:

– Are all links well separated so that clicking on them is easy?

– Is your font size big enough to read comfortably on small devices?

– Is your page width adapted to mobile device screen (that means no zooming or horizontal scrolling to use the page)?

– Is your page using technology not supported on many mobile devices (flash is a big no-no)?

As a side note here, Google confirmed that it is using the speed of site opening as a ranking factor from some time now as this is one of the crucial factors for being mobile and in general visitor friendly.

Google webmaster department staff also stressed out during their hangout that the most important thing is to be user friendly, think about usability and have an up-to-date site, then you don’t need to worry about algorithm updates – neither this one nor the future ones as Google always strives to promote sites that are user friendly and easily usable and that users will love. Well, this is not always true as Google sometimes arbitrarily picks controversial factors for their pager ranking mechanism. But as a general rule, if your site is made with its visitors in mind (and well prepared for all different devices) you shouldn’t have major problems with new Google ranking mechanism.

When talking about usability, it is good to mention that while Google denied that in the coming algorithm change they will penalize pages that have annoying features for users like whole page adds popups or videos that autoplay when you enter the age, they did mention that those issues could be addressed in future algorithm changes as they are constantly improving the page ranking systems and fine tuning them.

So the main thought that people from webmasters department are sending to site owners and developers is: be user friendly, think about your visitors and make your sites better for them.

To sum up, there were no big coming outs or secrets revealed in this hangout, but rather some additional clarifications and more detailed explanations of what we heard before.

 

So be prepared!

Apply for our free web analysis and check not only if your site is mobile friendly according to latest Google changes, but also see how your site is doing in many other ways like speed, security, marketing etc.

 

 

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Get ready for April 21, 2015
Google mobile “doomsday” is coming

A couple of weeks ago Google announced that on 21st of April it will upgrade its algorithm to consider mobile-readiness when ranking website position in search results. In other words, starting from April 21, 2015, websites that are not adapted to mobile devices will drop in search results.

What is this Google algorithm anyway?

Google search engine algorithm is a program that decides how high a web page should be shown in the search results for a given keyword. Establishing accurately if the web page is fit to be shown for those keywords is a complex task.

Google algorithm takes into account many things like site content, links leading to this page and those links’ titles, images, social media and even page load speed.

Normally, Google tends to update its algorithm constantly, with major changes taking place once a year or two.  All of those mayor changes are feared by SEO specialists and aware sites owners as often they mean changes and risk of loosing well established position. Especially if there is a lot of competition in your sector.

googe search engine algorithm at work
Google search engine algorithm at work.

 

More about April 21 update

This time the Google algorithm update is all about mobile. No wonder, almost 30% of global internet traffic is from mobile devices and mobile share is growing fast.
Google partially revealed what will be taken into account while checking for mobile-readiness. All those things are centered around usability:

How fast the page opens on often limited mobile connections, is the website usable without zooming and scrolling horizontally, are all links made the way it is easy to click on them with your finger, does the site use technology that mobiles are not able to display (for example flash) etc.
In other words, the algorithm will check all the things that most mobile users find annoying and it will assign your site a score. What impact will this mobile score have on the overall page rank is still unknown, but we can guess it will be important as Google went as far as issuing an official statement warning about those changes (Statement on official Google blog).

How does it concern me?

What it means for website owners is that they hard worked position in search results will start falling if their site is doesn’t meet the new criteria. Worse search results mean less visits, less clients and less conversions. Nobody can afford that. Most probably, your site or shop won’t loose its position from one day to another, but it will rather start slowly falling to the bottom. But while getting demoted in search results is easy, going up is really difficult.
Of course you can always just ignore Google new algorithm and suggestions, but it is just a matter of time that you will be struck hard. Like we mentioned above, more and more people use mobiles to browse internet and while it is true that potentially they could view many NON-mobile ready pages by horizontal scrolling and zooming, in fact they are not very likely to do that because they simply find it annoying and time-consuming. Most users prefer purchasing from mobile-friendly sites and in most cases there is always some competitor that is offering this possibility. So sooner or later you will start loosing clients if you don’t adapt to new technology.

As for the solution, depending on how well your site is designed and maintained (updated), you would need either small fixes or to have your whole web redesigned to align with those demands.

How would I know if my site is mobile friendly?

If you are unsure about whether your page is or is not mobile ready, Google has provided a tool to do that.

Google is your site ombile friendly test

Google mobile-friendliness check tool in action 

In a clear way it will show you if your site is adapted to mobiles and what it’s lacking.
If you are in green just like us then it is all OK. But if you are in yellow or red there are things you need to change.

You can also get our free web page analysis and check your page in more details to see what changes does it need.

The new design

If a new design is the only option for your site / shop, the best practice is to make sure it will adapt to most of future devices without a hassle, using Responsive Design.

So don’t loose your time, don’t risk your position. Check your website and start preparing for a new design for you website. You should always try to be ahead of the competition anyway!

And dont forget to apply for  free web page analysis :)
====================
Update – 27 MArch 2015
Google hosted a Hangout few days ago to explain in more details some of the aspects of its new mobile friendly algorithm.
See our follow up on this topic
=====================

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Opencart – fixing “Notice: Error: RCPT TO not accepted from server!” (VQMOD)

This is a patch to fix problems with sending contact form in Opencart 1.5 and 2.0.

If you get the following (or similar) message:

Notice: Error: RCPT TO not accepted from server! in system/library/mail.php on line 308

in your Opencart installation, be it v 1.5.x or 2.0.x, then probably your email provider has SPF policy (Sender Policy Framework) verifying the so-called FROM address. This is a good thing, it means that your email provider has a properly configured server that protects from spam messages and other improper uses.
With SPF policy, you cannot put anything you want in the FROM field, it needs to match your account address or at least your email domain.
In other words, if your email address for the shop is, let’s say, moc.n1440840366iamod1440840366ruoy@1440840366pohs1440840366, it will probably only allow moc.n1440840366iamod1440840366ruoy@1440840366pohs1440840366 as a sender address or in the best case scenario moc.n1440840366iamod1440840366ruoy@1440840366GNIHT1440840366YNA1440840366.


dbwb15

The error listed above is caused by the fact that OpenCart for some reason is using another approach. In OpenCart solution, the email address that your client is putting in the contact form is automatically assigned by the OpenCart system as the FROM field of the message. It means that the contact form message is forcefully interpreted as a message coming from your client’s email account (which is not the case, your client is not sending this message from his email account, he only gives you his email address so that you can reply to him).This means that a properly configured server will not send such a message and your client will not be able to contact you.

So should you ask your email account provider to change this SPF or whatsoever setting so that you’re able to use OpenCart way of doing things?

Well, there is a slight problem with this solution. Most providers won’t change their SPF policy.
And they are right. Their approach is 100% correct according to email configuration standards (see RFC 4408 http://www.ietf.org/rfc/rfc4408.txt). It is also a good practice when fighting spammers.

What is the right solution, then?

The best thing to do is to modify your OpenCart emailing library to make it act properly :)

This is really easy as you only need to change just a few lines of code in 2 files.

If you don’t feel like doing it on your own, I have written simple vqmods that will do the same thing for you.
If you don’t have Vqmod installed or you don’t want to install it just follow the steps in those two tutorials for OpenCart 1.5 and 2.x

 

***UPDATE 08-06-2015
Version 0.2.1 of our module released
– Fixed Reply-to bug when receiving new order alerts (Thanks to Fayez Saidawi for pointing this out)

***UPDATE 13-02-2015
Version  0.2 of our module released

– Added field in Mail tab that lets you configure smtp account for sending mails independently from your store main email
– All emails from contact forms and notifications will be send to main store email

***

You can download our mods here:

Opencart 1.5 – Contact form sending problems with smtp account fix
Opencart 2.0 – Contact form sending problems with smtp account fix

Installation

Unzip those files and copy them to vqmod/xml folder in your store main directory. Thats it!

Configuration

Those modules will use SMTP Email Address as the FROM field. So make sure that this field is the same as the account you set in email tab in your shop settings(just as on the picutre below).

The emails will be send to your main shop email (set in Email field in Store tab).

dbwb101


If you have any problems with installing those modules or you need professional help with customizing your OpenCart

Contact us for a free consultation or quote
I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Mobile design and Google search results

Being mobile ready can affect positively your SEO

The mobile web market is growing amazingly fast and website owners try to go ahead and adapt their sites for mobile users. But in the near future being mobile reday won’t mean being ahead, it will be simply essential for your web presence. Well, in fact it is already happening, you don’t have to wait for the future.
Mostly because you need to be able to serve new customers, but there is also another aspect of being mobile friendly which is often overlooked and can be crucial for your bussines. Being mobile friendly directly affects your position in Google searches (SEO).

In November 2014 Google announced that it will add a special tag to all websites adapted to mobiles, a “Mobile-friendly” label.

Google Official Blog

dbwb67

Source: Google Official Blog
But that’s not all, Google is experimenting with using mobile-friendly criteria to rank your site. In other words, being mobile-friendly will affect your google search ranking.


According to Google, a webpage is eligible for this label if it meets the following requirements:

-” Avoids software that is not common on mobile devices, like Flash”

– “Uses text that is readable without zooming”

– “Sizes content to the screen so users don’t have to scroll horizontally or zoom”

– “Places links far enough apart so that the correct one can be easily tapped”

Google also provides site owners with a tool where you can check if your site is currently meeting those conditions.

Google Mobile-Frinedly Test
dbwb66
If your site is mobile friendly then you will see green texts saying everything is OK*like on the pic above). If not you will receive some tips how to make your site better.

 

The speed IS important

There are many articles stressing the importance of speed in web design, especially in mobile world. Google also takes that into account (this mechanism is already implemented into Google algorythm) in its ranking mechanism. Pages that open faster and are better optimized will score higher in Google searches.

Again, there is a tool from Google to check how your page is doing in terms of optimization, user experience and speed. It is a good  thing to score high, but you don’t  need to worry too much about all the tips and fixes proposed by Google. Those certainly will make your site Google bot friendly but it will sometimes hinder the user experience which is by far the most important thing.

dbwb68

 

 

As a general rule, it is good to score in green range of points (aprox. 90 out of 100) to make sure it will affect your GOOGLE SEO positively.

Google Speed Insights

Also it is a good habit to compare Google test results with other tools of this type,  just to name a few that are the most usefull:

Pingdom
Web Page Test
GT Metrix

 

Choose your developer carefully

I will use a short Google article about making better mobile ready websites as a pretext to highlight 2 important aspects of web designing. One of those articles has 6 pieces of advice for finding a good developer to ensure high quality and mobile readiness of a site.

What should I think about when working with a developer – by GOOGLE

Most of the tips are nothing new and are really common sense, like: make sure to hire a developer with experience in mobile web design, make sure he understands mobile world, make him install measurement and analitics tools etc.

But there are two points that are the most important. Google doesn’t enter deep into the subject so I would like to explain those 2 concepts mentioned by Google a little bit more (points 3 and 6 of the above-linked article).
dbwb70
Source: Google Site Insights

 

Web page speed is crucial, not only for your SEO ranking.

Developers are often so concerned about the design, look and feel of the pagethat  they tend to completely forget that SPEED is a very important part of user experience. If the page doesn’t open fast enough, all those bells and whistles won’t serve their purpose. The visitor, discouraged by how slow the site opens, will leave even before trying or seeing them.

So yes, speed is important and make sure that the team your are hiring not only has a developer who can make fast and optimalized web apps, but also a good sysadmin that can tune the server to ensure a maximum performance for this specific web page.

 

The site is not a finished product, it needs to evolve constantly.

While speeding up the websites is gaining more and more supporters and many articles have been written about it recently, this aspect remains rather unknown to the general public. In a world where technology changes so quickly, there is no such thing as 100% complete/finished web page. A web page is not a book that, once finished, you can put on display and forget about it. Websites need to be constantly adapted to changing technologies, user needs and expectations.

That’s why it is important to listen to your customers and analize web page statistics. You should CONsTANTLY IMPROVE your web page in order to deliver the best experience possible. Don’t forget that in many cases your company’s web page is the first encounter point for your clients. They will get to know you by your web page, they will judge your bussines  by how your page works and how it looks.

Besides, manitaining and upgrading web pages on a regular basis makes it easier, faster and less expensive to adapt to a constantly changing world. It is better to give one small step at a time than to have rebuild your web site every few years from scratch, and it gives you a website that is always up-to-date, not only every now and then.

Listening and taking your clients’ feedback into account will not only let you make the web page a better experience for them, discover their needs or anticipate the market demand, it will also cause you’ll be closer to your customers, it will help engage with them and build a community around your business.

 

To sum up, being mobile friendly is a must-be for any company now, as not only will it reach customers using mobile devices but it will also add “points” to your Google search ranking.
Besides, being mobile means being FAST – optimizing your site for speed is as important as having great responsive design, or even more important. You also should not forget that a website is not a finished product and it should constantly evolve to match your client changing preferences.

 

If you need a mobile friendly website/online store that is optimized for speed

Contact us for a free quote

What’s more, it looks like our own philosophy of constantly growing websites matches perfectly Google tips for site owners!

 

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Opencart – How to hide or style Totals

How to hide or style Totals in cart popup and checkout cart view – a tutorial for OpenCart 2.0

At some point you might want to change how the totals are displayed across different sites in Opencart.
For example, it is a good practice to make popup cart as simple as possible. For that, we would like to hide all the subtotal and tax fields. What you need there is just total of your cart.

combined

You cannot switch totals in the admin because they are needed for calculating the right final price, but how about just hiding them in the theme styles so that they don’t apear on the page but are stil calculated.
There is a problem with that, there is no css id nor style that makes it possible to distingush between different totals in Opencart. They are just fields in a table.

So what we would like do is to distinguish those table rows in some way.
There are many ways to acomplish this task but what we did is to add special class to each row depending on total code.
The modifications are really minimal. Just a few lines of code and you are done.
In our approach we use a code value from the total arrays (see this file catalog->model->total->totals.php)
This value is set for each total defined in the OC admin. It will be:

  • sub_total for sub totals
  • tax for the tax ammount
  • shipping for shipping totals

etc.
It is very handy as it lets us distinguish perfectly between totals and hide what we don’t need.
We should modify 3 core files to enable this value for use in templates.
If you don’t like – just like us – modifying core files, just use vqmod to do so.

Download totals modification vqmod for OC 2.0

This mod will take care of core files code only. You need to make template modifications by hand. Why?
Because we don’t think using vqmod for template files is a good thing. Templates system is designed to be modifed directily, without the use of vqmod. And it would be better to do it this way as many themes change template files drastically or overide default template settings. So in many situations vqmod with templates simply won’t work or will mess up your template.

If you use this mode you can skip step no.1 for every page but you still need do do the second step to make this work.

If you have any problems with installing those modules or you need professional help with customizing your OpenCart

Contact us for a free consultation or quote

This is a tutorial for OpenCart 2.0 showing how to enable Total identification to be able to hide subtotals or make it bigger or smaller, according to the importance of the information.

If you need to modify totals on just one page just do one step (I, II, III) accordingly, each step is for different page, so you don’t need to do all the steps if you don’t need them.
The procedure is almost indentical for all those 3 pages.

I. OC 2.0 Cart popup totals

  1. Edit file catalog->controller->common->cart.php
    Find line:

     text'  => $this->currency->format($result['value']),

    and after this line add:

     'code'  => $result['code'],

    This will enable the variable code in our totals array

  2. Edit file catalog->view->themes->YOUR_THEME->templates->common->cart.tpl
    Look for line (near the end of the file)

     <?php foreach ($totals as $total) { ?> 

    below you should have this line:

    <tr>

    This line below, depending on your theme, could also be “ul” or “li”
    It doesn’t matter what it is, just add to it – just before the ending > – this text:

    id="popup_totals_<?php echo $total['code']; ?>"

    So it will look like

    <tr id="popup_totals_<?php echo $total['code']; ?>">

    or

    <ul class="popup_totals_<?php echo $total['code']; ?>">

    or whatever it was before.
    That will set a special css class with different name for each subtotal so it will be easy to change its style or hide it.

  3. Now go to catalog->view->themes->YOUR_THEME->stylesheet->stylesheet.css
    and depending on what you want to do, add a code styling different subtotals.
    For example, in order to hide tax and subtotal and only show total(like in the picture below), paste this code

    #popup_totals_tax, #popup_totals_sub_total {
    display: none;
    }
    
  4. dbwb41

    If you want to change totals size to make subtotals different size than total paste this code:

    #popup_totals_tax, popup_totals_sub_total {
    font-size: 12px;
    }

    Change 12px to whatever size you want them be, and so on.

II. OC Checkout shopping cart

  1. Edit file catalog->controller->checkout->cart.php
    Find line:
    text' => $this->currency->format($result['value'])
    at the end of this line add a comma so it would look like:
    text' => $this->currency->format($result['value']),
    and after this line add:
    'code' => $result['code'],
  2. Edit file catalog->view->themes->YOUR_THEME->templates->checkout->cart.tpl
    Look for line (near the end of the file)

     <?php foreach ($totals as $total) { ?> 

    below you should have this line:

    <tr>

    This line below depending on your theme could also be “ul” or “li”
    It doesn’t matter what it is, just add to it – just before the ending > – this text:

    id="checkout_totals_<?php echo $total['code']; ?>"

    So it will look like

    <tr id="checkout_totals_<?php echo $total['code']; ?>">

    or

    <ul id="checkout_totals_<?php echo $total['code']; ?>"> 

    or whatever it was before.
    That will set a special css class with different name for each subtotal so it will be easy to change its style or hide it.

  3. Now go to catalog->view->themes->YOUR_THEME->stylesheet->stylesheet.css
    and depending on what you want to do, add a code styling different subtotals.
    For example to hide tax and subtotal and only show total paste this code

    >#checkout_totals_tax, #checkout_totals_sub_total {
    display: none;
    }
    

    If you want to change totals size to make subtotals different size(like in the picture below) than total paste this code:

    #checkout_totals_tax, checkout_totals_sub_total {
    font-size: 12px;
    }

    Change 12px to whatever size you want them be,
    and so on.

  4. dbwb24

III. Opencart 2.0 Checkout Confirm page totals

  1. Edit file catalog->controller->checkout->confirm.php
    Find line:
    text' => $this->currency->format($result['value']),
    and after this line add:

    'code'  => $result['code'],</code>
  2. Edit file catalog->view->themes->YOUR_THEME->templates->checkout->confirm.tpl
    Look for line (near the end of the file)

     <?php foreach ($totals as $total) { ?> 

    below you should have this line:

    <tr>

    This line below depending on your theme could also be “ul” or “li”
    It doesn’t matter what it is, just add to it – just before the ending > – this text:

    id="confirm_totals_<?php echo $total['code']; ?>"

    So it will look like

    <tr id="confirm_totals_<?php echo $total['code']; ?>">

    or

    <ul id="confirm_totals_<?php echo $total['code']; ?>">

    or whatever it was before.
    That will set a special css class with different name for each subtotal so it will be easy to change its style or hide it.

  3. Now go to catalog->view->themes->YOUR_THEME->stylesheet->stylesheet.css
    and depending on what you want to do, add a code styling different subtotals.
    For example, in order to hide tax and subtotal and only show total, paste this code

    #confirm_totals_tax, #confirm_totals_sub_total {
    display: none;
    }
    

    If you want to change Total size to make it bigger than subtotals and to be in red paste this code:

    #confirm_totals_total {
    font-size: 12px;
    color: #FF0000;
    }
    

    Change 12px to whatever size you want it to be.

And that’s it! I hope you’ll find this step-by-step tutorial easy to follow. Let me know if you have any problems. Good luck!

If you have any problems with OpenCart and need professional help or support

Contact us for a free consultation or quote
I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Opencart – fixing “Notice: Error: RCPT TO not accepted from server!” (tutorial)

This is a patch to fix problems with sending contact form in Opencart 1.5 and 2.0.

If you get the following message:

Notice: Error: RCPT TO not accepted from server! in system/library/mail.php on line 308

in your Opencart installation, be it v 1.5.x or 2.0.x, then probably your email provider has SPF policy (Sender Policy Framework) verifying the so-called FROM address. This is a good thing, it means that your email provider has a properly configured server that protects from spam messages and other improper uses.
With SPF policy, you cannot put anything you want in the FROM field, it needs to match your account address or at least your email domain.
In other words, if your email address for the shop is, let’s say, moc.n1440840366iamod1440840366ruoy@1440840366pohs1440840366, it will probably only allow moc.n1440840366iamod1440840366ruoy@1440840366pohs1440840366 as a sender address or in the best case scenario moc.n1440840366iamod1440840366ruoy@1440840366GNIHT1440840366YNA1440840366.


dbwb15

The error listed above is caused by the fact that OpenCart for some reason is using another approach. In OpenCart solution, the email address that your client is putting in the contact form is automatically assigned by the OpenCart system as the FROM field of the message. It means that the contact form message is forcefully interpreted as a message coming from your client’s email account (which is not the case, your client is not sending this message from his email account, he only gives you his email address so that you can reply to him).This means that a properly configured server will not send such a message and your client will not be able to contact you.

So should you ask your email account provider to change this SPF or whatsoever setting so that you’re able to use OpenCart way of doing things?

Well, there is a slight problem with this solution. Most providers won’t change their SPF policy.
And they are right. Their approach is 100% correct according to email configuration standards (see RFC 4408 http://www.ietf.org/rfc/rfc4408.txt). It is also a good practice when fighting spammers.

What is the right solution, then?

The best thing to do is to modify your OpenCart emailing library to make it act properly :)

This is really easy as you only need to change just a few lines of code in 2 files.

Below you have 2 tutorials how to change it for OC 1.5 and 2.0 versions. If you don’t feel like doing it on your own, I have written simple vqmods that will do the same thing for you. You can download them here – Notice: Error: RCPT TO not accepted from server! – fix (VQMOD)
If you don’t have Vqmod installed or you don’t want to install it just follow the steps in the tutorials.


Opencart 1.5 Fix

  • First edit the file catalog/controller/information/contact.php
    Look for line:
    $mail->setFrom($this->request->post['email']);in my version it is line 20Change it to:
    $mail->setFrom($this->config->get('config_email'));What this will do is set the FROM field to be the same as your shop’s main email address.
    You can hardcode (but I wouldn’t recommend it) an email adress here if you want by changing this line to ie:
    $mail->setFrom('moc.n1440840366iamod1440840366ym@po1440840366hs1440840366');
  • Now find the line:
    $mail->setSender($this->request->post['name']); It should be below the line we just edited or somwhere near.
    Change it to:
    $mail->setReplyTo($this->request->post['email']);
    $mail->setSender($this->config->get('config_email'));
    What this will do is set your client’s email provided by him in the contact form as reply-to email, so that you’re able to respond automatically to contact form messages by clicking on Reply button.
    It is also setting your shop email address as sender’s name.
  • OK so now we need to edit system/library/mail.php file
    In the beginning you will have line:
    protected $subject; Just add this before it:
    protected $replyto;
  • Find line:
    public function setSender($sender) { and before it add:
    public function setReplyTo($reply_to) {
    $this->replyto = html_entity_decode($reply_to, ENT_QUOTES, 'UTF-8');
    }
    What we did here is to add REPLY-TO function which is missing in 1.5 (but is present in 2.0) and allows us to set different reply-to addresses than FROM address.
  • Finally find this line:
    $header .= 'Reply-To: ' . '=?UTF-8?B?' . base64_encode($this->sender) . '?=' . ' <' . $this->from . '>' . $this->newline;

    and change it to:
    if ($this->replyto){
    $header .= 'Reply-To: =?UTF-8?B?' . base64_encode($this->replyto) . '?=' . ' <' . $this->replyto . '>' . $this->newline;
    }

    Here we are correcting the way reply-to address is set (it will use the email address your client introduced in the contact form).
    And that’s it!

If you have any problems with OC and need professional help or support

Contact us for a free consultation or quote

 


Opencart 2.0 fix

It is simplier to change in the newest version of OC because there is already a funciton to set Reply-To address.

  • First edit the file catalog/controller/information/contact.php
    Look for line:
    $mail->setFrom($this->request->post['email']);in my version it is line 20
    Change it to:
    $mail->setFrom($this->config->get('config_email'));What this will do is set the FROM field to be the same as your shop’s main email address.
    You can hardcode (but I wouldn’t recommend it) an email adress here if you want by changing this line to ie:
    $mail->setFrom('moc.n1440840366iamod1440840366ym@po1440840366hs1440840366');
  • Now find this line:
    $mail->setSender($this->request->post['name']); It should be below the line we just edited or somwhere around.
    Change it to:
    $mail->setReplyTo($this->request->post['email']);
    $mail->setSender($this->config->get('config_email'));
    What this will do is set your client’s email provided by him in the contact form as reply-to email, so that you’re able to respond automatically to contact form messages by clicking on Reply button.
    It is also setting your shop email address as sender’s name.
  • Now we need to edit system/library/mail.php file
    You just need to change this line:
    $header .= 'Reply-To: =?UTF-8?B?' . base64_encode($this->replyto) . '?=' . ' <' . $this->from . '>' . $this->newline;change it to:
    $header .= 'Reply-To: =?UTF-8?B?' . base64_encode($this->replyto) . '?=' . ' <' . $this->replyto . '>' . $this->newline;Here we are correcting the way reply-to address is set (it will use the email address your client introduced in the contact form).
  • And this line to correct annoying bug with Reply-to being not set correctly when notifying customer about new order:
    $this->setReplyTo($this->sender);
    Replace it with this:
    $this->setReplyTo($this->from);Refresh your contact form and try sending a test email.

If you have any problems with OpenCart and need professional help or support

Contact us for a free consultation or quote

 

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Responsive design optimization

Is my site really mobile ready?

Amidst all this technological turmoil, many people tend to think, “well, I have my responsive web page finished, so I guess I am mobile ready?” Well, probably not yet. The thing is, most designers forget about one “small” detail – performance.
Usually, the biggest flaw of responsive design is its speed. Here goes an attempt to explain this aspect without entering too much into tech details.

In responsive design, you scale elements (including images) on browser screen to match users device size. But this doesn’t mean you actually make big image any smaller. What this scaling does (the scaling is mostly done in CSS) is to take the original image and tell the browser to show it as a smaller image. What it means is:

optimalize1

This way, if you have a big image to match large desktop screen, this image will be loaded by mobile devices also, it will just appear smaller. The bigger the image, the slower it will take to load it. And on mobile devices it will make even longer, as those normally have much slower internet connection than your laptop or desktop pc.
Apart form images, there are lots of other elements that are loaded to make the page look nice. Those elements are sometimes hidden by responsive design for smaller screens because they are not needed or they just use too much screen. But like with images, they are still loaded by mobile users, even if they are not displayed.

Well nobody likes to wait, so if the visitors are forced to wait too long, they will probably leave the site. Also, if the site is too big while having many visitors per hour, it may significantly slower your server, and consequently your web page, even more.
In other words, websites that suppose to be mobile friendly don’t serve their purpose if they load too long. Optimization for speed is a must-be in the small screen size world.

Is there anything we can do about it?

The answer is, of course, yes.
There are a few ways to optimize responsive design pages. Apart of course from doing nothing (which is sadly the most common approach).

There are also some basic things you should always do independently whether you deal with responsive designs or not.

  • Compress all your images so that their size will decrease, which means loading faster and using less server bandwidth.Use services like:
    Compressor.io
    Kraken.io

  • Think whether you really need all of those bells and whistles, turn off all those functionalities you don’t need or you don’t use right now.
  • Use plugins for your CMS or online shop that will optimize your content. Normally what they do is to compress content they send to visitors so that it takes less to send it. They also cache content (save most used parts of your web page and serves it in more efficient way). There are many of them available for any platform. Just to name few plugins for WP: APC, W3 Total Cache or WP Super Cache

There are also some more advanced techniques to optimize your web page. All of them have one thing in common: detecting visitors screen size and serving resized(smaller) and optimized images for this screen.
As it usually happens, most of those solutions are not perfect. So the best approach is to use multilevel optimization or mixed techniques to get a final effect as foolproof as possible.

Just before ordering your web page, make sure that your designer understands the need of optimization or – even better – that the company you hire has a server administrator capable of tuning your server and website for faster mobile experience.

Advanced responsive design optimization solutions.

If you are not scared of technical details I will name 3 mainly used methods of advanced responsive design optimization.

  • Javascript optimization.
    This will use some special written code (javascript) to detect visitors settings and then on the fly overrides big images with their smaller versions.
    While it can detect various different settings, this approach sometimes tends to fail to optimize anything. Because modern browsers fetch images before they execute java scripts, chances are that you will force visitors to download the same image twice (first the big version and then the small version), this is not what we really want, is it?
    There are many new variations of this method appearing that try to address the problem, so these solutions are starting to work better, but still they are fair less effective than server side optimization.
    The biggest advantages of this solution are easiness of implementation and possibility of detecting many other settings than just screen size.

  • Server side optimization.
    This will use special server configuration to detect the browser version of the visitor and see if this is mobile, tablet or desktop. Then it directly serves appropriate version of the image. This method is very fast and the gains in performance are really big but it fails to detect many devices and you need to constantly add new browser versions. Also it is unable to detect visitors screen sizes. It can only detect if its mobile, tablet or desktop and even here it can fail sometimes.
    (Well, to be honest. there are high-end server detection systems with device database constantly updated but they are very expensive and are normally directed to corporations or big companies).
    So this approach will require deep server knowledge and thus it will be more expensive to setup and maintain. But this is the option that gives the highest speed increments.

  • The best of the two worlds.
    This approach mixes the js detection possibilities with server side optimization. Basically, the javascript is responsible for detecting the screen size and then communicating it to the server (using special cookie), the server then recognizes the cookie and serves images accordingly to the screen size. It also has a fail-safe mechanism: if by some reason the cookie is not set fast enough for the server to react, there is a server level device detection (although not perfect, it will be enough as a backup mechanism) and will try to serve image accordingly to the system detected (mobile, desktop or tablet).
    This will give you both the flexibility of visitors settings you can detect and the speed of server side optimization.
    Of course, even this system can sometimes fail to detect the visitor’s screen size accurately, but because of the double check the chances are much smaller.
    You would still need a system administrator to setup the server for this solution and you’d have some maintenance costs, but those would be lower than in case of pure server side optimization.

By far this third option is the best solution to implement, and the most cost effective.

To sum up: responsive design is a must-have these days, but only if properly set up. Choose the option that is best for you and make sure your designer understands this issue and takes it seriously.

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr

Mobile ready webdesign

Do I really need a mobile ready web page? And what does it really mean?

Lately there has been a lot of fuss about mobile friendly/mobile ready web pages, mobile internet usage and similar stuff. Why is that the case and should we even care? To put it simply, mobile and tablet users are growing in numbers rapidly, very rapidly. And this growth implies changes, as mobile users see and browse pages differently than desktop users do (and tablet users do it in a different way, too). So we definitely should care, and I’ll try to explain why.

Let’s take a look at the mobile (and tablet) internet usage statisitics:

whyresponsive1

Just a word on tablets, the prognostics for tablet growth are really amazing. Many analitics are pointing out that tablets will replace desktops almost completely in the future. While this is uncertain, the sure thing is that tablets and mobile users are social groups that are experiencing a very dynamic growth.

So what do these statistics mean? They simply mean that the internet world is now changing in a way that challenges our previous designs and solutions. 1/4 of internet traffic is performed on devices with small screen sizes, without any mouse or keyboard, and with a touch screen. What’s more, almost all your potential clients move continously from one device to another, and thus there are no fixed device characteristics, there are no fixed screen widths and there are no fixed habits that could fit all of those devices. You browse differently while using a small touch screen without a mouse than while using a 30” screen with mouse and keybord attached. You would also expect other things on those small devices like links and buttons to be bigger so you could hit it easily with your fingers etc. The key term here would be flexibility. That’s what we need.

We could of course do nothing and keep our web page focused on desktops. But are we sure we can afford to lose at least 25% of our potential clients? (If not more, because some webpages don’t look good on modern huge TV or screens either).
As business owners, we want to do something to make them use our services or buy our products. And we can only achieve this by making their experience more fluent and pleasant, by better adapting to their needs. But it may turn out difficult as you need to adapt to a constanly changing environment, with very few static variables.

So how we should address this problem?

A word about responsive design

There are basically 2 approaches regarding the issue of adapting your web page to different devices.

Some companies and designers have opted to make 2 or even 3 versions of a web site: one for desktops, one for mobiles and one for tablets. Well, this approach doesn’t make much sense nowadays. They are fixed for just a few screen sizes and a few devices. So if a new tablet or smart phone appears on the market with another innovative characteristics, those sites will most likely no longer work as they were supposed to. The only solution in that case would be to make another web page version or even change the design completely. And that is costly and time consuming.

The second approach is called responsive design.
It is a design that adapts automatically (or almost automatically) and accordingly to user’s screen size. So if a new type of device emerges you can be pretty sure that it will support it right out of the box. And if not, you will be able to make it this-new-device friendly with just minor adjustments.

Responsive design also makes it possible to tweak the webpage only for a specific segment (for example smartphones, tablets, or wide screens) to make user experience better and to make the shopping process for those devices easier (taking into account that each device segment has its habits and advantages etc.).

Responsive design has its downsides, too. Sometimes you need to sacrifice some parts of your design (that otherwise wouldn’t display properly on mobiles for example) and there is an issue related with pages opening slower on mobiles (a way to overcome this is to use server side mobile optimalization – but this is material fo another post).
However, in the long run, it is cheaper to maintain and it will adapt better to new devices and screen resolutions yet to come than the first approach. The hassle and costs will pay off with time.

That’s why in most cases, in terms of being user fiendly (whichever device we’re talking about), the responsive design is the best choice as for now. Unless of course somebody invents an even better way of making websites in the future. Such possibility always exists, you know:)

To sum up, if we don’t want to loose our position on the online market, or if we cherish the popularity of our blog, we should doubtlessly undertake some steps, as more and more people will start using mobile devices in the near future, and the best solution so far seems to be responsive design. We better not think it too long, the time is now.

I like it...Tweet about this on TwitterPin on PinterestShare on Google+Share on FacebookShare on LinkedInShare on StumbleUponShare on Tumblr