Testing Mobile Websites With Browshot

Friday, 30 November 2012 16:30

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

It's been a while since we posted our last tip on this series. But we're not finished yet! Today we'll proceed by introducing Browshot.

Browshot is a service to easily create screenshots of web pages in any screen size, as any device: iPhone, iPad, Android, Nook, PC, etc. The service is simple to use: you get to select a mobile device, the screen orientation, and then you can request a screenshot of any website. The shot will be generated using the Browshot's virtual browsers and delivered to you almost instantly (they mention an average of 15 seconds).

There are a few limitations, however: First, there’s a quite limited set of mobile devices; Second, apparently the screenshots are cached for 24 hours, so same day changes with the exactly same URL won’t show up (this could be bypassed by adding empty parameters to the URL, or using their API). For high-volume customers the firm also offers customizable browser setups (e.g. any screen size ratio).

Works on: Any browser
Requirements: N/A
Price: Browshot uses credits system for paying for the screenshots. Mobile shots take 2 credits. You can get 20 credits for free for signing up to their newsletter and sending a tweet. Credits are sold in packs starting from $1 per 10 credits and up to $1,000 per 300,000 credits.

Pros

• Very easy, simple, and fast to use (the average time, including page load, to finish a screenshot is just 15s).
• Affordable pricing for small batches.
• Configurable - each feature (Flash/HTML5/CSS/JavaScript/Image loading) can be enabled and disabled on demand. They also have an API.

Cons

• Limited device selection.
• Iterative development difficult with only screenshots - also, the service caching can be a nuisance.

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

Mobile Joomla! Pro and Elegance Mobile Joomla! Template 1.2.1 Released

Thursday, 08 November 2012 00:00

Hey there! A quick note that we have just released 1.2.1 updates to Mobile Joomla! Pro and Elegance Mobile Joomla! Template. The new versions include the following improvements:

Mobile Joomla! Pro

• Separate setting for jpeg quality of retina images: you can now choose the jpeg quality level (0-100%) used for retina images.
• Improved support for Windows Phone 8 in the offline version of Mobile-AMDD plugin
• Support for device=auto parameter, which can be used to reset mobile view mode (domain.com/?device=xhtml | iphone etc.) to default mode. (Can be useful in case your browser has any issues switching between modes)

Mobile Joomla! Retina image scaling setting

Elegance Mobile Joomla! Template

• It's now possible to use also jQuery Mobile 1.1.0 (backward compatibility with Elegance 1.1.x) instead of jQuery Mobile 1.2.0
• Added support for anchor_css parameter mobile menu module
• Fixed onBeforeCompileHead event
• Fixed possible "Strict standards" notice in Joomla! 1.5

Responsive Design Vs. Server-Side Solutions With Mobile Joomla! And BraveNewCode (Podcast)

Tuesday, 06 November 2012 15:00

Hey all, we're announcing a new smashing, fresh, right out of the oven podcast for you to listen to! We did an interview for a podcast on Dev1.tv together with BraveNewCode's (the WPTouch guys) Co-Founder Dale Mugford. The topic was Responsive Design Vs. Server-Side Solutions. Go and listen to it now!

In the podcast, we discuss and compare some of the main points regarding responsive design and server-side mobile solutions, which are sometimes referred to as “dynamic serving” – like Mobile Joomla! and the WPtouch plugin. 

In this article, we'll provide a summary of the topics discussed in the podcast, as well as some additional material. Read on!

Overall, the differences between responsive design techniques and server-side approaches can be broken down into four categories:

Technical

One of the significant benefits of server-side solutions is fast and efficient delivery of content. Many studies and surveys have shown that people are only willing wait around 4 seconds for content to display on smartphones.

The server-side solutions can deliver mobile pages that are up to 500% smaller than their desktop counterparts by serving images optimized for the client browser and removing unnecessary scripts from being sent to the client at all. These things are not technically possible in the responsive approaches currently.

The server-side optimized pages also load up to 400x faster which is critical for low bounce rates and higher page views. While mobile cache limits are easily exceeded, so that the website assets need to be requested over the air over and over again, heavy sites can also significantly slow down, and even crash some mobile browsers.

Some have argued that Google has recommended responsive design as the preferred solution. Well, Google isn't really recommending responsive design for all. What they really say is that you should build a site that makes sense for your users. Elsewhere in the news, you might have noticed Google and Microsoft stating “Every millisecond matters” - people will visit a website less often if it is slower than a close competitor by more than 250 milliseconds (250 thousandths of a second). Speed matters.

In any case, if you are using a responsive template, you better pay attention to how well your site really is optimized, after all, for mobile. It's not just the layout, it's the page size and loading time as well. You can try our Responsive Template Analyzer to estimate how much you could improve your Joomla! site's mobile performance if you had Mobile Joomla! installed to optimize your site on the server-side. Read more about the client-side and server-side differences and responsive server-side development.

Design

Designing a good mobile user experience is much more than just making sure that the logo looks the same across various browsers and screen sizes. Good design also includes usability factors and not just the visual layout. Server-side solutions put focus on the content formatting requirements. This ensures a polished, dependable design is provided for all site visitors regardless of the device.

Server-side solutions can, however, require additional work in order to maintain similar branding across devices. The fact that the responsive design is based on a single set of styles used for all devices that provides consistent design, is probably its strongest benefit. Although, many semi-smartphones and feature phones may have serious problems coping with the size of the responsive pages, as well as non-supported scripts and other styling.

Content

The differences between the approaches are clear when it comes to content that is inappropriate for mobile visitors. With responsive design, the inappropriate content is sent to the client device and only ‘hidden’ through stylesheet formatting. With server-side solutions webmasters can specify the content that is not applicable to mobile visitors - and the content will not be delivered to their devices, further streamlining and optimizing the mobile display of content.

Maintenance

It's often said successful responsive design should start "mobile first." Day to day maintaining of responsive design may mean reliance on expert web designers who have strong enough grasp of both mobile technologies and mobile design skills. Also, responsive design best practices are a very much still work in process.
On the contrary hand, many server-side solutions are built to be convenient to handle for the site owner, using easy-to-use interface to apply updates and changes.

Now listen to the full Dev1.tv “Responsive Design vs. Alternate Mobile Solutions” podcast!

Further reading:

Weighing Options: WPtouch, Responsive Design and Your Mobile Strategy by BraveNewCode.

--

What do you think about the topic? Let us know below in the comments!

Mobile Joomla! Recommends SiteGround Hosting

Thursday, 25 October 2012 00:00

Please see a special deal for Mobile Joomla! community at the end of this post!

Choosing a hosting company is one of those decisions that many don’t ponder for too long, but might end up regretting sometime later. A good hosting service is kind of invisible - when everything works and potential issues are handled quickly and thoroughly, you don’t think about it at all in everyday business. But if things go wrong, it surely affects your whole web business, sometimes with detrimental results. Even if there are no catastrophes, you might end up in surprising obstacles and time-consuming issues when you have a need to change some advanced settings or extend the functionality.

The perfect website hosting is fast, reliable, affordable, and totally secure. Also of essence is that it is always possible to get fast and helpful responses to any support questions and requests. And when Joomla! is the platform of choice, it’s great if the hosting partner also understands Joomla! and related needs and requirements. For us it’s also important that Mobile Joomla! runs perfectly on a hosting environment.

SiteGround’s servers are perfectly optimized for running Joomla! and we’ve tested that Mobile Joomla! runs great in Siteground’s environment as well (something that isn’t always granted). They ofer shared hosting, semi-dedicated services, cloud VPS and fully managed dedicated solutions. Furthermore, a benchmark speed test commissioned by SiteGround in May 2012 showed that SiteGround reached better results than the majority of 17 leading general hosting companies as well as a few Joomla! specific companies (think BlueHost, DreamHost, FatCow, GoDaddy, Rochen, etc.), using the same Joomla! installation with sample data.

Here are some of the distinctive features of SiteGround that we favor the most:

1. Three global geolocations
   Siteground has datacenters in three geographical locations, in the USA (Chicago, Illinois), Europe (Amsterdam, The Netherlands) and in Singapore Each customer can choose where to host his/her website and achieve the maximum loading speeds for the targeted markets.
2. Unique Shared Hosting Security
   Shared hosting is the most massively used, but since it accommodates many users on one server, there are some inherent security problems. For example, on a shared server it is common for a whole machine with hundreds of active websites on it to be down due to a single vulnerable account. One of SiteGround’s inventions is unique software that isolates shared hosting accounts in a way no one has done before. It isolates the accounts from each other and does not allow the whole server to be affected through a single user.



3. Unique Server Setup For Maximum Loading Speed
   SiteGround has deployed a unique combination of hardware and in-house customized software to form a setup that’s been architected and tested to brings up the best results, i.e. amazing loading speed to users. They currently run powerful hardware with RAID and store MySQL on SSD hard drives. Also the Apache and the PHP handlers are tweaked to provide the fastest performance possible, supported by their custom caching mechanisms.
4. Unique Server Monitoring For The Best Uptime
   Another piece of software invented by SiteGround is a proactive monitoring system that sees the server status in real time and resolves more than 90% of the server performance issues instantly, with no human interaction needed. That means there will be not be typical cycle of first detection time of several minutes and then a reaction time of several minutes that add to cumulated downtime.



5. Fast and Secure Joomla! Installation
   SiteGround provides a thoughout tutorial and Softaculous, a quick installer, to get Joomla! up within seconds. SiteGround also has developed a security extension, jHackguard, to protect Joomla websites hacking attacks like SQL Injections, Remote URL/File Inclusions, Remote Code Executions and XSS Based Attacks.
6. Fast Support
   SiteGround has 24/7 ticketing, phone, and chat support. They advertise average ticket response time of 15 minutes, average phone call wait time of 5 seconds, and no practical wait time with online chat.

As a Joomla user, you can also get free Joomla tutorials, free Joomla templates and extensions along with the standard features you’d expect from a hosting provider.

A Special offer for Mobile Joomla! community

We at Mobile Joomla! have partnered up with SiteGround and recommend their service if you are looking for a new hosting provider, which also performs well on mobile.

Celebrating our cooperation, we want to introduce a special deal for you: If you sign up using the link below, you will be eligible for a -40% off special deal for Mobile Joomla users.

Get -40% SiteGround Hosting deal! (just follow the link and click the "Get Started" button to register!)

Let us know your comments and feedback, and spread the word on Twitter and Facebook.

Mobile Joomla! 1.2 with Joomla! 3.0 Support

Wednesday, 10 October 2012 00:00

We just released Mobile Joomla! 1.2, Mobile Joomla! Pro 1.2 and updates to our mobile extensions. Updates mean a lot of new and exciting features:

Joomla! 3.0 Support

Joomla! 3.0 was released recently with a lot of new features, and one of them is support of Bootstrap CSS framework. Using this framework it’s possible to create web UI that adapts different screen sizes (like responsive templates). Joomla! 3.0 includes two such templates: protostar for frontend and isis for backend.

If you read our article about Responsive Templates with Mobile Joomla!, you probably noticed that sooner or later, having a pure client-side website layout adaptation will not satisfy those who look for a better than great mobile user experience. Mobile Joomla! can also be used to truly optimize your Joomla! website performance on mobile, regardless of the Joomla! version you use. With Joomla! 3.0, in addition, we look forward to more standardized extension development guidelines, which hopefully will make it easier to support a wider variety of extensions on mobile, something that has been quite time consuming until now.

To quickly sum up, using Mobile Joomla! with Joomla! 3.0 and responsive templates means following benefits;

1. Significantly lower page sizes: Mobile Joomla! will serve the best possible images for a mobile device, which means significantly less data, faster page loading times and eventually more visiting time on site, more pageviews, and lower bounce rate. For advanced users, "retina" or HiDef images are also supported by Mobile Joomla Pro without any additional JavaScript-based solutions.
2. Custom mobile homepage: Easily serve a custom page for your mobile visitors, increase your conversions and avoid problems with extensions that are not mobile friendly.
3. Custom mobile title: With Mobile Joomla! you can set a custom title on mobile. This means better SEO, as well as handy for those who'd like to add your site on their home screen or bookmarks.
4. Built-in mobile testing: With Mobile Joomla Pro you can use built-in simulators to test your site design on Samsung Galaxy Note, iPhone 4, iPad, Nokia 3510i and NEC N341i.

Note: JComments Mobile Joomla! Extension and Kunena Mobile Joomla! Extension don't work with Joomla 3.0, as the parent extensions are not Joomla 3.0 compatible as of now.

Extensions Manager

One of the reasons Joomla! is very popular is likely because of its simplicity and versatile extensions. Currently there are more than 10,000 extensions in the Joomla! Extensions Directory. Some of these extensions work well in mobile browsers, some require minor changes in CSS to make them look nice, but at the same time there are many extensions that work well on desktop only. And most of such extensions are just simple content sharing buttons, lightboxes, etc.

With Mobile Joomla, it's very easy to exclude some modules from the mobile template since mobile templates have another set of module positions. But what to do if this extension is a plugin that is run on every page? Or what to do if you use a responsive template, and the same modules are displayed in both the desktop and the mobile versions? Or you would like to display a QR code on desktop, but hide it on mobile?

They were tricky questions, but with this Mobile Joomla! release we have implemented a new feature that allows to disable modules and/or plugins on mobile pages.

Here's how it works:

Extensions Manager Menu

Extensions Manager view

Pretty neat, huh? We thought so as well.

There is one only limitation: it's impossible to disable plugins of the "system" and "mobile" groups. The plugins of the first group are loaded by Joomla! before Mobile Joomla! starts to work (and there is no way to "unload" them), and the latter ones are used to detect mobile devices by Mobile Joomla! itself.

Auto Health Checkup a.k.a. "Please-don't-do-it-that-way"

This feature was a part of Mobile Joomla! Pro starting from its first release, but we found it so useful that we decided to add it to the Mobile Joomla! as well, so that everyone can benefit. The feature includes testing of most common setup mistakes done by users, like assigning a mobile template to a menu item, having menu items with identical aliases (possible in Joomla! 1.5), forcing mobile mode in cookies, etc. We believe this will safe a lot of our newer users from frustrating errors, and make sure even experienced ones don't make accidental mistakes. 

Updated Mobile Device Database

In Mobile Joomla! 1.1 we introduced a new database, Advanced Mobile Device Database (AMDD). It is targeted towards those users who want to make sure they only have GPLv2-compatible files installed on their server. (The other device database plugin we offer during installation is TeraWURLF provided by Scientia Mobile under AGPL license.)

The AMDD update includes an improved detection code for faster detections, and an updated device list. As a result the database contains now more than 13,500 browsers, while keeping the database size in less than 3 Mb.

Mobile Joomla! Pro 1.2

Mobile Joomla! Pro 1.2 contains all changes in Mobile Joomla 1.2 and some other fixes that our Pro subscribers can find on the Release Notes page.

Elegance Mobile Joomla! Template 1.2

Elegance Mobile Joomla! Template has been updated to use the latest jQueryMobile 1.2, which works faster and is more stable than jQueryMobile 1.1. It also contains some additional features, one of which is "popup" elements. That now works with Elegance template as well, see below:

A mobile site front page view with a Menu button

Popup element after tapping the Menu button

To transform your module into such an element, just set it to use the "popup" style (read more in Elegance documentation).

Full list of Elegance fixes/changes can be found on Release Notes page.

Other Mobile Joomla! Extensions

Following extensions have been updated, together with 1.2 release: Google Analytics Mobile, Adsense Mobile, Youtube Mobile, Mobile Content, and Remove Support Ads .

BrowserStack: Web-Based Cross Browser Testing

Friday, 05 October 2012 16:25

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

BrowserStack is a web service that offers a complete range of browsers for cross browser testing. The service is available online instantly without any downloads or installs.

While the service started with desktop browsers, it now also includes official mobile emulators of iOS, Android, and Opera Mobile, so you can test how the sites work on iPhone, iPad, various Android devices, plus some others that support Opera Mobile (see full device list). BrowserStack also features advanced functionality like local tunnel testing of private sites and pre-installed debugging tools.

Works on: Windows, Mac OS X (Linux coming soon)
Requirements: You don’t need to install anything, just need a browser and Flash.
Price: Free trial for the first 30 minutes of testing. Then starts from $19/month for an individual user, up to $169/month for 25 users.

Pros 

• Instant access to iOS, Android, and Opera Mobile emulators (+ all major desktop browsers) 
• No installation required
• Advanced developer tools

Cons

• Limited amount of different mobile devices available
• Needs a good block of available memory to run

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

Using DeviceAnywhere For Desktop Mobile Testing

Monday, 01 October 2012 00:00

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

Keynote DeviceAnywhere provides testing access to a huge variety of mobile devices. The specialty of the service is that they actually make use of remote connection to real devices – so it's the real thing you are testing against, and not just an emulator. DeviceAnywhere's service can be used for testing of mobile websites as well as HTML5 hybrid apps and native apps. The service is a bit skewed towards testing apps, though.

Works on: Windows, Linux, Mac OS X
Requirements: To test your mobile site with DeviceAnywhere, you need to sign up for an account. After you have obtained an account, you can download and install their software.
Price: There’s a three-hour free trial with a limited selection of devices. Additional testing prices start from about $20 per hour up to $250 monthly subscriptions.

Pros

• Easy to use.
• Great device selection.
• Test using real devices.
• Lots of advanced functionality available for automating tests etc.

Cons

• Can get costly if you’re on limited budget.
• Clunky/slow Java UI.
• Since they use real devices, those may sometimes be broken or unavailable.
• The test phones only have U.S. operator networks available currently.

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

Mobile Emulators from Device Manufacturers (OEM)

Thursday, 20 September 2012 16:46

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

Device Manufacturers, or OEMs, typically provide desktop emulators of their platforms. Often these are aimed more toward native application development, but they can also be used for mobile website testing. Typically the emulator provided by the device manufacturer or OS provider is the closest-matching alternative to real device testing, although it’s not always the case. In the following we will present some of these manufacturer tools.

Safari Developer Tools - iPhone/iPod/iPad 

Ok, we will start with this even though it's not really an emulator - but provided by Apple nevertheless. The Safari browser can be used to test out mobile website by changing the browser's User Agent string. Safari developer tools enable modifying, debugging, and optimizing (mobile) websites. Apple naturally has also SDK and emulator for native app development.

Works on: Windows, Mac OS X, Linux
Price: Free
Requirements: Install Safari browser on your desktop and enable Develop menu in the Advanced tab of preferences. (See a detailed tutorial as needed.)

Pros

• Simple to install and use
• Comes with Web Inspector, Error Console, JavaScript Debugger and Profiler
• Convenient user agent switching

Cons

• You will need to manually import other, non-Apple mobile user agent strings

Extra mention: There are also some (typically quite simple and possibly not-so-accurate) device-specific 3rd party solutions like iPad Peek, iPad Emulator, and iPhone4Simulator.com.

BlackBerry Simulators

BlackBerry simulators are provided by RIM for web developers to do BlackBerry compatibility testing on various devices. There’s support for keyboard, and trackpad/trackwheel/trackball input. The tools also allow running and debugging BlackBerry applications on desktop computers.

Works on: Windows, Linux and Mac OS X
Price: Free
Requirements: VMware Player on Windows or VMware Fusion on Mac needs to be installed.

Pros 

• Most of the typical device functionalities, even advanced like push notifications, can be tested. Very close to real device.

Cons

• Complex SDK, so there may be installation and other issues if you’re unlucky, and if you only want to test the browser, installing whole SDK is redundant.

Windows Phone Developer Tools

Windows Phone Emulator is a desktop tool to emulate Windows Phone 7 and up. Installation gives you a mobile environment where you can test, view, and debug Windows Phone apps and use the browser to check websites.

Works on: Windows 7 32-bit, Windows 7 64-bit, Windows Vista SP2 32-bit, Windows Vista 64-bit (XP not supported nor virtual machines)
Price: Free
Requirements: You need to download and install Windows Phone Developer Tools

Pros

Full-blown SDK with device emulator; allows for in-depth developer access to e.g. check on device peripherals, processor speed, RAM, display resolution and GPU • Lots of language versions available

Cons

• Only works on Windows
• Heavy and complex SDK with lots of requirements
• Some complaints about slow performance

Android SDK Emulator

Android SDK and included emulator enables you to create a virtual mobile device on which you can run Android applications and test mobile websites. It has Android system stack and includes preinstalled applications that you can access. You can find the emulator inside Android SDK package.

Works on: Windows, Mac OS X, Linux
Price: Free
Requirements: You need to download and install the Android SDK before you can launch Android Emulator to run the browser to test your site. It is recommended that you use Eclipse Classic version, or a Java or Eclipse RCP version for running the Android SDK. Before doing this, make sure that you also have Java SE Development Kit (JDK) installed on your computer. In order to use the emulator, you must also create one or more Android Virtual Device configurations where in each of them you must specify which platform to run, which hardware to use and which emulator skin is your choice. You can also run Firefox Mobile on top of the Android SDK.

Pros

• Full-blown SDK with device emulator; allows for in-depth developer access to e.g. telephony, SMS, and SD card emulation, Geo location, extensive logging capabilities. Very close to real device.

Cons

• Complex SDK with lots to install. Lots of unnecessary stuff if you just need the browser to test mobile websites.
• The Android SDK is quite slow – it might be better to use an image from android-x86.org in VirtualBox (+more tips)

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