Magic Liquidizer Passes Mobile-Friendly Test of Google Developers

Magic Liquidizer Passes Mobile-Friendly Test of Google Developers

We claim that Magic Liquidizer, a WordPress plugin and a Magento extension, makes non-mobile friendly websites become responsive and most of our clients are happy with the results (please see our testimony section).

A couple of days, I receive many emails inquiring about Magic Liquidzer if it passes the mobile friendly test tool of Google Developer website. We believe that our product is 100% mobile compatible as long as it is installed correctly, which our support team is having an endeavour to lend help to clients on software configuration.

In spite of having no idea on Google’s algorithm on how they check if your website is mobile compatible or not. We decided a couple of test using our clients’ website and our demo sites, which give the same results.

Google Mobile-Friendly Test
Source: http://www.google.com/webmasters/tools/mobile-friendly/

 

When the results shows “Awesome! This page is mobile-friendly.”, it definitely means that your website is mobile compatible and passed the Mobile-Friendly test of Google.

Now for those inquiring about the reliability and mobile-friendly capability of our product, my answer is a big YES. So for those who are testing the mobile compatibility of their website and have a similar results found below:

Page appears not mobile-friendly

  • Content wider than screen
  • Links too close together

I recommend Magic Liquidizer to make your website an instant mobile friendly. Though there are other solutions mentioned by Google Developer. I advise to read those options through this link. Please contact us for more information.

Thank you!

Magic Liquidizer – Converts your Website into a Mobile Device Compatible Layout

The instant way to Responsive Web Design RWD which easily upgrades your website into responsive/fluid layout for Smartphones, Tablets, and other mobile screens. It easily converts HTML elements such as images, tables, forms, videos and other web elements into responsive format.

Magic Liquidizer Features

  • 100% Compatible Smaller Screens (Smartphones, Tablets)
  • Do-it-yourself (DIY)
  • 100% Safe (No Hard coding Needed)
  • Cross-Browser Compatibility
  • Supports All Frameworks (WordPress, Magento, Joomla, & other more..)
  • Easy Installation with Documentation
  • No Programming Required in Most Cases
  • Light weight Script and Less Latency
  • Responsive HTML Layouts
  • Responsive Videos (FitVids)
  • Responsive Images
  • Responsive Tables (Beta)
  • Responsive Forms
  • Customizable Navigation Bar
  • Customizable CSS and Media Queries
  • Built in jQuery
  • 30-Day Money Back Guarantee

Most website owners want their website to be fully functioning on smaller screens to improve user’s experience and think an SEO benefits since search engines are giving favorable weight for websites that are capable to adapt on tablets and smartphones as compared to an ordinary website.

Is this software right for me?

If you are looking for an extension or a plugin that will upgrade your website to have responsive feature/function without touching its core files, keep every detail of your website’s functions (even it has e-commerce built), or cost-cut your web development fees, and can Do-It-Yourself (DIY) in 15 Minutes, MAGIC LIQUIDIZER is what you are looking for?

So, this is your solution!

Cutting-Edge Technology

Based on comprehensive research and utilizing available resources, Magic Liquidizer provides a technology that automatically makes your website fully functioning on all small format devices to improve user’s experience and allow your customers to view your products or services in multiple formats.
Web Design Innovations

‘Responsive’ or ‘fluid’ web design is crucial to ensuring wide availability of e-Business. Creating web apps from scratch requires substantial investment of both time and money for small businesses. With Magic Liquidizer, use your existing website and convert it easily into a small format design so customers and visitors can access your site while mobile.
Why you NEED MAGIC LIQUIDIZER?
As you seek new and innovative ways of increasing your website’s visitors from search engine’s referrals, as well as improving user’s experience on multiple devices you need to reach a wider and wider audience. And you need to do it in such a way that your customer won’t abandon your website during purchase due to website’s incapability. Here’s the answer!

We finished writing Magic Liquidizer in WordPress Plugin version and we are still working on other platforms/frameworks as an extension but don’t worry, this software can be manually installed in other platforms since we made it generic to most websites. We will provide you an installation tutorial after you purchase.

liquidizer-presentation

Platform Supported

See our FAQ page for further information. Also please check our DEMO page.

If technical assistance is required to make the installation for you, we provide a very economical and quick service. For further information on this service contact us here.

Changelog

1.0.3 – 2014/01/17

  • [Added] .ml Class Added to <html>
  • [Added] Classes iteration in `Menu Nav Options`
  • [Removed] `hidetodesktops`

1.0.2 – 2013/11/23

  • [Stable] Responsive table
  • [Added] Class “id-mobile” for mobile view
  • [Changed] .fluid-width-video-wrapper to .id-video-wrapper
  • [Improved] CSS and JS on Mobile Nav Bar
  • [Removed] ‘break-word’ class
  • [Improve] Page Loads and Browser Requests

1.0.1 – 2013/11/23

  • [Fixed] Small bug Responsive implementation in default view
  • [Improved] Responsive Form

1.0.0

  • Initial release, 2013/10/11

Please see our clients’ website screenshots below

Custom Website Screenshot
magic liquidizer sample

Magento Demo Screenshot
magento responsive screenshot

WordPress Screenshot
wordpress responsive plugin

How does it work?

Technically, this software will only get in action when your browser’s viewport is less than your website width padding/margins excluded. So portrait view of tablet and other small screens will most likely notice changes. The logic behind with it is to keep your website’s interface natural on laptop or desktop screens to keep all details and functions of your website. You can also perform a test using your favorite browser such as Firefox, Chrome, Internet, Explorer, and Safari by dragging in-out to minimize and maximize.

Testimonials

mark laskin magic liquidizer
Dr M J Laskin
www.web-psychs.com
“Magic Liquidizer is extremely useful and has easily converted my website into mobile compatible format so I can reach out to clients who use mobile phones and tablets quickly and efficiently without having to reformulate or build a specific website for smaller formats. Efficient, easy to use, and very useful! *****”
george b magic liquidizer
George Birdsall
CEO
Purestuf Natural Skincare
The Renovation Plan
Project Management Sydney
Waterwood Management
“I have known Elvin, a developer of Magic Liquidizer, for over 4 years and he has provided many innovative web based designs and services to my group of companies on an ongoing basis. He is an important member of our team and I would highly recommend his web work to any business owner”
lloyd perry magic liquidizer
Lloyd Perry
Level 34 Group,
Australia
“Magic Liquidizer was great! Saved me hundreds of dollars that would have otherwise gone to a designer & developer to make our site responsive. Very happy with the ease of use.”

On the final note

10/18/13. As of today, Magic Liquidizer is the only available solution in the market for converting your website easily into Responsive Web Design without restructuring your website codes such as HTML and CSS. Although, there are available tools in the market today which will only give you a smart interface for you to be able to gradually restructure and build a mobile version of your website. That’s sound time and effort consuming right? This is also risky because it will probably overlook some other functions of your website like e-commerce system.

So we came up a useful technology to lessen your time, effort, and money on responsive web design and development.

If you wish to install it to 3rd party websites, we are happy to provide you a developer’s copy. For further concerns, please contact us.

Thank you very much!

Magic Liquidizer for WordPress FAQ

Magic Liquidizer Documentation

This answers Frequently Asked Questions (FAQs) addressed from Magic Liquidizer WordPress users. But if you’re still having problems or concerns please contact us, or if you wish us to do the installation  for you, you can pay  installation fee instead upon purchase.

About License activation and Implementation

How Magic Liquidizer plugin works?

Easily makes your website responsive to smartphone and tablet screens. It magically converts HTML elements such as images, tables, forms, videos and other HTML elements into fluid feature.

Is this plugin Safe?

Yes. This plugin is 100% safe since this will only execute or run on smaller screens such as tablets and smartphones. You can’t most likely spot any difference on larger screens such as laptops and desktops. It will not wreck your core files as this will only generate pseudo HTML elements to conform with device screens.

Can I install it on other websites?

Yes. If you purchase a personal license, you are only allowed to install it to websites you owned. If you wish to install to 3rd party websites, get a developer’s copy instead. See the license.txt for licensing terms.

Why I couldn’t notice any effect after installing Magic Liquidizer?

Probably because you haven’t activated your plugin, to do this go to your plugin section then activate. After activation go to wordpress Dashboard  > Magic Liquidizer > Setup Wizard.

Still no effect? you should read  our documentation or contact us instead.

Why my website got messy on smaller screen or minimize?

Most websites has incompatible background images, you can disable it via advance settings and custom a background of your own by editing media queries section as long as you are familiar with CSS.

Probably you have inputted wrong fields value.

About Main Settings

Always remember Classes represents (.) and ID’s represents (#) and must be added before their respective names e.g .wrapper, #wrapper.

What main HTML element do you want responsive function to initiate?

You can specify which particular element such as body, html, #container, .wrapper, etc.
html – (currently as a default) means the entire website frame or <html> tag.
body – means <body> tag.
#container – represents an ID <div id=container> that is present in your webpage’s HTML code</div>
.wrapper – represents a class like <div class=wrapper></div>
See the HTML layout below.

<html>

<body>

<div id=”container”>

<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</div>

</body>

</html>

Please watch this video tutorial on how to get ID or Class selector from a source code of web page.

What ‘Which particular elements’ means?

This is to specify which specific HTML tag you are going to make responsive. Ideally those elements with fix width let say 300px and above should be included such as body,div,pre,code,cite,header,summary,footer,article,p separated by comma or space.

How about ‘Main Container’?

This should be your main wrapper, its ideal to use html or body tag.

How about ‘Website Layout Width’?

This is numerical value like 960, 1170, 840, etc. The image below shows 1150 website width in px. You can utilize firebug firefox plugin or native Google chrome inspector to check your website main layout width (excluding margins). If you are still having difficulties, please contact us.
Screen shot 2013-10-08 at 11.11.52 PM.

How about ‘Disable Horizontal Bar’?

It is just a CSS trick to hide overflow-x added in the HTML tag to avoid horizontal scroll bar. It is advisable not to use this until your website is tested and ready.

Responsive Navigation Bar Settings

How to determine my website Navigation #ID or .Class

You can use firebug or native Google chrome inspector to see what Class or ID your navigator has together with ‘Navigation Select’.

Advanced Settings

This information is intended for those who will use the advanced option.

How Advanced Settings Works?

You may want to add or remove a particular element to desktop and non desktop screens. All values are safe as this software will only initiate on smaller screens. Again Classes represents (.) and ID’s represents (#) and must be added before their respective names e.g .wrapper, #wrapper separated by comma or space.

In media queries box, you can use .id-tablets and .id-smartphones. Let say you want to do CSS adjustment on H1 font-size tag. You can use

/* CSS for Smartphone Screens */
.ml.ml-smartphone .ReplacedByYourClass 
	display: hide !important;
}		

/* CSS for Tablet Screens */
.ml.ml-tablet .ReplacedByYourClass {
    display: hide !important;
}

/* For both Smartphones and Tablets */
.ml.ml-mobile .ReplacedByYourClass {
   display: hide !important;
}

For Customizing Media Queries you can read information here.