Does your website load in under 3 seconds on a phone, tablet or PC? If your site does not load in 3 seconds, then you have immediately lost 50% of your customers. Performance is critical to the success of your website, and Google is stepping up and providing you a great tool to test your site: https://testmysite.withgoogle.com
Using Google’s Test My Site
The world is going mobile first. Google has a tool you can use to help test your website. The device is called Test My Site and has the friendly URL of https://testmysite.withgoogle.com
The test is easy to do. Enter your web address and select “Test Now.” The test takes about 60 seconds to run. When the test is complete, you have a report that you can use to drive direction to improve your site’s performance. The goal, as always, is to stop people from leaving your site.
Analyzing the Test My Site report
The report you receive back from Google highlights three main sections:
What is interesting is that the focus of the report is not “how does your website respond on a mobile device” but “how does your app react in a Mobile First world” where Mobile is the primary device by there are many secondary devices, too.
As you might expect, the Mobile Friendliness section looks to see how your site behaves with responsive design. There should be no excuse for having a site that is not responsive. Everyone should get a 99/100.
As a frame of reference, the first time I ran the tool I was running my site with no compression tools and my result was a meager 24/100 for speed. I added an image compression tool and dramatically increased the performance of the site.
The goal is for you to speed up your website. Run the test and analyze the results.
The end of the day we need both, but it is always good to keep a close eye on the mobile web vs native app argument. The following infographic explains the pros and cons. To be clear, I think you need both web and app to be successful – just don’t make them the same thing.
The concept of “pages” in jQuery Mobile is not individual HTML documents but a classified section in between the BODY element on one document. This means you can have many “pages” in one HTML document. For instance, the following will add one page:
Each page has content you can format in it. This can include HEADER, FOOTER and elements such as BUTTON, FORM FIELDS and many more widget. The jQuery Mobile web site has a complete list of custom features you can add.
When you have completed your HTML editing, your page may look like this:
<DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>jQuery Mobile Web App</title>
Adobe is expanding the tools in the PhoneGap line to now include PhoneGap Developer App. The Developer App essentially allows you to run PhoneGap projects you are developing on your computer easily an Android and iOS devices.
The following video steps you through what you need to know to get started with PhoneGap Developer App for Android and iOS:
Here are the steps:
Install PhoneGap Developer App on Android or iOS device
Open Terminal/Command window and install the latest version of PhoneGap: $ sudo npm install -g phonegap
Create a new PhoneGap App or Open an existing app: $ phonegap create myDev
Step into the app: $ cd myDev/
Launch the Developer service: $ phonegap serve
What is now happening is that a Web service is running on your WiFi network. You can connect the PhoneGap Developer App on your device to the IP address that is being broadcast in three steps:
Open the PhoneGap Developer app on your device
Enter your IP address
You can now view your app on your device. The following screen shot shows the app running on a Nexus 7:
This is the first release of the PhoneGap Developer App and future releases will include support for Windows and Plugins. Not a bad start.
There are lots of different ways to build mobile web sites. What I have pulled together is a collection of techniques that our teams use to allow your web site to look awesome on mobile devices. This is important due to the rapidly increasing demand for web sites optimized for the growing number of wireless devices.
The Mobile Web is a Many Screen World
The mobile web is not just Smartphones like iPhone and Android phones. The mobile web is anything that can connect to a web site. The term “mobile web” is now a reference term for multi-screen solutions. This means that Tablets, Laptops and even TVs are part of the mobile web. If it has a screen, it is likely it has a Web browser and will view your site.
Your Web site analytics are showing you how many different devices are connecting to your Web site. Google will breakdown PC and Mobile. Dig into the Mobile analytics and you will see all of the different screens (phones, phablets, tablets, etc.).
Mobile Web Templates for Content Management Service
Many of us use CMS (Content Management Service) solutions to deliver content to Web sites. This will likely come as no surprise, but many of the leading Web CMS solutions now have templates that will deploy a mobile web template to ensure that the correct experience is deployed to a device.
WordPress, a tool used by many Web sites, has two ways of managing Mobile content. The first is through Plugins. The popular WordPress Jetpack plugin has a “Mobile Theme” that only requires you to activate the theme and your site will re-structure the content for phones and tablets. The second method is to implement a responsive theme. The goal of a responsive theme is to ensure that your site looks awesome for any screen. Check outwww.visualizetheweb.com as an example of a responsive WordPress template in action.
Responsive Design for Mobile Web
A big trend is the adaption of Responsive Design. The goal of a responsive site is to create one web page that will dynamically resize to the device and screen size viewing the content. Check out www.mashable.com as a good example of responsive design.
The biggest challenge for Responsive Design is a lack of design tools. Adobe, as you might expect, has two tools you can use: EDGE Reflow and Dreamweaver CC. Both tools will give you the capability to create Responsive designs for your Web site without having to write code.
Leveraging Mobile Web Frameworks
Sometimes you need to go the functions of a template or tool and need to edit the code. Fortunately there are some great frameworks you can leverage to accelerate the deployment of your mobile web site. Here is a selection of frameworks you can use (it is not complete and I encourage you to share any additional frameworks in the comments below):
You will often hear me talk about the “stickiness” of mobile apps. They just are. When you are in an app you are wrapped in the world of the experience. No distractions, no way to be “just one click away” – you are immersed.
But, the web is still amazingly important. This is the reason why a mobile Web browser is one of your “go to” apps along with your phone and email. You need the web.
For this reason, I do not believe there is an argument of “native app vs mobile web” – I think it is a case of “you need both, as both serve different needs.”
The Communication Channel for Mobile Web
It is wrong to assume that your mobile web site and app will do the same tasks. They simply don’t. The focus for an app is to drive specific tasks from your phone or generate a deeper experience on a tablet. Your Web site is your tool for communication.
The good news for creating your mobile Web experience is that the number of tools for you to use is growing. For instance, you have the following:
WordPress and CMS tools often have Mobile Web Templates you can use to deliver an optimized experience for phone and tablet
Tools such as Adobe’s EDGE Reflow give designers the tools to create responsive Web site design without writing code.
The need for creating a mobile experience is one you probably already know: your customers are using mobile devices to view your Web site. Just remember that creating a responsive design means that you adhere to the design guidelines that Apple and Google have established to ensure that the experience is inline with the mobile OS and hardware (phone or tablet) viewing the content.
Let me know what lessons learned you have gained through developing a mobile Web site.
There is a war of words in the development community when it comes to the core approach to mobile app development: use cross platform hybrid development or use native languages.
There is a strong argument for both.
The place where Hybrid development starts to fall short is when there is a need for a complex solution that leverages native APIs on the device, interfaces with complex back-office systems (such as your ERP or CRM) or needs to scale to millions of users.
Native development refers to building solutions on a platform that are based on the recommendations from the OS owner. For instance, Apple recommends working with Xcode and Objective-C for iOS development, Google recommends Eclipse with Java/C++ and Microsoft recommends Visual Studio and C#.
Each of these development environments and languages are not new. They are mature, stable and have proven their effectiveness in millions of applications. At one point in time it was expensive to hire iOS and Android developers but there are more people now with these core skills and the prices point between Hybrid and Native developers is closing.
Native Development gives you access to mature frameworks and APIs. In particular, iOS is now on greater than 78% of all iOS devices, giving developers a unique opportunity to develop with the latest and greatest APIs (such as iBeacon) without requiring the need to support a decade of legacy devices.
Which is Better: Hybrid or Native?
At the end of the day, there is an argument for both. My preference for consumer solutions is to always go native, but there is no reason why POCs should not be done in PhoneGap to validate a solution.