Firefox Mobile Developer Tools

Tuesday, 18 September 2012 00:00

Note: this is Part II of our 8 part series introducing desktop browser tools for testing mobile sites.

Firefox Mobile Developer ToolsWhile Firefox has been one of the most popular Internet browsers, the Firefox mobile browser (codename “Fennec”) hasn’t been around for too long. Firefox and the Mozilla developer community provide a package of mobile developer tools along with useful browser add-ons for both users and web developers. The mobile browser Fennec can also be installed on desktops for testing. However, for most users it's probably easiest to install a few plugins to the Firefox desktop browser in order to preview and test mobile sites.

The latest Firefox 15 also has a built-in tool for testing web sites with various resolutions, under Tools->Web developer->Responsive Design View. Note that this view only changes the resolution of the browser, and not the User Agent of the browser for those websites that use server-side device detection (see our introduction to this mobile site testing article series for more info). However, when you have User Agent Switcher plugin installed this feature can be very handy, as you can just switch to the user agent of the target device and easily set the Firefox resolution accordingly.

Update Sep-19: Firefox 16 Beta apparently also has command line access to developer tools.

Works on: Windows, Linux, Mac OS X
Price: Free 
Requirements: For Firefox desktop web browser, you need to get some Firefox add-ons also, at least User Agent Switcher. Optionally you maybe also want to get Modify Headers, and XHTML mobile profile. You also need the User Agent strings for the mobile devices you want to test -- easiest way is to get a big bunch in the same XML and just directly import the file to User Agent Switcher (In Firefox, select Tools->Default User Agent->Edit User Agents->Import).
For using the Fennec desktop version you should check the instructions and setup the Android SDK according to the Fennec Android guide. It is also possible to build a desktop executable version of Fennec from the latest source.

Pros

  • Firefox desktop plugins are simple to install and fast to launch and use. No SDK to be installed.
  • Fennec has keyboard, mouse, and pinch zoom support.
  • Ability to sync bookmarks between the Fennec desktop emulator and normal Firefox browser can be handy for testing.

Cons

  • Fennec doesn’t declare itself clearly as mobile browser, so many sites may not recognize it as one. In those cases you’ll need to use desktop Firefox and user agent changer.
  • Installing and using Android SDK for Fennec is cumbersome if you don’t need the SDK for anything else. Also building Fennec from source code for desktop is a turnoff for casual users.
  • Like Opera, it is just one browser - there might be variations with e.g. vendor-prefixed CSS properties etc.

BONUS NOTE FOR CHROME:
You can also find similar features in Google Chrome: Right-click on any page, select Inspect Element to open the Web Inspector, and then click on the “settings” icon in the bottom right corner of the Web Inspector. There you can set a different User Agent, screen size, and also so called “font-scale factor." You can also get User Agent Switchers for Chrome.

Do you have your own tips or comments, or have we missed something? Let us know in the comments below!

 

Mobile Joomla! Showcase: Webfor Web Design & SEO

Monday, 17 September 2012 00:00

Webfor's mobile home pageWebfor is a Web Design and SEO company that helps businesses succeed in marketing their business online. Their buzzwords are Website Design Awesomeness, Local SEO, Social Media, Email, and Paid Search. Webfor is based in Vancouver, Washington, USA. The company works by a motto of 3R’s: Relationship, Results, and Return of investment to increase and improve clients’ website traffic, market share, sales, and ROI.

We had a chat with Kevin Getch, the President & Lead SEO of Webfor, a man admittedly being obsessed about SEO and SoLoMo (convergence of Social, Local, and Mobile). Read on for the interview.

Mobile Joomla! (MJ): What problem were you facing that Mobile Joomla! solved?

Kevin: Joomla! didn't have a lot of great mobile extensions. Mobile Joomla! is the best mobile extension for Joomla! by far. We've done sites both using the standard Mobile Joomla! template and the Elegance template. A&D Computers Mobile Joomla Template A couple of sites where we used the Elegance template for example are a-n-dcomputers.com and meticulousplumbing.com (plus webfor.com of course).

MJ: How much time or money has Mobile Joomla! saved you?

Kevin: Mobile Joomla! has easily saved us $1,000 in development, implementation, research, and education costs.

MJ: Has Mobile Joomla! increased your income?

Kevin: As mobile is a huge avenue for our clients we recommend a mobile solution to almost all of our potential clients. So yes, it has increased our income and our customer base as well.

MJ: What do you like most about Mobile Joomla!?Meticulous Plumbing Mobile Joomla Template

Kevin: What we love the most about Mobile Joomla! is the ease of implementation and the sleek and easy-to-customize design. Working with Mobile Joomla! has been a great experience. The team is very responsive when we have questions, but the best thing is we rarely need help when using Mobile Joomla! as it's very intuitive.

MJ: Was there something you found remarkable about Mobile Joomla!?

Kevin: The time it took to get a mobile site running! It took us about 10 minutes to set everything up. 

Thanks Kevin for the interview!


You can reach/follow Kevin at @KevinGetch and @Webfor and Webfor Facebook

 

 

Opera Mobile Emulator For Desktop

Friday, 14 September 2012 00:00

Note: this is Part I of our 8 part series introducing desktop browser tools for testing mobile websites.

Opera Mobile EmulatorOpera Mobile Emulator is software created by Opera for web developers and designers to test websites on the Opera Mobile browser. It has the exactly same engine and UI as Opera Mobile on mobile phones. There are, however, some extra debugging tools available, such as keyboard shortcuts, the profile selector, and various command-line flags. Check out detailed description on the use of Opera Mobile Emulator.

Works on: Windows, Linux, Mac OS X
Price: Free
Requirements: Just a download from the Opera site.

Pros

  • It’s an emulator, so you don’t need any real phones for testing. It comes pre-configured with a series of phone and tablet device profiles (User Agent strings). There’s also an online and downloadable Opera Mini Simulator for feature phones that run the Java-based Opera browser.
  • Customizable User Agents - Users can freely change the UA string
  • Super simple to install and easy to use. No need to install any complex SDKs or the like. 
  • Various input modes - There are three input modes available: touch, keypad and tablet. All modes can be activated and controlled by links and controls. 
  • Bookmark sync - Opera Mobile Emulator can be integrated with Opera Turbo and Opera Link to enable bookmark sync for faster testing.
  • Optional: Remote debugging with real devices - you can do remote debugging by installing also Opera Dragonfly that contains useful features such as DOM, CSS, Network Inspectors, JavaScript Debugger, Command Line and Error Console. 

Cons

  • Media support may not be perfect.
  • By default, only User Agent Strings for the platforms Opera Mobile runs on are included. However, it's possible to add iPhone User Agent to Opera Mobile Emulator as a custom UA string.
  • The emulator displays how pages look using the Opera mobile browser -- as known, not all features work similarly in different browsers. Even more so in the mobile world.

Do you have your own tips or comments, or have we missed something? Let us know in the comments below!

 

8 Ways To Test A Mobile Site on Different Mobile Devices

Friday, 14 September 2012 00:00

Update: See the new updated version at How To Test Mobile Websites On Desktop

How to test mobile websites with different mobile phones is a question we get quite often. It can be a tricky task indeed to try to verify that your mobile website looks the way it should on all the devices out there. 8 ways to test mobile site on desktop Even if you aim to be selective, you probably want to support iPhone, Android, Windows Phone, BlackBerry, and some semi-smartphones, and it's still a big bunch to test. And perhaps you should also consider feature phones, which still make up 50%+ of the total market. Whatever the case, manual testing can be very time consuming – and costly, if you were to purchase all key devices. In this blog series we will take a look at various different online and desktop services that can used for testing how mobile websites work on different devices.

For our Mobile Joomla! Pro users we’ve tried to make it as easy as possible to do basic testing to see how the site looks on various devices. Mobile Joomla! Pro includes back-end device simulators with which one can easily try out how the chosen settings affect the Joomla! site on the iPhone, Android/smartphones, and features phones. While it may not completely remove the need to test advanced features with a large variety of devices, our aim has been to make it fast and easy for professional users to make adjustments to their mobile site while seeing the results at the same time.

Before we get started, it is important to understand that there are different ways to detect mobile devices. The detection can be done on the client-side (browser) and/or server-side, and these approaches have certain major differences. When you want to see how a site would look on a certain mobile phone model (without using the real device), your best bet for accurate results is to mimic the so called User Agent of the device. When you download a web page, your browser sends a User Agent string (UA) to the server. The string identifies the device and the browser, and this way it’s possible for the web server to detect and identify the browser as e.g. a Chrome desktop browser, a Safari browser on an iPhone, or as the native browser of a particular Android device. The server can then serve different content depending on the device (if the site is built that way - vast majority of the biggest sites are using server-side handset detection). In many cases this is the reason why simply resizing your desktop browser window may not give an accurate match of how the site would look like on a certain device. With some tools, however, it is possible to change your desktop browser’s UA string to match that of a different device for testing. We'll cover that in this series as well.

On to the series:

Part I - Opera Mobile Emulator For Desktop
Part II - Firefox Mobile Developer Tools
Part III - Mobile Emulators from Device Manufacturers
Part IV - Using DeviceAnywhere For Desktop Mobile Testing
Part V - BrowserStack: Web-Based Cross Browser Testing
Part VI - Testing Mobile Websites With Browshot
Part VII (coming up)
Part VIII (coming up)

Do you have your own tips or comments, or have we missed something? Let us know in the comments below!

 

Mobile Joomla! 1.1.1 Released

Thursday, 16 August 2012 00:00

We have released Mobile Joomla! 1.1.1 today. With the device detection library updates, for example, Android 4.0+ devices are now recognized correctly.
The new version includes following updates:

  • Mobile-Scientia device detection plugin is updated to the latest WURFL 2.3.2 (July 2012)
  • Updated the AMDD device detection library: over 900 devices, browsers and bots were added/updated.
  • Improved png compression (php 5.1.3 or higher is required)

As always, you can update to the new version from your administrative panel via Mobile Joomla! Remote Update feature, or by downloading Mobile Joomla! 1.1.1 package and installing it from the back-end. Do not forget to backup your website before the upgrade!

Remember to subscribe our RSS feed, follow us on Twitter and like our Facebook page to keep on top of all latest Mobile Joomla! news.

 

Mobile Joomla! Pro 1.1.2 Released

Wednesday, 15 August 2012 00:00

We have released Mobile Joomla! Pro 1.1.2 update. The new version includes following improvements:

  • Speeded up the remote device database by predetecting most desktop browsers
  • Updated the AMDD offline device library (over 900 devices, browsers and bots were added/updated)
  • Improved png compression (php 5.1.3 or higher is required)
  • Fixed Update via cpanel icon
  • Fixed caching issue in the case of enabled "Retina HD Images" feature
Enjoy!

Read more about Mobile Joomla! Pro.
 

400% Faster Responsive Joomla! Templates with Mobile Joomla!

Tuesday, 14 August 2012 17:07

Mobile Joomla! Responsive Template Optimizer

We all know and love how responsive templates mean fast and easy "mobile-ready" display for your Joomla! site. However, have you also heard of the shortcomings of responsive templates? Bad news - there are some. Good news - there is an easy solution for the Joomla! community. Read on!

First, let's take a look at the two major approaches to display websites on mobile devices: Client-side and server-side solutions.

Client-side solutions

Responsive templates are client side solutions, which are designed to adapt their look and content across devices, and based on the browser capabilities they are viewed. This means a single source template can deliver a consistent and good looking experience on a wide range of devices, such as smartphones & tablets. However, as described, responsive templates 'adapt', they are 'single source' and 'client-side'. In practice this means that when your visitors view your website on an iPhone, they download assets of all other devices (i.e desktops, and tablets) as well and images are downloaded in original (desktop) size and just adjusted. This usually results in several megabytes of data and hundreds of HTTP requests, and means a lot of unnecessary data usage, time and battery loss for your visitors. This may not seem a lot for a desktop visitor on a broadband, however it does matter for a mobile visitor on 3G who needs to wait 20 or more seconds for a single megabyte to download.

Server-side solutions

Server side solutions, on the other hand, can detect your visitors' device and send only the required and suitable assets. This means, everything can be known and optimized, before they are delivered to a visitor's browser. Surely, this approach needs much detailed thinking, design and implementation, and is usually more costly than other alternatives. However, if you are serious about your business and want to minimize visitor bounces and maximize their time on site, it is definitely worth the investment.

RESS

RESS

Towards late 2011, a hybrid solution was suggested to bring advantages of two worlds together and eliminate disadvantages, called RESS (Responsive Web Design + Server Side Components). RESS is neither a pure client, nor a pure server-side solution. In a nutshell, RESS optimizes certain assets of responsive templates on the server-side, so that they work and perform better on mobile devices. So, if you could somehow turn your responsive template into RESS, you could help your mobile visitors save loads of data, time, and battery life. Well, luckily, you are using Joomla!

Mobile Joomla! turns responsive Joomla! templates into RESS

Mobile Joomla! is a server-side solution, by which you can finely optimize your Joomla! website's look, modules, plugins, URL, media, and other assets on various mobile devices (i.e., iPhone, Android, iPad, etc.) with ease. As a not very widely known fact, any responsive Joomla! template could be turned into RESS when used with Mobile Joomla! That's as simple as installing Mobile Joomla! and selecting your responsive template for each device category, and voila! In a couple of minutes, and without any cost, you have a RESS mobilization solution for your Joomla! site!

Mobile Joomla! Responsive Template Selection

Mobile Joomla! Responsive Template Analyzer™

We built Mobile Joomla! Responsive Template Analyzer to test responsive template performances with Mobile Joomla! The tool turned out really great and we decided to release it for everyone to benefit! Now you can test your Joomla! website and see the performance boost you could get by turning your template into RESS using Mobile Joomla! The tool simply analyzes your website assets and tries to estimate what kind of performance increase you would achieve. We say "tries to estimate," since there are many variables and it's not possible to know exact figures until you install and use Mobile Joomla! on your site.

Mobile Joomla! Responsive Template Analyzer

We tested some of the most popular responsive Joomla! templates out there, and saw that some Joomla! websites would perform 400% faster on mobile devices, if they were using Mobile Joomla!

Mobile Joomla! Responsive Template Analyzer Report

Now go ahead and test your website with Mobile Joomla! Responsive Template Analyzer and check the Analyzer report to see the potential performance boost you could get. Then download Mobile Joomla!, install and improve your responsive Joomla! template performance on mobile devices for real, for free. If you are happy with the results, just recommend others the same and support us.

If you have any further questions or comments, let us know below!

Further Reading on RESS
http://www.lukew.com/ff/entry.asp?1392
http://www.netmagazine.com/tutorials/getting-started-ress
http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972

Image by .net magazine

 

Supercharge Your Mobile Site: Mobile Joomla! Pro & Mobile Joomla! Club Are Here!

Thursday, 12 July 2012 00:00

Mobile Joomla! ProWe have worked really hard for a long time. Now we couldn't be happier to finally release Mobile Joomla! Pro and Mobile Joomla Club for you to take your mobile world to the next level!

Mobile Joomla! Pro includes advanced features for those who want more features and better performance: Remote device detection, iPad support, Online device simulator, Backup & restore and more, all included in this amazing product.

You will love Mobile Joomla! Pro! Why? If all these great features are not enough, check out more reasons below:

  • No more large database space needed: Remote Device Detection doesn't require manual updates, and makes sure your mobile website always supports latest devices.
  • Test your mobile website on the fly on latest devices with online device simulator.
  • Backup, restore and transfer your Mobile Joomla! Pro settings and ease up your multi site management process.
  • Get faster page loads, reduce bandwidth usage, and offer smoother user experience with your responsive template

What's more, for those who want it all inclusive we have launched a special subscription package: Mobile Joomla! Club, which includes Mobile Joomla! Pro, Elegance Mobile Joomla! Template, JComments Mobile and Kunena Mobile Extensions, in addition to all free Mobile Joomla! extensions!

Check out the Mobile Joomla! feature comparison chart.Mobile Joomla! Pro HD image support effect
Above: Mobile Joomla! HD Image support

Crazy Launch Specials

To celebrate our biggest launch to date, we have arranged some crazy launch specials!

Purchase Mobile Joomla! Pro or Club and receive massive value pack!

If you are not among the first 20, don't worry; we have more crazy deals for you! For a limited time, if you purchase Mobile Joomla! Pro or Club, you will receive the massive value pack below! (Limited time only. Applies to both Mobile Joomla! Pro and Club plans, but offer package limited to 1 per customer)

  • Free 3 months hosting from the top Joomla! hosting provider CloudAccess.net
  • Free copy of Mobile Joomla! Official Insider's Guide ebook
  • 30% discount on all AcyMailing products
  • 25% discount on JoomlaBlogger's brand new ebook Blogging With Joomla!
  • 25% discount on all OSTraining training plans
  • 25% discount on all Joomla-Monster templates
  • 30% discount on Admincredible multi-site management service

Thanks to all our friends!

We'd like to thank all our friends who help us to bring this crazy launch specials to you!

AcyMailing is a Joomla! component allowing you to maintain real communication with your contacts via e-mail marketing, newsletters, follow-up autoresponders, marketing campaigns, etc.
It is seamlessly incorporated into Joomla and provides professional features enabling you to keep you in permanent contact with your subscribers. Have you struggled with similar extensions in the past? AcyMailing will save you time and make your life easier.

CloudAccess.net - Your Joomla! site launched instantly. Just find a domain and go! CloudAccess offers Joomla! Platform-as-a-Service. You get hosting on premium equipment, managed backups, Joomla! phone support, email, and lots more.

Joomla-Monster.com is a unique online store for Joomla! end-users but, thanks to different subscription options, it becomes a really attractive platform for Joomla! based websites developers. Quality of our templates together with their functional capabilities can be appreciated while viewing their demo versions and tutorial movies. Our offer is varied and everyone will find something for themselves. Frequent and generous discounts are also worth mentioning.

OSTraining provides online, in-classroom, and on-site training for Joomla and more. Over 7,000 members learn with OSTraining online with a 1, 6, or 12 month subscription. OSTraining specializes in explaining Joomla in terms that anyone can understand. If you've ever struggled to learn Joomla, OSTraining is the answer with hundreds of videos and friendly support staff to answer all your questions.

Admincredible is one dashboard for all your Joomla 2.5 and 3 sites. Whether you have 5 Joomla sites or 500, you monitor them and update them with just one click of a button.

 

JoomlaBlogger is the site for Joomla! news and information since 2009. The brand new Blogging With Joomla! ebook reveals all the secrets learnt about using Joomla as a blogging platform also for numerous client sites. This knowledge can be used by anyone using Joomla!, not just those who want to build a blog.

 

Now download Mobile Joomla! and go check out Mobile Joomla! Pro product page for documentation and FAQ. If you have questions we are there to answer all your questions at Presales Forums before you buy Mobile Joomla! Pro.

 

Page 7 of 15

«StartPrev12345678910NextEnd»

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.

I accept cookies from this site.