Responsive Web Design vs. HTML5

When discussing the different options when it comes to building a mobile website, two different things usually come up; responsive web design and HTML5. Both of these methods help to optimize your existing website so that it is easily viewable on mobile devices without the hassle of pinching, sliding, scrolling, and zooming in and out. They are both viable options depending on what it is that you want to accomplish. However, if you are not yet familiar with mobile marketing and all that it has to offer, you can easily confuse the two. Here, we will give you a basic rundown of what each type of technology offers and let you decide which method in the responsive web design vs. HTML5 debate is best for you and your company.

real_web

What is HTML5?

HTML is a coding language that most people use to build websites. In fact, if you already have a website, you have probably already dabbled in HTML coding a bit. If you didn’t personally, then you probably hired a developer to do it for you. As time has passed, HTML has been modified and has experienced a lot of new developments, features, and elements. HTML5 is the 5th revision of HTML and has simplified a lot of things while also bringing several new features onboard such as the ability to handle media files straight out of the code.

What is Responsive Web Design?

HTML has been around since 2007, but responsive web design surfaced more recently in 2010 when it became apparent that there was a need to display websites across multiple different sizes of devices. Since the number of screen sizes started to quickly expand with the arrival of smartphones, tablets, and other mobile screens, web developers realized that they would not be able to keep up with this ever expanding pool of screens, so they developed a set of design principles that allowed any website to be displayed perfectly on any size screen. These design principles are known as responsive web design.

Responsive Web Design vs. HTML5

HTML5 is a specific technology, or a set of technologies that you use to make your mobile website function. On the other hand, responsive web design is a general approach, or set of principles, that determine how a particular website should be in order to be fully functional across all screen sizes. Their similarities lie in the fact that both are completely independent from any type of platform and both require development that is directed towards the browser. You can use any operating system, platform, or device for either. The only thing that is required is that you have a working compatible browser.

Things become confusing because this is not necessarily a “one or the other” type of thing. If you are building an all out website design, you will need to use HTML5. If you already have a website but are trying to simplify it for mobile, responsive web design will probably be your best choice. These two things are not interchangeable either. It is possible to use HTML5 with app development. This means you can use HTML, CSS, and JavaScript to create a mobile app. However, you can still create a responsive website using xHTML or HTML4.

html5-web-applications-by-ewaycorp

It’s also important to keep in mind that responsive web design is generally directed towards smartphone users. It’s great for making all elements flexible such as pages, layout, and imagery load perfectly on all screens including Android phones, iPhones, Windows phones, Apple and Android tablets, and other mobile devices that have the ability to access the internet. However, mobile broadband can be a bit slower than WiFi, so the load times for responsive design could be a bit slower than normal when out in public as opposed to being at home.

HTML5 on the other hand is a much lighter type of coding, especially when you pair it with CSS3 and other similar technologies. The simpler code allows for faster loading times even on slower internet connections. HTML5 can also make it much easier to add forms on your mobile website without having to use clunky and complicated coding. All you need to do is add the appropriate input elements. Along with this, HTML5 also gives you the ability to easily add videos, audio, and other forms of media to your mobile site. Smartphones have evolved to the point where they can now handle Flash, but HTML5 now allows you to simply embed the media right into the code without any need for plugins or additional software.

Verdict

When it comes down to it, there really isn’t necessarily a better option when it comes to responsive web design vs. HTML5. It really all depends on what you want to accomplish with your mobile website and how your end users tend to behave when browsing your website on their mobile devices. Both methods have their benefits and both methods have aspects that could be improved, but the decision ultimately comes down to what type of experience you want to deliver to your end users.

Hebrew National Uses Mobile Marketing To Drive Brand Awareness

Brand awareness is one of the most important things to keep in mind as a marketer. If people know and recognize your brand, especially if it’s instantaneously without effort like with the McDonald’s “M”, Nike’s “swoosh” symbol, or Apple’s “apple”, your success is virtually guaranteed. However, for smaller companies who do not have the big pockets like the large corporate behemoths do, mobile marketing is a cheap, yet EFFECTIVE marketing strategy that WILL build your brand awareness.

6a00d83451b71f69e2016306a85e48970d-400wi

Recently, Hebrew National launched a mobile marketing campaign to increase their brand awareness with consumers. They promoted their product through grilling tips and gave offerings to help drive consumers through their stores’ doors. Alexis Berger, the Chicago-based Vice President of Sales Midwest at Kargo, gave a quick run down of the campaign, “Around the key holidays such as Memorial Day, 4th of July, and Labor day, we are powering Site Skins to drive mass awareness for the brand. These Site Skins are actually linked to a user’s native calendar, so they can get a reminder to pick up their hot dogs.”

Hebrew National’s mobile ads work under the phrase, “Hebrew National. A Hot Dog You Can Trust. Learn More.” Consumers who tap on the ad using their mobile devices are redirected to Hebrew National’s mobile website. There they can browse Hebrew National’s products while also getting some grilling tips like basic grilling tips, safe grilling tips, and summer party ideas among others.

They also offer a feature where consumers can choose which product they want, and the store locator will locate the nearest store with that product in stock for them based off their entered zip code, city, or state. Consumers are also given the option to choose how many stores they would like to search and the farthest distance they are willing to travel.

The beauty of Hebrew National’s mobile campaign is how effective, yet simple it is. Their goal was to get the word out for their products, especially right before Memorial weekend. They also wanted to drive consumers through their doors. Couple this with the grilling tips they offered to keep their visitors engaged with the brand while also providing them with other valuable information, and you have yourself a very effective campaign.

screenshot_2013-05-28-15-10-49-1

Hebrew National accomplished all of their goals and then some. They successfully raised awareness of their brand, drove an increased number of consumers through their doors, offered quality content with their grilling tips, and actively kept their visitors and consumers engaged with their mobile website. All of this led to increased sales over Memorial weekend and a great setup for the rest of the summer. With holidays like the 4th of July and Labor Day still to come, Hebrew National will be able to use this campaign for the rest of the summer, if not longer. They were able to do all of this without advertising on TV, radio, or on billboards. Just a simple mobile marketing strategy was put in place.

Ms. Berger summed up the campaign perfectly, “We love this execution because not only does it create huge awareness, it is actually perfect in terms of functionality for how mobile is being utilized by a consumer.”

Mobile Apps vs. Mobile Websites | Infographic

When you finally decide that you want to start establishing an online presence for your company or agency, you are going to be faced with a decision. Do you want to focus on building a downloadable mobile application, or do you want to focus on building a mobile website? On the surface, they can appear very similar. However, when it comes to applying them to real life business situations, several factors, such as target demographic, budget available, your intended purpose, and required features come into play.

apps_vs_mobile_website_lead_image

Get the Anchor Mobile Infographic here!

Before you make a decision, you will obviously want to educate yourself on the differences between the two, then go through the pros and cons of using each concept. To start, both mobile apps and mobile websites are accessible on all mobile devices. Mobile websites are designed much like regular websites in that they are made using browser-based HTML pages that are linked together. They can show text content, data, photos, and videos. Along with this, they can also use features that are specific to mobile like click-to-call and location-based features.

Mobile apps are downloadable and can be installed on any smart mobile device. Once they are downloaded, they are essentially built into the phone so there is no rendering within a browser. Apps are their own entity and are downloadable from Apple’s App Store, the Android Market, or Blackberry’s App World. Apps have the ability to pull data and content from the internet or it can just download the content so that users can access it without having to connect to the internet.

Your final decision should be based off of your primary goals. If you want to keep it simple, you generally want to start with a mobile website, then move on to a mobile app later. Mobile websites are a good spot to start if you are simply wanting to establish an online presence. If you are wanting to accomplish a more specific goal, then a mobile app might be the way to go. But choosing isn’t always that easy, so we have compiled a checklist to help you get into depth when deciding between a mobile website, a mobile app, or even both.

Benefits of Mobile Websites vs. Mobile Apps

Like mentioned before, mobile websites are usually the place to start if you are wanting to get your presence felt online. However, mobile websites offer much more than just that.

blog-image

Immediacy

Mobile websites are available whenever and wherever there is an internet connection. They are also accessible from virtually any device. This includes iPhones, iPads, Androids, Blackberries, etc. Apps, however, have to be downloaded and then installed by users. This can be considered detrimental because it requires a lot of action on the user’s part and can be a big obstacle between inital engagement and dialogue between you and your users.

Compatibility

A mobile website will be able to reach across all platforms and devices. Apps have to be designed specifically for each particular mobile device. Also remember that mobile website URLs can be integrated with other technologies like SMS, QR codes, and near field communication (NFC).

Upgradability 

As far as being dynamic, mobile websites are definitely more flexible than apps. Mobile websites are easily editable and you can publish an edit across all platforms. App upgrades require much more work since you need to promote the upgrade, then hope your users download it.

Ability to Be Found

Since they can be found in search results and in industry-specific listings or directories, mobile websites are much easier for users to find. They can also automatically redirect users to their mobile site if users were looking for them using their browsers. App visiblity is unfortunately limited and will probably only show up in manufacturer app stores.

Ability to Share

To share a mobile site using email, text message, or social media, all you need to do is copy and paste the site’s URL. It’s very easy to direct your audience to a mobile site using a blog, website, or even print media like newspapers and magazines. Apps, unfortunately, CAN’T be shared.

mobileappvbrowser3

Reach

Mobile websites have far greater reach than apps due to their ability to be acessed by virtually any platform, their superior sharing abilities, and their ability to show up in search engines.

Lifecycle

According to research, mobile apps have an AVERAGE shelf life of about 30 days. Mobile websites, on the other hand, cannot be deleted and are always available for users to return to them. So unless you have a truly innovative and unique idea for an app, we’d suggest sticking with a mobile website for now.

Time and Cost

Mobile websites are usually always more time and cost efficient than mobile apps. If you are wanting a presence across multiple platforms, go with a mobile website. You can create a mobile app for every platform you want to reach, but that will require much more time and much more money.

Support and Sustainability

Maintaining and supporting a mobile app over time is considerably more expensive and tiresome than developing a mobile website. App development requires constant upgrades, testing, and compatibility resolution.

You Can Do BOTH

You can create a mobile website as a database-driven application that will act like a native app. A mobile web app can be a great alternative solution to native apps. If you like the benefits of mobile websites, but like the feel of mobile apps, this might be the solution for you.

So it appears that it is obvious that you should choose a mobile website over a mobile app. Or at least develop a web app that incorporates features from both. So why would you choose just a mobile app?

mobile_app-vs_website

When Should You Use a Mobile App?

To keep things simple, if you need to do one of the following, developing a mobile app may make more sense than a mobile website.

Interaction

If you want to design an interactive game for your users, design an app. This should not be a hard decision. Consider the success of popular games like Angry Birds or Temple Run.

Personalization

If you feel like your users are going to be using your app on a regular and constant basis, then an app may be right for you. Don’t get arrogant though. Just because you think users should be using your app everyday doesn’t mean they will.

Detailed Reporting

If you need something that can take on a lot of data while allowing you to influence it with complicated calculations, charts, and reports, then an app is the way to go. This is good for banking or investment companies.

Native Functionality is Needed

If you need something that users can access their cameras or phone processing power with, then go with an app. They can do this along with click-to-call, SMS messaging, and GPS.

No Internet Required

Native apps do not need the internet to work. So if you think your users will need to access your content or perform tasks without an internet connection, then go with a mobile app.

To put it simply, if your goals are to increase or establish an online presence, deliver content, and establish a broad mobile presence, go with a mobile website. If you intend to create an interactive experience with your users, or you want to provide something that works more like a computer program than a website, then a mobile app is what you want. Then again, you can always do BOTH and win at all ends. The choice is yours.

Tips For Creating a Mobile Website

mobile_websites1

Everywhere you look these days you can find people on their smartphones. In airports, restaurants, on the subway, at the movie theatre, at concerts; the list goes on. The fact is that 91% of all adults in the U.S. have a smartphone, and 75% of them have used their mobile device to shop. Also, smartphone sales have now officially passed computer sales. So if you don’t have a website that is mobile friendly, you are missing outon all these possible customers and clients! You may have a website right now that works perfectly fine, but if it is not optimized for mobile, your possible client base is drastically smaller. Don’t let this happen to you! Go mobile with your website today and capture those customers you wouldn’t be able to reach normally!

If you’re just starting out with the mobile movement, don’t worry, we’ve compiled a list of tips for when you start building your mobile site.

Keep Navigation Simple

Don’t confuse visitors with unnecessary information. Make sure your homepage is direct, concise, and provides information that a customer would want on the go such as your company’s phone number, address, hours of operation, and directions. You also want to ensure that any buttons or links you provide are big enough so that touchscreen users can click through without any hassle. The last thing you want to remember to do is place your contact information high enough on the page so that your visitors don’t have to search for them. You want your contact information to be easily accessible since that is one of the main reasons people will come to your mobile site.

Keep Scrolling To A Minimum

Sometimes when you visit a site that isn’t mobile optimized, you have to pinch, squeeze, and scroll just to see the information you want. Navigating from left to right can be especially annoying for end users. So when you are designing your mobile optimized webpage, you want to eliminate this. Ideally, you want to align all of your content into a single, vertical column so that visitors only have to move in two directions, up and down, when using your mobile site. If you feel you still have a lot more information to present, you can consider implementing a collapsible menu which would allow users to click on the content they desire and the rest would be hidden. Either way, you want to keep movement on the end user’s part to a minimum.

Keep Your Images and Graphics Simple and Small

Remember, you are designing a mobile site, not a desktop site. The grand images that you have on your current desktop site will probably not be a good idea on your mobile site. Having too many big, bold, and beautiful images sounds nice, but it will become burdensome on the site and will slow your pages’ load times. If images are a large part of showing what you and your company do, then you might want to condense or resize your images so that they work better for mobile devices. You can still provide a link to your main site if you feel customers might want to wait it out and look at your original images anyway.

Limit Keystrokes

If you haven’t noticed already, keeping it simple is the major theme when designing a mobile website. In fact, it’s pretty much a rule of thumb that you want to keep it as simple as you possibly can without compromising key content. To go along with this, you want to avoid creating long forms for visitors to fill out. Anything that requires a lot of typing becomes tiresome for mobile users. They don’t want to type on their mobile devices, they want to click. If your site is e-commerce enabled, only require customers to provide information that you absolutely need to complete the deal. An alternative option you could use is having users register on your main site first, so that you have their payment information and only need to ask for their username and password when they purchase something on their mobile device. If none of these work, you can always make it easy for visitors to find your phone number so they can just call you and place an order.

Make Your Call-To-Actions Visible

If you want visitors to your site to do something, make it easy for them! Any call-to-action (CTA) that you design for your site, you want to make prominent on the site. If users aren’t clicking on your CTAs, that means they aren’t designed very well, or they simply are not visible enough. Make sure your CTAs are visible or you will not see actions on the part of the consumer!

Link To Your Main Website

We mentioned this earlier, but linking to your main site is important for a number of reasons. Sometimes visitors to your site will want to navigate your main site as opposed to your mobile site, simply because of their personal preference. Other times, visitors may be looking for something that you could not provide on your mobile site, but can be found on your main site. The best place to put your main site link is usually in the footer. That is where most visitors will expect to find it.

If You Need Help, Get It

Building a mobile site can be difficult if you’re a newbie. But don’t worry, there are experts out there who can help you. We here at Anchor Mobile have all of the tools and platforms you would need to successfully set up, test, and implement a mobile website. Plus, we have extensive experience in the field and have seen what works and what doesn’t. Considering mobile marketing has virtually exploded over the last 3-5 years, NOW is the time when you want to start integrating mobile marketing into your marketing campaign. If you don’t go mobile with your website soon, you will lose out to your competition that HAS gone mobile. Don’t let this happen to you! Go mobile TODAY and see how much mobile has to offer you and your company!

Mobile Web Strategy for Small Business

Let’s play a game of pictionary here. Let’s say you are a local business and you want to produce a mobile site to draw bigger business in. What do you do?

Do you place more ad’s in the local paper? Do you make calls to your local radio station? What about more television commercials? What about a mobile website?

Aha, there’s that light bulb I’ve been waiting to see. Let me tell you how a mobile website can help your small business and help you gain more customers than you could ever imagine.

For starters, small businesses haven’t quite grasp the concept of creating a mobile presence for their business. Many reasons include, the non-realization of consumers changing their purchasing ways, business owners of small companies don’t understand how mobile marketing functions and how those functions work. They also are not aware of the effect of mobile marketing and what it can do for their company.

mobile-marketing-small-business

Statistics show, out of all the mobile searches, one in three is of local intent. 61% of smartphone users search for local content. 52% of the local searches result in calls made by the customer. While 59% of customers who search on the mobile web for local places, end up visiting the store they searched for.

Just like pictionary, begin with an objective in mind. How are you going to portray your “secret?” For your business, what do you want to do? Do you just want to bring more customers in? Do you want to get involved with your company and the community more? Generate calls to your business? Have a goal in mind, even if its small. Start small and end big.

Next, create a resolution and design it. How are you going to act out this clue? How are you going to make your goal achievable? Lay it out, create a template or design on what you want included on your mobile site. Now remember, it must be clear content, contrasted correctly, simple to read, easy to load, etc. Have keywords listed, so your company will be easy to find. Make sure your address, phone number, email, etc., is easy to access. Remember a happy customer means a happy owner.

Thirdly, in pictionary you want it to be easy to view (read) so the guesser can figure it out quickly. Same thing with designing a mobile website. You want your site to look great on a small hand held device. Code it so content is visible easily, and updated regularly.

Lastly, in three-two-one LAUNCH that thing. Promote your site so the likely increase of customers visiting increases. With good search content and (SEO) your site will be found more and more over time. The more people who visit and see your site the more likely it is to arrive at the top of a search page. As I said in an earlier blog post, reputation is everything.

Many small business owners have taken such help hints like the ones listed above and have already applied them to their mobile marketing strategy. They are finding rather quickly that results are positive. 69% of small business owners are crediting mobile sites for their business growth and believe that number will rise in the next few years.

opportunity-knocking

But, what goes up must come down. Unfortunately there is a wide gap seen today between small business who do have a mobile site to those who do not. Over 61% of small business currently do not have a mobile strategy made and are missing out on the consumers that are searching for what they may offer on a mobile device.

Owners are realizing that having a mobile-friendly site provides better service to their customer, attracts more customers even more local customers over time, and they gain a competitive advantage over all other competing stores.

There is hope though, I, and hopefully you can see the light at the end of the tunnel. 64% of small business have said that they have spent more money in 2012 than any other year towards a mobile web strategy. That number is expected to rise drastically by 2015.

We’re getting there fellow mobile friends, we’re getting there.

What’s the Difference Between Mobile Web Apps and Native Mobile Apps?

When deciding on how to build an application for mobile devices, there are two main directions you can go; you can use a native application or a mobile web application. Some companies, such as Twitter, are able to maintain both a native app and a mobile web app, but Twitter is a huge company that, unlike many of us, does not have to worry about constraints on budgets and resources. Therefore, it is a good idea to choose one type of app to start with.

applesoranges

The first type of application, the native app, is designed for certain mobile devices such as smartphones, tablets, etc. This app is directly installed onto the particular device usually through the device’s online marketplace or store. Examples of these are the Apple App Store and Android Apps on Google Play.

The second type of application is the mobile web app. A mobile web app is an internet-enabled application that has a specific use for mobile devices. Instead of using a native app from the home screen of a phone or tablet, the user accesses the mobile web app through the mobile device’s web browser. The mobile web app, unlike the native app, does not need to be downloaded to the device. For example, when someone opens up a mobile web app on an iPhone, they would open up Safari, then type in Twitter in the web browser, as opposed to going to the Apple App Store and downloading the Twitter application.

Even though they are relatively similar in their appearance, these two applications have several differences you should be aware of.

Native apps can interact with the device’s native features, information, and hardware such as the camera on the phone or the portrait and landscape settings. The mobile web app, however, has a harder time doing this since it can only access a limited amount of the mobile device’s native features. The native app has to be manually downloaded from the mobile device’s store while the mobile web app can be accessed through the device’s browser without needing to download any software. Native apps run as a standalone application; once it’s downloaded you do not need a browser to use it. Mobile web apps require a browser to be accessed. It’s also important to remember that it will be a little harder for potential customers to find a mobile web app than a native app since it’s basically like browsing the internet; they will have to manually find your app. Native apps are located in an online store or marketplace that will help the user find your app. Along with this, since native apps have to be downloaded and updated, you will have users running different versions of your app, while on the mobile web app everyone will be on the same version all the time since it is run from the browser.

It is important to note that the mobile web app is a more cost efficient solution because it doesn’t live on the mobile device. It lives on the internet so it works across all mobile devices and operating systems. Also, as mentioned before, the mobile web app is limited to what it can access of the mobile device’s features, but its ability to access these features is growing. As of right now it can access location based information, GPS, SMS functions, call functions, email functions, and keyboard functions.

When choosing which application to use, you want to remember what your business objectives are, who your target audience is, and the technical requirements of both applications and whether you are able to support them. Remember, it is possible to use both if you have the right budget and resources. But for a majority of businesses, prioritizing which app to use first is a great place to start.

What is the difference between Adaptive, Reactive and HTML5 Mobile Sites?

responsive-or-adaptive

When you finally decide to take your company website mobile, there are three types of mobile websites to choose from. There are adaptive mobile sites, reactive mobile sites, and HTML5 mobile sites. All of these are responsive web designs which are built to provide the most favorable viewing experience possible for the end user. They provide the user with easy reading and navigation of the site on mobile devices while reducing the need to resize, pan, slide, and scroll while visiting you site.

The first type of mobile site is the responsive design. Responsive design is the use of media queries to serve different Cascading Style Sheets (CSS), allowing the site to change its appearance when viewed on different size screens. This can be accomplished with just plain HTML5 and CSS.

The second type of mobile site is the adaptive design. Adaptive design includes the CSS media queries of responsive design, but it adds Javascript based enhancements to change the site’s HTML markup based off the capabilities of the device. This is also called “progressive enhancement.”

An HTML5 mobile site, or HTML5 web app, is essentially a mobile website created in HTML5 using Jquery. The end result is a mobile site that looks like a native app, functions like a native app, and can even be saved to a smart phone with a Favicon on the home screen just like a native app, much like Facebook or Twitter.

Some say the HTML5 mobile web app could be the death of native apps. This is in large part due to the availability of 3G, 4G, and Wifi networks with high bandwidth and fast smart phone processors.

All these different types of sites are basically the same when seeing them from the point of view of the end user. The differences lie in the way they are set up and how they adapt or respond to each particular mobile device. With so many people today using smart phones, tablets, and mobile devices in general, it has become imperative for companies to go mobile, and these sites are the three best ways to do it.

For more information regarding adaptive, responsive, and HTML5 mobile sites, visit anchormobile.net.