Responsive Web Design vs. HTML5

/0 Comments/in , , , , , , /by

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.

Responsive Design | How to Implement it Correctly and Successfully

/0 Comments/in , , , , /by

responsive-design-alone-not-mobile-seo-resized-600

Responsive Design is the new thing in web design. This is due to its ability adapt, react, and respond to multiple screen sizes of computers, phones and tablets. With all of the different sizes of screens today and how fast they change, it is not possible or practical to build sites designed to fit to each screen size. This is why we’ve put together this article to help beginners with responsive design. Here, we will show you how to prepare to implement responsive design preparation and point out the industry best practices to help new web designers/developers learn more about responsive web design and how to implement it correctly and successfully.

1. Compatability and Functionality of Current Architecture

While responsive design is an extremely popular solution to the multiple screen size problem, it may not be the solution to every problem. There are many times when multiple web experiences would be better for the user than responsive design. When considering responsive design, certain questions should be brought up about conforming with the current information architecture. This goes in sync with assessing the functionality requirements of the web design that is currently in place. This is due to the limitations of tablet and phone devices such as the ability of older browsers to run javascript. If the current site needs alot of things that are not capable of being used across multiple platforms, then responsive design might force the web designer to rethink the functionality of the website based on the skills of in-house employees. The web experience might have to be dumbed down to allow the responsive design to work correctly for all devices.

Certain content management systems affect limits, changes, or might even completely deny websites the ability to work with responsive design. It is always a good idea for someone to check the compatibility of the current content management system to make sure responsive design will work when implemented.

2. Inspiration

Every idea in the history of man is based off of an existing idea and then tweaked to suit the needs of the new concept. Before a responsive design is implemented or even considered, it would be a good idea to browse some existing responsive design websites to see if they have the capabilities you need for what you are doing. This way, when the responsive design is implemented the design team will have a good idea of what they want to do with the web design aspect of the site. It will provide good ideas and sources for reference when in the design process.

responsive_web_design-resized-600

3. Content

An extremely common mistake of a responsive design first time user is that they tend to hide content when the resolution of the screen gets smaller for the sole purpose of keeping the page looking good. It is important to keep the design looking good for any screen size, but it is also important to not penalize users for what size screen they are viewing the website from. It is possible to adjust the break points to allow a good design that will reveal all of the content. That being said, it is sometimes acceptable to reduce or hide the footer or slider on tablets and mobile screens or hide content that would not necessarily be of interest to the viewer considering the device they are viewing your site on. However, this is a tool that should be seldomly used because you always want to show as much content as you can without overloading the screen.

4. Context

Remember that screen sizes are different and some may have limitations while others have advantages. For instance, a phone might have a smaller screen than a computer, but it also can initiate calls and gain user location. It is possible to create a great user experience with responsive design if all the features of the different devices are kept in mind.

Hopefully these tips on how to implement responsive design successfully will help you and your team when designing a responsively designed website. Just keep in mind that more is not always better, and you should be happy with your final result.

Why Mobile Marketing’s Future is in Responsive Web Design

/0 Comments/in , , , /by

The face of marketing is changing, and along with that, the face of retail and mobile marketing is also changing. With today’s newer, faster, and more efficient technology starting to be understood by the general populace, people are starting to use different methods to satisfy their consumerist needs. To put this into perspective, let’s size up what happened during the holiday season in November and December of last year.

jyske-bank-on-many-platforms

For starters, records were set on Cyber Monday. The one-day sales record was broken when over $1.4 billion dollars worth of products were sold, 13 percent of these sales were conducted through mobile devices. Do the math and it comes out to $182 MILLION dollars worth of products sold through mobile devices in one day!Additionally, sales through mobile devices were almost literally split 50/50 between phones and tablets. More specifically, 60 percent of people used phones to buy things online while 40 percent of people used tablets for their online purchases.

Christmas Day was also a day for records to be broken. Over 17 million new mobile devices were activated and tablet sales actually surpassed phone sales 51 to 49 percent. This is the first time this has ever happened and is a 200 percent increase since last year for mobile devices. So we not only know that people are usingmultiple screens to buy things now, but they are also continuing to buy new screens. This solidifies mobile devices as much, much more than just a trend. Mobile devices are becoming a staple of our everyday lives, and you as a marketer need to take advantage of this!

We know everyone is going mobile, but simply reaching them through their phones and tablets is not enough. You need to ensure that consumers who visit your site via mobile find it easy to use, easy to navigate, and visually appealing. Simply put, readability equals engagement, and engagement equals revenue.

Do not forget this rule: customers WILL NOT purchase what they cannot read. If your website has not been optimized for mobile, it is almost assured that you site is hard to read, difficult to navigate, and is rather clunky in structure and visual appeal. On top of this, with a majority of the world now viewing their emails through their mobile devices, it is imperative that marketers have a strong email marketing strategy in place that is designed for mobile devices. Like we mentiond earlier, your emails must be able to be read easily on mobile devices, or they will not be read at all.

Looking at all this information, marketers should be working on, or at least thinking about, implementing a mobile marketing strategy. Why? That’s where all the consumers are, and are going. If you think the mobile market is big now, just wait until 3 years from now.

Smartphones have now eclipsed PCs in use, with over a BILLION in use. One in every five emails are viewed on an iPhone, which doesn’t even take into account Android, Blackberry, or Windows Mobile. Considering that a majority of marketing emails are designed for large screen browsers and desktops, this is a problem. If you have an email marketing campaign and expect your emails to be read on mobile devices, you MUST optimize your emails for mobile or they WILL NOT be read. If your emails are not mobile optimized, users will need to slide, pinch, and blow out the screen, and most consumers will just end up ignoring the email completely. Seventy percent of all consumers deleted their emails immediately if they did not render properly on their screens.

Along with this, 61 percent of consumers will abandon mobile unfriendly sites. So what do you do to combat this?

html5_blog_1_1

Not all smartphones are created equal, and their screens are not all the same size. So how do you design a site that is optimized for each individual smartphone without breaking the bank to do so? The answer lies inresponsive web design. Responsive design uses a single HTML5 code base to allow maximum readability and functionality across multiple types and sizes of screens; smartphones and tablets included.

It doesn’t matter if its an email, a website, or a preference center, responsive web design messages are always, and will always, be readable by end users because it adapts, reacts, and responds to whichever mobile device is trying to access it. A site designed to be 4 columns on a laptop or desktop can be 3 columns on a tablet and 2 columns on a mobile phone. The content is still the same, just the way it appears will change depending on the mobile device accessing it.

You can apply responsive web design to mobile sites as well as emails. Responsively-coded emails enables words and pictures to resize themselves so that end users will have the easiest time possible reading the email, regardless of what device they are viewing the email on. They can even show products and headlines that are specific to an individual user’s device.

The best thing about responsive web design is that it is the FUTURE. Companies and businesses everywhere are adopting responsive design into their mobile marketing strategies because, not only is is working for them now, but it will also work for them well into the future because of its adaptive capabilities.

Don’t wait! Adopt responsive web design into your mobile marketing strategy before your strategy gets left in the dust by those companies who have adopted it. Responsive web design should not be considered an option, it should be considered imperative. Any mobile marketing campaign operating with responsive web design is operating in the Dark Ages. Come out and see the light with the rest of us!

Email Marketing Responsive Design Drives More Results

/0 Comments/in , , /by

images_(2)

Marketers are beginning to learn how to be more clever and refined with their marketing approaches. Recently, they have learned how to integrate responsive web design into their mobile marketing strategies to better benefit their email marketing. Mobile email has been a big subject for marketers in 2013 since mobile rates are continuing to rise. So to take advantage of this, the idea to incorporate RWD to drive mobile results came to the forefront.

“A lot of effort is now going in to make sure users can scan and click on the email when it’s on the small screen. If it takes a user to pinch or zoom to see the email, forget it; they’re gone,” stated Matt Caldwell, Vice President of creative and agency services at Yesmail Interactive. “So one area of increased sophistication is in message design and coding.”

He also said “responsive email design is probably the best example of increased sophistication” and that “responsive coding and design of email can be complicated and time-consuming, but because of this surging open on a mobile, we see many if not all, of our clients want to do it. Why? It will alter the email layout to a true mobile design when opened on mobile.”

A majority of companies will see more than half of their commercial emails opened on mobile devices in 2013. This is according to a recent study done by Knotice. Even in light of this, Yesmail discovered that several mobile marketers are still not formatting their email correctly for mobile devices, even through their is a definite rise in email openings through mobile. In fact, it was discovered that in their survey of over 65 marketers over 6 months, Yesmail found that only 14 of 65 companies had correctly formatted their emails for mobile. Mr. Caldwell explained, “Our test was, ‘when opened on the mobile device, can I read every word and click on every link without having to adjust the email layout to make it bigger’? So we’re still seeing many email marketers are ignoring this important aspect of email; how to design and code it.”

Yesmail recognizes several ways for marketers to improve their email layouts to drive up open rates, drive up click through rates, and increase ROI. Marketers can use scalable hybrid layouts, so there’s one layout that will fit both big and small screens equally. They can also pull and link social content like tweets, photos, and comments into their messages. Yesmail also suggests incorporating a catch-all bottom navigation format to push clicks through to other category levels with a series of links at the bottom. Of course, it’s imperative to remember to include mobile call-to-actions in your emails. This is what will drive users to engage with your content.

Yesmail also recommends that marketers jump in and attempt to try to at least incorporate either scalable or responsive email design into their marketing strategy. Sometimes it’s even possible to do both.

email1

“Scalable means ‘the pumped up layout’; you keep your message with the same 600 pixels but you pump up your type, to a minimum 14 points, and you pump up your buttons,” said Caldwell. “Why make it bigger? Because when the layout is reduced to have its size on the phone it can still be read and clicked.”

Caldwell then explained responsive email design, “Responsive is using media queries to make your HTML email device aware. When it’s opened on a small screen, it will load a different set of styles that can resize, reformat, and delete to make a true mobile layout.”

If you observe the Knotice data, you’ll notice that emails are not being viewed on multiple devices. This means that if someone opens up an email on their cell phone or tablet, then the odds of them opening that same email later on their desktop back at home is very unlikely. This only highlights the fact that marketers need to integrate a mobile email strategy into their mobile marketing strategy that does not end up rendering poorly on mobile devices.

Responsive design is great, but according to Knotice, it does not address issues like matching performance levels on PCs.

Patti Renner, Director of Marketing at Knotice, pointed out, “One trend marketers are now using to address this is responsive design for email. This format strategy incorporates multiple content options built into the email, with the ability to adjust the email images and content served based on the size of the viewport when opened. This format strategy incorporates multiple content options built into the email,” she continued. “With the ability to adjust the email images and content served based on the size of the viewport when opened. While this is getting some buzz as a cure-all for dealing with device proliferation amongst consumers, responsive design is no silver bullet. Even the best responsive design on mobile may not match performance levels on PC.

“And it may not render as well on Android as it does on iPhone. Mobile optimization requires marketers to be open to testing, adjusting, testing, and then testing again to get it right for the audience”, Renner concluded.

It is also important for marketers to be aware of click activity across multiple channels at once. This is a great way to find out how people are engaging with your emails once they’ve opened them.

As of right now, click activity is still stronger on PCs and desktops as opposed to mobile devices. This will change when marketers start to send more mobile-friendly emails.

“The simple fact that click activity remains so much stronger on PC and desktop as compared to phone or tablet will likely shift when predictive design methodology is used; anticipating the device used based on a past history of email activity for that device, for that individual and designing around that.

“This is the trend we see coming for marketers; using your data for mobile optimization, while understanding individuals and the devices they use for the best mobile experience possible,” Renner concluded.