]]>Recently made a set of new custom CSS themes for Zingtree Decision Trees for Support, that were integrated into the system and got featured in this blog post. One of my themes became default panels style. I already know Zingtree system very well, made some very custom project implementations using provided Zingtree functionality.

Custom Themes

Custom themes are easy to build now, starting from one of provided CSS templates from the gallery. Buttons layout was done with flex box to make it more compatible with different button sizes, different content and layouts. I thought that default Bootstrap’s layout had less compatibility.

Hope new themes are easier to maintain and to customize further. Write me for help / issues with your custom themes.

]]>Few days ago we have upgraded most sites on our hosting to PHP7 after switching to EasyApache4. It gives us ability to easily choose which version of PHP particular hosting account will use.

WordPress is already advising to use PHP7 or newer, while still working with version 5.6, but many plugins already require PHP7, so wanted to switch. Many sources confirm that PHP7 is much faster and safer, than previous versions.

]]>Switching your website to HTTPS protocol is becoming easier today. It’s recommended practice to all websites. Due to increased security and a small rank boost from Google. Latest releases of WHM/Cpanel include a free auto-renewing SSL certificates from Let’s Encrypt open-source project by default. So to switch your site to https protocol requires only few things.

Your CMS website might have a switch. So does Prestashop for example. In WordPress you just chance URL addresses in settings by changing http:// into https://.

Redirects novadays are created automatically in modern CMS versions.

Database Search Replace

But do you remember about all your cross-links on pages and posts? They all will remain http:// – only links properly coded in templates will change with the switch. And you will notice “mixed content” warnings in your browser website address field, instead of long-awaited green padlock. To deal with such warnings, first you need to search and replace for all wrong links in content. Content means your database. Take care and do a backup it before that.

In WordPress just download excellent Search and Replace plugin, replace http://yourdomain.co.il and http://www.yourdomain.co.il with https://www.yourdomain.co.il in all occurrences.

In another CMS, where don’t have such module/plugin you might need to use another free plugin, called Database Search and Replace Script in PHP. Deploy it to your website root, fill in your credentials and follow their guidelines. It works, I’ve checked.

Catch Remaining Non-HTTPS Content Links

After all wrong links are replaced you can use Google Chrome Dev (F12) Security tab to find all sources still loaded with non-secure http protocol – a cause of mixed content warning.

Check non-HTTPS sources here easily. Now you might need to modify your templates, wherever you still have http:// links, write https:// or just // to work well with any protocol.

Latest Firefox may just not show unsecured content, so you need to use Chrome to catch it.

Notify Google of HTTPS Switch

Now when your site is free from mixed content and all pages show green padlock, you will need to notify Google about the change. Got to Search Console and create a new property with https:// URL. You may create 2 with and without www, if needed. Submit a new sitemap with secured new links and wait for google to re-index. If your redirect works properly google will automatically show SSL protected links version.

BONUS:Add Security Headers to disallow unsecured content on your website. I’ve updated this post with Headers suitable for websites under SSL protection. You can always check your current Headers here.

]]>Wordfence for WordPress, one of the best security plugins which also had a cache functionality, just announced it will remove their cache Falcon engine. On of the biggest advantages (integrated performance optimization) of Wordfence will be disabled. I’ve used it on many sites. Now tested several plugin options to replace it fast and without much trouble. But first disable Falcon which is in Optimization settings of Wordfence. It will be discontinued soon anyway.

Of cause there is always an option to use W3 Total Cache plugin, but it’s too big and complex for smaller and medium sites. W3 Total includes minification engine, but often does it with too many errors. So for such sites I like to use excellent and flexible Autoptimize minification plugin.

I’ve ran several tests with different cache plugins in order to achieve the same as Wordfence Falcon or better speed for several sites that had Wordfence performance optimization turned on before. Plugins tested were HyperCache, Gator Cache, WP Fastest Cache and Comet Cache. I liked them for easiness of setup and options, good ratings on wordpress.org and my previous experience with some of them. Few years ago I really liked Hypercache, but it’s rarely updated + got some problems with it on Woocommerce sites. Gator was promising, as it has Autoptimize plugin compatibility, but something didn’t work in the setup and wasn’t able to make it work.

Cache Plugins to Use

After many tests with Google’s PageSpeed Insight I decided to use Comet plugin (previously known as ZenCache) for sites that already have Autoptimize plugin installed and set up. Results were similar to Falcon engine by Wordfence.

For sites that didn’t have Autoptimize plugin set up, I recommend to use WP Fastest Cache plugin, because its free version includes also basic minification engine, that usually doesn’t cause any errors at all. Its paid version has better minification options, but if you have time to setup Autoptimize for minification it will probably be better and also free of charge. Then use it with Comet, as proposed earlier. Or buy a premium version of Comet or WP Fastest Cache, they both has minification too.

For now replacements are performing nicely. Will update this post in case of some problems found. Need also more tests with stores that use Woocommerce. I previously had some problems with such plugins on shopping websites. But W3 Total plugin is advisable for web stores that use Woocommerce. If minification doesn’t work well, you could always add Autoptimize to it. Good luck.

Update: October 2017

WP Fastest Cache stopped to minimize JavaScript in its free version. So Autoptimize + Comet Cache seems to be the best option these days.

]]>Zingtree is an interactive decision tree widgets provider. I’ve been told they are best comparing to other providers of such services. You integrate their app into your site with an iframe code or WordPress plugin. It’s also integrates well with Zendesk support platform. I was ordered to customize their trees design to match customer’s responsive site design. Completed the theme and want to write down my findings.

Design a Custom Theme on Zingtree.

It provides an easy option to add a custom .css file into their system. You just upload it somewhere on your server and edit with FTP. Great option to developers. Notice that for Zendesk embed external .css file must use https protocol. So after debug you may just to upload it into Zendesk custom theme assets.

However during CSS development you may find many areas of their templates missing unique classes and IDs. And therefore adding specific styles to such parts will be hard enough. Moreover you’ll miss body classes / id for their “nodes”. So for example, if you’ll want to customize a home node before the actual tree (which has a unique ID) with CSS, you’ll have a problem. Zingtree will not allow any changes in their templates HTML. And you can’t add any JavaScript into it by default.

Adding JavaScript into Zingtree.

Since whole trees widget is actually one page with tree node divs, we were able to add some JavaScript into it inside one of the nodes. It works, but JS must listen to Zingtree JS, and it’s quite complicated. Needed it to identify the homepage tree node – added classes to the body tag, when a user is on homepage node. And customized its look with CSS. Not the best solution, but it solves the problem. I’ve told to Zingtree support they are not marking their HTML with enough IDs.

Anyway the theme is OK now, and I was able to fulfill customer’s task. Love CSS file inclusion. Don’t like missing IDs in Zingtree app code, that decreases the power of custom included CSS file.

]]>Zendesk Help Center used by many important companies as customer support and customer service solution can have a specially designed customized theme. Such a theme could be responsive and there is an option to customize HTML/CSS code in many aspects for all page templates used. Zendesk templates could also be multilingual when dynamic content tags are used. So many good companies are developing their own responsive themes to stand out from the crowd.

Making Zendesk templates was a new task for me. During the project I’ve learned many things about creating a custom theme, such as available template tags and templating language, API possibilities, multi-language setup, some JavaScript and jQuery tweaks for templates. It wasn’t easy, as not many developers know how to make such themes and even less people are ready to share their knowledge. But at the end we’ve made what was required by design in full. Even made them to support multiple languages. Learned a lot of things about Zendesk templating engine during this project. And some important technical points are shared in my development blog. Now I could do next Zendesk responsive themes with ease and comfort.

Custom Responsive Zendesk Theme Ready and I’ve Learned a Lot.

As usual for my custom themes, this theme was made responsive, retina display ready with svg images and was checked in all available browsers. So if you need a custom responsive multilingual theme development for your company’s help center portal please contact me and I’ll be ready to help. Need to practice before I forget how it works there

]]>Finally got a letter from Prestashop developers. They promised to send it many months ago for my help with the Hebrew translation of Prestashop. I thought there will be some mug and/or a t-shirt, but only stickers… Anyway it’s cute I’ve been thinking where to put these stickers ever since.

]]>Facebook Instant Articles (FBIA) is a new project by Facebook. Instant Articles feature is a nice and easy addition to any website concerned with social media sharing and ease of shared content perception afterwards. FBIA could be set up on a modern WordPress site with help of dedicated official plugin.

When you share some blog post or an article on FB, FB would show light-speed Instant Article simplified version of shared page to mobile users, without leaving FB app. Instant articles format is optimized for fast viewing inside FB. The idea is similar to Google AMP somehow. But FBIA don’t impact search ranks yet. Still many ppl believe they will do good to your site and provide better shared content browsing experience.

I love Facebook, so decided to give it a try. I can tell, it was easy to implement.And approval came fast. Do not believe all kinds of blogs telling about minimal 50 articles limit to get verified. These days the limit is only 10 articles to be prepared before submission.

WordPress plugin for Instant Articles does most of the job. Because it’s still raw and under heavy development, there are some problems, but mostly with an uncommon code of your website pages. For example, currently it can’t decode Vimeo video, but YouTube video should be OK.

Article with errors will produce an error notification in FB Page’s publishing tool, you’ll have a chance to tweak it manually from Facebook page settings and to publish. But you could also train your WP plugin with custom rules to bypass code parts causing errors upon submission. Such errors could be removed with Custom transformer rules WordPress plugin’s setting (read more on using this feature in Fix CSS blog FBIA custom transformer rules article).

One of important requirements for FBIA: they must feature the same content as your related web page copy. So try not to remove content that causes errors upon submission, but to fix these errors, preferably once and for all (via Custom transformer rules). Take care on preparing error-free articles before submitting to review.

For example Vimeo video iframe embed could still be enabled if surrounded by <figure class="op-interactive"></figure> tag when tweaking the Instant Article code on your FB page or just enclose embed iframe in WordPress with <div class="interactive"></div>, which should convert fine into op-interactive class.

To your Facebook page you may aggregate feeds from several WordPress sites. In FB page settings you can add one automatic feed. But if you authorize the plugin on several sites with the same page FB app ID, all your sites feeds would come to your designated FB page. Feeds are created by WordPress Instant Articles plugin. Their default URL looks like web-design.co.il/feed/instant-articles.

Each site could have its own design of published Instant Articles. Styles are set inside FB page settings and called from website’s WP plugin’s settings.

FB Instant Articles Features

Your WordPress featured image will be on top of page and on tap will populate full mobile screen. It will animate if you tilt your phone from side to side. In-fact all images from web page could open full screen and animate.

WordPress Gallery must convert to FBIA slideshow. It doesn’t start automatically, but arrows would designate touch scroll possibility to move between slides. Modern WP themes should do OK, but it’s error-prone feature and must be checked well.

If you have some kind of unusual / non-valid code on your site’s page, like some HTML, PHP, CSS, JS code examples, you’ll need to put a special attentions to converting / formatting this piece. FBIA could understand only page code defined in their conversion rules. But rules could be extended inside WP plugin.

FB Ads Inside Instant Articles

It’s very easy to setup Facebook ads from Audience Network (Facebook own ads network). In fact ads added automatically to your Instant Articles after a fast and easy setup. You’ll have to create FB app for that. It will provide stats and settings. By the way Facebook now has mobile website ads possibility, so you could setup that too on your website. It’s still in Beta, but they take any publishers in to participate.

I hope they will extend their Ads Network to Desktop websites too. Maybe after successful mobile web test… Their ads look good on a big screen too and nothing would stop them to expand. Google AdSence domination is unbearable. Facebook is a better and smarter company.

So with ads app added to your FB page, Facebook will put ads automatically into Instant Articles. Or you may specify locations inside the IA code. (For mobile web ads you must specify locations in the code manually, no automatic inclusion,)

]]>Accelerated Mobile Pages (AMP) are pushed by Google to promote faster and more accessible content for mobile users in search result listings. AMP show only a small header and a post content without any complex design bells and whistles. Google say it will rank such pages higher in the results. This is especially good for News sites, but may also be useful for your blog posts too. AMP currently could be created for blog posts only. Their specifications are based on Accelerated Mobile Pages Project and could be easily enough implemented on any WordPress site.

Needless to say, if Google promises higher ranking to such pages, we have no other choice, but to obey and deliver.

How Mobile-Optimized Accelerated Mobile Pages Look Like?

I’ve never seen them yet on my mobile phone, but I saw several screenshots of Google results pages. They could be featured in the news or inside search results carousel. Therefore requirements are simple and restrictive. Each blog post should have a featured image, yes, default placeholder could be added, but it is not as good as a unique image for each news or blog post.

Want to see an actual AMP page? Just check this post’s AMP version. It’s a very simple version optimized for fast mobile view. Almost all design got stripped. Just the content remains. So it will load very fast indeed for mobile users.

Get Into AMP Search Results

It is important to implement AMP pages as required by Google. Errors will lead to such message at your Google Search Console messages:

Google systems have detected that some of your AMP pages do not meet our guidelines and will therefore not show in Google Search AMP-related features. The following report provides examples of pages with errors

Implementation

Specs are provided by AMP project‘s website and there are more requirements in the Google AMP Guidelines. Implementing Mobile Accelerated pages is easy enough for open-source CMS users while using plugins and modules repositories. Again, my latest article on Fix CSS blog provides detailed insight into adding AMP versions to a WordPress site.

]]>Got a mail now, I’m one of the top 10 Prestashop translation contributors on Crowdin! And they gonna send me some gifts

Prestashop Translation to Hebrew

I did added a lot of Hebrew translations to PrestaShop for my client’s shop Hibuki, that should be released soon. And also helped to a community. It’s important to share translations and to make it better. Prestashop RTL version is still very basic. In fact, its RTL CSS code has only one or two lines. But I fully customized its CSS myself to make it real RTL and suitable for a Hebrew web store. Now I could produce Hebrew RTL web shops with ease.

Contributed to WordPress Hebrew Translations Too

Last months I’ve made even more Hebrew WordPress plugins translations, than what was done for Prestashop. Mostly BuddyPress and Events Manager plugins, but also some smaller plugins projects. I prefer to make it for community, with a hope that somebody would also improve it, and more sites with RTL support would go online. The development of WordPress must include a better RTL-support too.

Contribute Your Translations to Community

So I call all developers to share their translations thru respective translations projects. If you making a translation for your own project, first contribute missing terms and phrases to community based open-source translation services, like Crowdin for Prestashop or GlotPress for WordPress. Later you’ll be able to download it for your own use and to polish it with Poedit translations editor for your own use, if changes are needed. But together we could build a better Hebrew support for future projects. And translations will automatically download next time you start a new CMS project or download a plugin from a repository.

]]>https://www.web-design.co.il/2016/02/we-are-among-top-prestashop-translation-contributors/feed/3How to Build Your Website with a Freelancer?https://www.web-design.co.il/2016/02/how-to-build-your-website-with-a-freelancer/
https://www.web-design.co.il/2016/02/how-to-build-your-website-with-a-freelancer/#commentsTue, 23 Feb 2016 16:04:06 +0000http://www.web-design.co.il/?p=825Small tips on how to work with a freelancer.

This is a hard task. Ask your friends and relatives for recommendations. Check freelancer’s sites and their blogs. Write to their sites and check response times. You’ll want a fast response and a full-time Skype / email communication possibility.

There are several big sites to hire freelancers, like freelancer.com, upwork.com, European Twago, Israeli Freelancerim and there are probably some others, that I just didn’t noticed yet (please add your favourites in comments).

A perfect freelancer is hard to find and once somebody have found one, they won’t let such person go easily.

Don’t gamble on cheap freelancers, they are never good. Experience costs whole lot.

Be sure they do understand your needs. They should ask a lot of questions and you should provide clear answers. If you don’t know such answers you always could consult with them to set objectives together.

Set Clear Tasks

Tasks should be set clear and easily understandable. If you are ordering a website, make sure you also create a site plan with main sections and functionality description. It’s a good idea to create site pages even in MS Word, with the needed content and functionality description. For a multilingual website specify languages. Also specify if you’ll need your logo in different languages.

Also be sure to describe site’s target audience, the purpose of your website and its functionality. Show few similar websites you like, describe what you do like about them.

Setting a color scheme and fonts from the beginning would save a lot of time for both of you, as these choices are most time-consuming during mock-up creation to many designers.

Your Requirements

It’s important to build a list of your requirements. For HTML/CSS tasks they could be: a list of compatible browsers and versions, use of retina optimized images, responsive layout etc.

Listen Carefully to Your Freelancer

Your freelancers might have a lot of experience in his field. Their suggestions could be priceless. Still follow your objectives, because some task may look too complicated for your freelancers, so they’ll try to find some arguments to avoid committing on it. This is likely to happen when you are negotiating a fixed price. If you are paying by hours, take such arguments more seriously.

Pay in Time

Some fast down payment is a good way to start a relationship. It shows you are obliged to pay all fees in time and without a delay.

Freelancers love their work, but they are totally depending on you regarding the money. You may be a bad client, but your only real objective as a client, when working with a freelancer is to pay in time and without problems.

If you can’t set clear tasks, can’t communicate the way your freelancer would understand what’s needed, can’t provide a clear brief or workflow decisions, it’s OK. You may even hire a project manager if you really can’t provide such objectives. But if you don’t pay in time, no freelancer will work for you.

]]>https://www.web-design.co.il/2016/02/how-to-build-your-website-with-a-freelancer/feed/2Always Make a Sketch When Designing a Websitehttps://www.web-design.co.il/2016/02/always-make-a-sketch-when-designing-a-website-even-for-simplest-one/
https://www.web-design.co.il/2016/02/always-make-a-sketch-when-designing-a-website-even-for-simplest-one/#respondSat, 20 Feb 2016 17:26:11 +0000http://www.web-design.co.il/?p=795It pays to make a mock-up before production.

]]>I’m telling myself each time when I’m starting a project, “Make a sketch!“. Still there are simple projects, and you want to make them fast without entering a normal design process. Like to use a good template and just to change logo. But when a logo is added, I often see the template would need some color change, etc. etc.

Each time I wasn’t making a draft design before starting to implement, it turned to be much longer, than in projects where I prepared a draft and approved it with a client, before implementation. So I’m telling myself again, “create a draft before implementing it!” And you should do this too. Otherwise you’ll find yourself struggling without a concept, continuously editing CSS, images and HTML without a clue on what are you doing and what’s the goal.

So do yourself a favor, make a design sketch before implementation, even for simplest one. The project will go much faster and better.

I’m not telling it’s not possible to redesign on a live site, it just takes more work and longer time.

As my Art School teacher said once: “I could draw a face starting from any detail, but you’ll do better, if you start from a general head shape deepening into details later on“. This is true. I already could do it starting from a detail. But it’s still faster and better to start from a general design draft. You can organize fonts, colors and elements as needed beforehand. You can then approve it with a client avoiding most of future misunderstandings and discussions. And most important, you’ll know your implementation aims and means. You’ll have a list of colors to use on pages, you’ll not be required to try several fonts for a site, you’ll have everything already planned.

It’s enough to make a homepage design sketch, and if there are important pages, you could add them too to a draft. Other pages gonna be ok, you’ll have a mainframe for them.

So sorry about this post, but I had to remind it to myself after falling into this trap again. It was a success after all, anyway