Responsive Design vs. Mobile Sites vs. Native Mobile Apps: Which One’s the Best?

Posted on February 19, 2013 by admin

With constantly changing trends and a five fold increase in mobile Internet users, more and more companies are aiming to create sites which will make their services available to mobile users. It is a fact that what seems to be more important on a desktop might not be equally important or useful for a mobile user who is accessing the page on a much smaller screen and is on the go. This is why, thinking properly before you choose to build a site for smaller devices, for your company is important. Here you will also have a few different options. These three options are:

1. Responsive Web Design

A responsive website is basically a website which can adapt itself on different screens regardless of the device you are playing it on. You build one single responsive website and it resizes itself accordingly.

Boston Globe

The Boston Globe, for many, is the best example of responsive design – one that has noticeable performance, too. The loading speed of this website is 7.43 secs (GoMoMeter).

2. Mobile Sites

A mobile website is similar to a regular website and can be accessed with the help of different browsers, the only difference being it is created for small-screen devices. Mobile sites are optimized for on-the-go users, contain limited (or rather, necessary) content and are lighter and faster than responsive websites. m.yahoo.com, for example, is nearly 3 times lighter (Webpage Size Checker) and 4 times faster (GoMoMeter) than bostonglobe.com.

Yahoo! Mobile

3. Native Mobile Apps

Native apps are apps designed for mobile users, usually downloaded from a marketplace such as Google Play. There is a different native app for different platforms, requiring a new set of coding for each platform.

Last year, Facebook turned its back on the build-once-and-deploy-anywhere method (HTML5) and switched its iPhone app to native. Result: the social media giant finally got that long-sought nod from the users.

These three technologies help you gain a mobile presence for your business but each of them has its own advantages and disadvantages. Getting to know each of them deeply is a good idea for making an informed choice.

Responsive Web Design vs. Mobile Sites

When comparing these two, you really need to keep in mind as to what the purpose of the site is going to be. If it is a website aimed at providing its users a mobile experience which involves quick decisions and buying and selling, then a separate mobile site scores better on the charts. However, if you need to constantly add and update it with new trends, then a single responsive design site is a better option. This is because, when it comes to easy updating, mobile sites can be a pain because the site would need to be updated twice (desktop version and mobile version).

Also, it depends on what your budget is when you are planning to create a site. A mobile site requires low development charges compared to responsive design sites which need sophisticated coding and heavy technicalities. Other advantages that a separate mobile site holds over responsive design sites include DIY options and affordable web development. When it comes to optimization and SEO, and adding conversion and redirect codes, responsive design websites rule the roost.

Mobile Sites vs. Native Mobile Apps

Similar criteria as to what the aim of your site is, is needed when trying to compare mobile sites and native mobile apps. If your site is related to marketing and needs a wider reach, greater compatibility with browsers and devices and constant updating, than a mobile site will work better for you. However, if your site needs to interact with the users on a personal basis with a requirement of accessing the personal phone data, then a native app is a better idea.

Mobile sites are also a good option if you want your site to be easily accessible and shareable, and you want people to find it very easily. This is because mobile sites are easy to search and can be easily found through any browser. If your company is creating and promoting games, or your services involve reporting and calculations, then a native app works for you better. The area in which native apps are ahead include their ability to work even when there is no internet connection while the mobile sites cannot function in such a scenario. Native apps lag behind when it comes to the budget as they require a high development cost for creating a different set of various devices whereas mobile sites require a relatively low budget.

Responsive Web Design vs. Native Mobile Apps

Looking at the pros of responsive design compared to native apps is a good idea when comparing these two, as you have read about the pros of a native web app above. One advantage that responsive sites hold over the native apps is that there is no need for it to be downloaded from app stores and thus, doesn’t wait for its approval. Also, this makes the job of the user easier as now he or she doesn’t need to update the information again and again. All you need to do is update it once on your main website and the work is done.

The next advantage that a responsive website holds over native apps is the fact that there is cross-platform compatibility and content updates are driven by a Content Management System. The areas where a responsive site lags behind are similar to the mobile sites which include inability to work without an internet connection and a relatively low quality of user experience compared to native apps. One point that needs to be noted here is that both the options need a strong budget.

The above comparison clearly shows that there are pros and cons to each of the three choices that you have to create a mobile presence for your site. It depends on you and the nature of your business as to what would be the best fit for your situation. It’s better to research well and understand your own business for best results.

About the Author:

Diksha Arora is a writer/emarketer working with PixelCrayons, a Web/mobile development firm. Seeking native mobile app development or planning to hire mobile apps developer? Get in touch with PixelCrayons today!

Which Magento Solution Suits You Best: Community, Go or Enterprise?

Posted on February 15, 2013 by admin

Having made an entry into the realm of eCommerce not so long ago (in 2008), in its brief stint of less than 5 years, Magento has already made a mark for itself and is now owned by eBay. With a proven track record and an impressive list of solutions, Magento can build small, big or gigantic web stores effortlessly. There are a number of e-stores of various magnitudes already functioning on it. Its flexibility as a CMS is wider that most eCommerce platforms.

While it goes without saying that it will do justice to your web retailing needs, the big questions is which plan offered by Magento would suit you the most?

Considering that its target group is a variety of business owners and enterprises, Magento has charted out three distinct plans. Let’s take a look at those three options.

Magento Go

It’s particularly designed for small business providers to create fully equipped online stores quite easily and fast. You don’t need to worry about installing any software or administering any servers. It’s armed with a set of powerful tools to take your business to the next level. Magento Go is for those who want an eStore, without knowing the technology.

Magento Go

Design as you like- With no knowledge of HTML, no knowledge of designing you are still good to go. It assists you in deciding the branding of your enterprise. You can pick your logo, edit the text of menus and the buttons, like the typical word editors, line up the attributes on your page. And if you wish to align with your trusted web designer, Magento gives you a free hand by letting you use its CSS editor.
Flexibility in Stacking Products – If you have a product, any product, it has a catalog so wide that it allows you to place it and categorize it. Plus, its powerful search tool makes looking out for any product by your customers a trouble-free affair.
SEO-Friendly Web stores- What good is a Web store if it isn’t search Engine friendly? Specifically for this, it has built in capabilities for SEO. You are in charge of your URLs and can modify meta keywords accordingly. And that’s not all, it even creates a sitemap and a Google sitemap all by itself.
Keep Your Buyers Engaged – Customer loyalty is high on its radar. That’s why it gives you ways to retain your customers. It provides you flexible coupons and banners to keep your customers lured. Besides, you can make product comparisons and allow visitors to create their own wish list.

And you can always enhance the functionality and user experience by employing extensions from Magento Connect.

OUR VERDICT: With a pricing that starts at $15/month that includes a client support as well, Magento Go could certainly be a great option for those who want to set up an eCommerce site without a complicated solution.

Magento Enterprise

If Magento Go offers you the world Magento Enterprise brings the whole universe (along with sound technical support) to you at a price of $14,420 per year.

Magento Enterprise

Aimed at mid-sized entrepreneurs, it’s as big as it can get. It allows millions of visitors to see your site, provides you product comparisons, offers you relevancy, flexibility, extreme scalability, and optimized speed to accommodate thousands of transactions at any given time. You can also move the data back and forth between the systems.

Apart from everything provided by Magento Go, the Enterprise Edition extends to you the knowledge about your customers so you can customize and make shopping a more personalized affair for them. You can make segregations based on shopping habits and demography. Besides, new visitors can be drawn in through special offers. You can showcase special content, target customers through exclusive promotions, suggest offers, launch surgical email marketing campaigns on the basis of their product browsing habits.

Some of the things you get in Magento Enterprise and not in Magento Go are:

Reward Points
Gift Registry
Enhanced Customer Categorization and Targeting
Invitations, Events
Content Roll back
And More

Also, making payments is easier yet again. This edition is loaded with plethora of payment gateways. But that doesn’t mean one has to make payment through the gateways only. You can get your customers to pay by check, purchase orders, gift cards & money orders. Also a single page checkout will see to it that payment is kept hassle-free. And with an advanced security system your customers can rest assured. Also, shipping is more strengthened, as its calculated on real time shopping and has a fixed cost too.

OUR VERDICT: Go for it, if you have a really vast canvas. It’s extremely efficient for managing a big web store. It offers great technical support. There is even a Premium Edition in it. Proud brands already on Magento Enterprise are Nike, Reed & Barton, Papyrus, Men’s Health, Olympus, Vizio, and Baby First.

Magento Community

Finally something that’s open source and could assist developers in their own endeavors. Magento’s Community Edition can be downloaded free of charge, while developers can alter its code and put in additional attributes and functionality. It is majorly utilized by organizations/vendors who customize Magento stores for commercial purposes (with the help of their own developers).

Quite naturally, you don’t get the technical support from Magento here, but anyone who goes for such services from Magento providers, gets the support from them.

Magento Community

Even though the list of what you get is not so long in a Community Edition, it can still satisfy your needs to a fairly good extent. You get code level access, and an already integrated Mobile HTML5 theme. You get full access to its extensions, themes, MCommerce, SEO befriending urls, multilingual support, multiple stores, order management and lots more.

OUR VERDICT: Your choice solely depends upon your requirements. Go for it if the functionality permitted by Community edition suits you. Needless to say it’s efficient, does offer a lot and is absolutely free. So, tight budgeted entrepreneurs can surely opt for it. It’s also a great choice for developers who do a lot of work with eCommerce sites for clients.

Wrapping Up

First off, going thoroughly over the functionalities of these three versions by Magento can really help you to decide which option is right for you. Regardless of how tech savvy you are, it will help make an informed decision.

About the Author:

An established Technical Writer with MagentoJunction, a branch of Creativeweblogix. Amit Pankaj is well-versed with HTML to Magento Template Conversion, Social Media, Content Management and SEO. He often opines on CMS’s like Magento. To hear from him, subscribe to our Blog RSS or you can follow us on Google+, Facebook, Twitter also on Linkedin for updates on Magento CMS.

10 Useful Online CSS Tools You Must Use

Posted on February 12, 2013 by admin

If you are a web developer then you might be aware of Cascading Style Sheets or CSS. However, for beginners, I won’t be describing it in detail here, but yes, in short, CSS or Cascading Style Sheets is basically something that can be used to beautify elements of a website. It empowers you to define specific properties for HTML tags in one go. For example;

If you use Div tags in your HTML, you need to define their properties every time you have a new tag <div style=”width: 100px; height: 100px”></div>. However, with the use of CSS you can set a particular standard for all your div tags in one go, like; div {width: 100px; height: 100px; } , this would make all your HTML divs 100px wide and 100px long. In addition, beginners can learn more about CSS on W3Schools.

Prefixr

Writing a Cross-Browser Compatible CSS can be tough, unless you have complete expertise in Cascading Style Sheets. But Prefixr makes it really easy for you to have a Cross-Browser CSS within seconds. What you need is to select the formatting and here you go with a live and workable CSS code.

CSS3 PIE

In today’s time almost all web browsers support CSS3. However, there are people who still use old versions of Internet Explorer, and we all know IE (Internet Explorer) makes a web developer’s life miserable, as its older versions hardly support any of the CSS3 Properties. This is where CSS3 PIE is useful, so must use it to know its capabilities.

Clean CSS

To make a website perfect, a Clean CSS file is pretty much required, as it makes editing very easy and reduces the time taken in editing. There is nothing better than Clean CSS to make your CSS files flawless. Also, it formats and optimizes your CSS completely.

CSS3 Generator

If you really don’t want to waste your time writing CSS3 Styles and Properties on your own, then this is the right tool for you. CSS3 Generator is capable of producing codes for most of the CSS3 Styles and Properties within seconds.

CSS Menu Maker

CSS based menus are always good for websites, as they can efficiently decrease the page loading time. But making a CSS Menu could prove to be a time consuming task, so why not use a dynamic tool, which can do that for you quickly. CSS Menu Maker is a perfect tool to make CSS based menus, where you just need to decide what type of menu you need, like; Dropdown, Vertical, Horizontal or Flyout.

Quick Form Builder

Forms are an integral part of websites, as they are the main source of collecting information for the website visitors. But creating a form with valid fields is not as easy as it may sound to many people. But with Quick Form Builder you can produce valid forms that are fully accessible.

IE6 CSS Fixer

We all are living in the year 2013, and technology is advancing day by day, but still there are people who don’t go for the latest techniques by sticking to their old ways. Similarly, there are people who still use Internet Explorer version 6.0, which makes it really difficult for web developers to make websites compatible with it. However, with IE6 Fixer you can live without a worry, as it fixes your CSS accordingly, and makes your website run just like it should on any other web browser.

CSS3 3D Transforms

With CSS3 you can introduce many exciting features in your website like 3D transformation. However, in order to do that, you must have all the required knowledge about CSS3, but if you don’t have it right now, then don’t worry, as you can leave this task on CSS3 3D Transforms. It can create CSS3 based Gradients, Box Properties, 3D Transformation, etc.

CSS Compressor

If your website takes a lot of time to load the web pages than your competitors’ websites, then you may lose your visitors to them. And to avoid that, you can compress your CSS file, which will not only increase your web page loading speed, but will also save the bandwidth it consumes.

CSS3Gen

Css3Gen is like a one stop shop for CSS3 Styles and properties. With this awesome tool, you can generate CSS based Buttons for your website, make border radius, use shadow effect on any of the available box elements or on text as well, and can also produce Gradients.

If you think we missed out on your favorite CSS tool, just drop us a message below, and we’ll try to add that in our future blog post on CSS tools.

About the Author

Ekant Sharma , who’s associated with wordpressintegration.com, mostly writes about Convert Photoshop to WordPress Theme, WordPress Slicing and WordPress Theme integration. He holds sound knowledge of Content Management Systems as well as SEO. His blogs are known to be replete with information and detailed analysis. He is also interested in commenting about new and emerging strategies in this sphere.

How To Build a Fullscreen Background Video Player

Posted on February 12, 2013 by admin

After looking over countless jQuery plugins I have seen a lot of new HTML5 video techniques. The audio and video elements have created a new method of publishing digital media, streaming off a web server. But developers have been hard at work customizing these features to be used within advanced layouts.

In this tutorial I want to look at using big video backgrounds within typical website layouts. I’ve chosen the jQuery plugin BigVideo.js which includes a list of resources in the documentation. We can setup genuine HTML5 videos streaming as backgrounds behind the main page content. It is not an easy setup, but I’ll provide a clear step-by-step process to follow along.

How To Build a Fullscreen Background Video Player

Single Demo – Playlist Demo – Download Source Code

Staging the Document

I am starting off by creating the typical HTML5 doctype and header format. There are a lot of dependencies we need to include within the header for this effect to work. Most of the scripts are included within BigVideo’s download page but I’ve added a small list below:

Now this list does not include the two CSS and JS files needed for BigVideo to work. Altogether that is 6 files we need, split into 5 JS scripts and one CSS stylesheet. It is a lot, but you don’t often find high-quality background video plugins with this much flexibility. Also many of these libraries can be hosted on various CDNs. Check out my sample header code to get an idea:

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>BigVideo Background Demo Page</title>
  <meta name="viewport" content="width=device-width">
  <link rel="shortcut icon" href="http://vandelaydesign.com/favicon.ico">
  <link rel="icon" href="http://vandelaydesign.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/bigvideo.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nunito:400,700">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
  <script type="text/javascript" src="http://vjs.zencdn.net/c/video.js"></script>
   <script type="text/javascript" src="js/bigvideo.js"></script>
</head>

The actual body text requires a type of absolute or relative positioning based on a container. This happens because our BG video will load after the DOM finishes, and so it’ll cover up all the HTML content. That is, unless it is positioned relative to the rest of the page. I’ll explain a bit of my CSS in the next section.

Content Positioning

I haven’t done much editing inside bigvideo.css since it’s not needed so much. Some of those styles you may wish to update based on differences within your own layout. But it is also possible to just rearrange elements in your current design based on new CSS properties.

#wrap {
  position: relative;
  color: #fff;
  margin: 50px 20px 420px 100px;
  padding: 25px 35px;
  width: 550px;
  background: rgba(0,0,0,0.55);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

p { font-size: 1.35em; line-height: 1.25em; font-weight: normal; margin-bottom: 12px; }

a { color: #95c3d6; }

a:hover { color: #bedeec; }

h2 { font-size: 2.55em; font-weight: bold; line-height: 1.75em; color: #fff; text-shadow: 1px 1px 0px #333; font-family: 'Nunito', 'Trebuchet MS', sans-serif; }

The most important codes I’ve added pertain to the #wrap div and its position on the page. Although I have setup specific values for margins & width, you can use min-max width or different units of measurement to get the exact fit needed. I am using the position:relative property because it forces the wrapper content’s placement to appear on top of the video.

Also you’ll notice that I have included a third-party Google webfont attached into the header text. This is a nice way of sprucing up your pages so they do not look as bland. The key is picking a small font which won’t hog bandwidth and elongate download speeds.

Adding the Video JavaScript

To wrap it all together I’d like to go over some of the different settings within BigVideo’s API. Much of the video.js API can still be attached onto the video player. This means you can manually play, pause, reset volume, and various other tasks.

<script type="text/javascript">
  var BV;
  $(function() {
    // initialize BigVideo
    BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
	});
</script>

You can find this block of code inside my index.html page down at the bottom closing tag. Each of these lines is required to initiate a basic video background effect without too many fancy options. Inside the show() method we are passing in 2 different parameters. The first is a self-hosted CDN mp4 file directly from the Video.js website. The second value is setting our video to “ambient” which means the sound will not play.

Based on your needs for each website this may be an important option to setup. Not everybody enjoys having sounds playing automatically – or even at all! This option is completely up to each developer and may be omitted if you’d like to use the default state. Additionally I want to share the demo codes for setting up more than one video source type, as seen below.

$(function() {
  // initialize BigVideo
  var BV = new $.BigVideo({useFlashForFirefox:false});
  BV.init();
  BV.show('media/videos/oceans-clip.mp4', {altSource:'media/videos/oceans-clip.ogv'});
});

Creating Video Playlists

The last technique I want to cover is how to build customized playlists for multiple videos. I have rarely seen websites which are currently utilizing this technique but it does offer a lot of unique substances for media fanatics. The quickest way to setup a video slideshow is to offer multiple source options for the first variable parameter.

$(function() {
  // initialize BigVideo
  BV = new $.BigVideo();
  BV.init();
  BV.show(['media/videos/bg01.mp4','media/videos/bg02.mp4','media/videos/bg03.mp4'],{ambient:true});
}

You can see how easy it is chaining settings together within the same method call. BigVideo definitely provides a stable solution for HTML streaming backgrounds. Even older browsers can support the players based on FLV/Flash fallbacks. Now one other feature of the playlist is to allow users the option of switching between videos. This requires the Modernizr JavaScript library which I have included with my demo examples.

We can duplicate this effect by setting up anchor links with href values targeting the different videos. Then apply a jQuery click event handler to update the BV.show() method. You can see my sample code below.

$('.playlist-links').on('click', function(e) {
  e.preventDefault();
  BV.show($(this).attr('href'));
});

You should be able to rename the target class into anything you’d like. Also the added videos will display a small play feature at the bottom of the screen. This isn’t added by default, but you may configure the options in the BigVideo() setup method. There is a lot of initial work required to get the scrip running, but it is worth the outcome for such an incredible effect on your latest web project.

We have covered a lot of the more common features when using BigVideo.js background videos. However you can check out more examples by visiting the Github issues area which includes frequently asked questions. As more people start using the plugin there will be more solutions for problems which pop up time-and-time again.

How To Build a Fullscreen Background Video Player

Single Demo – Playlist Demo – Download Source Code

Final Thoughts

I hope some developers may put this code to good use. Websites using big images and videos in backgrounds tend to draw in more attention from visitors. These are key selling points for branding and marketing, which is crucial for any successful business. Although this design style will not fit every website I’m sure this plugin will be fun to play around with.

Aside from the resources on the BigVideo Github page you may also download a copy of my tutorial demo source code. This zip archive includes just the basic files you’ll need to get this up and running properly. But along with new ideas we’d also like to hear any questions or suggestions from readers. And be sure to let us know if you launch any websites utilizing this video background effect!

About the Author:

Jake is a freelance writer and frontend web developer. He can be found writing in many blogs on topics such as mobile interfaces, freelancing, jQuery, and Objective-C. Check out his other articles throughout Google and follow his tweets @jakerocheleau. Jake’s Google+ profile.

Cross Platform Mobile Application Development Tools: Bridging The Platform Divide

Posted on February 7, 2013 by admin

What are your considerations while shopping for a smartphone? Entertainment, infotainment, communication, professional aids, or something else? On the prowl, you learn that your hunt for the best buy doesn’t seem to end anywhere soon. You find yourselves in an ocean of smartphones having features with very little noticeable differentiation. Nearly all smartphones offer you similar features that you’re craving. Even if you’re ready to settle down for one or two unique features, it’s not always easy to spot them. But a platform vendor or an app developer never misses them – nor can they afford to.

The Lone Differentiator

No matter how much platform vendors try to differentiate their platforms from their competitors, it all basically boils down to two aspects: apps and UI. And the one that seeks more attention is UI, since user experience starts with a great visual appeal. With the fusion of technology and devices, user experience takes the front seat when it comes to luring potential customers. Major platform vendors are banking hard on UI; here’s what they’re up to:

It all began with Apple during the 80s, when it brought out the first set of standards for the earlier computing platforms. No wonder the ever popular Mac OS still remains popular.
Microsoft followed suit by borrowing a lot from Mac OS, which over the years saw their Windows OS’s UI getting major makeovers. And now they are putting their best into their latest releases such as the Metro UI. It’s an UI that’s touted to work on all the platforms of Microsoft. That’s going to be groundbreaking.
The ever-lasting legal battle between Apple and all others over design patents says it all.

This is a wake up call for cross platform mobile app developers mainly because their app’s user experience should be in line with the platform’s user experience expectations. The increased sense of identity and an urgency on the part of major smartphone platforms to draw lines of distinction is creating all sort of problems for web app developers. Meaning to say that platform vendors are doing everything to make their platform’s user experience standout; and mobile apps that don’t match their standards are not going to have a place in the app stores.

Smart Cross-Platform Mobile Tools

Cross-platform mobile tools that provide user experience like native apps are the ones that’re in huge demand. Vision Mobile published a list of tools as a percentage of developers using them. The top three spots were occupied by:

PhoneGap (32%)

Employing a hybrid model using a codebase built on HTML, JavaScript and CSS, PhoneGap is based on the wrapper concept wherein the browser is mated to a native app wrapper. A JavaScript API does the job of accessing the device capabilities. It supports iOS, Android, WebOS, Windows Phone, Symbian and BlackBerry. Support for Bada is on the anvil. Customization of native wrapper coupled with “drop-in-library” makes PhoneGap highly liked by developers.

Sencha Touch (30%)

Supporting BlackBerry, Android, Kindle and iOS and being built around the so-called futuristic HTML5, Sencha Touch features GUI components for touch operations. Being HTML5 based gives it the ability to access apps while offline. Since it’s often used with PhoneGap, Sencha gains access to native devices or apps such as GPS, camera, maps, etc. CSS enables few basic animations.

Xamarin (26%)

Xamarin, which is 3rd in the list, is based on .NET framework. It supports iOS, Android, Windows Phone, OS X, Unix, Solaris, and few game consoles. It claims it can give full access to almost all native features – the result being a native looking app. The tool provides a debugger which boasts of advanced features. It adapts to almost any platform built on any programming language. The user-experience is enhanced through high performance made possible by compiling the app to native code rather than accessing via browser.

Wrapping Up

Apple and Google are turning themselves into invincibles and it appears that they would remain so for sometime. This can only stiffen the fierce competition between them as well as between native and web apps. Cross-platform mobile app is a level playing ground and it has to be always, but the two titans are capable of playing the spoilsport.

About the Author:

Rohit Singhal is a writer/emarketer working with PixelCrayons, a web/mobile development agency specializing in CMS development and mobile apps development. You can get in touch with PixelCrayons if you are planning to hire experienced Android developers and iPhone developers.

Convert HTML to HTML 5 for Better Web Appearance

Posted on February 5, 2013 by admin

Hypertext markup language popularly known as HTML is one of the widely accepted language that is adopted worldwide to develop and upload the required content on the World Wide Web. The technique forms the core of any website designing and development project. Owing to the effective role it plays and the need of the hour, new and enhanced versions of it has been introduced by the web developers. HTML5 is the enhanced version of this traditional formatting language and includes a package of attractive features like cross compatibility, SEO, device support storage, and browsing. This new HTML version helps incorporate and build on more interactive website design that includes amazing animations and effects. The codes support the animations which are developed from a latest drawing tag feature.

The effective HTML5 coding requires less efforts and helps save on time for effective creation of videos, animation etc., using the various plug-ins. Also, along with this, HTML5 has got drag and drop function that helps in files handling and making the task even easier. Likewise there are many new API’s that are available in this enhanced HTML version that makes the websites even better, increasing visual conversation. Incorporate the HTML to HTML 5 conversion techniques today and increase your web presence.

No matter it is graphic design or industrial design, framework on which a website is built is more important. If your website is not well built or is built on old framework then quickly switch to HTML5 set up. The built-in storage feature of HTML5 is much better compared to the precursor. HTML5 has the ability to stock up cookies and client databases offline, which is one of the most admirable features of enhanced HTML techniques. Enhance your web presence with HTML5 coding.

About the Author

Lovelydesign offers various resources, inspiration roundups and freebies which are further divided into categories like inspirations, resources and wordpress. Some of the main concerns of the team at lovelyDSGN include inspiring, creating, designing, expanding and sharing. Here you will come across some of the most special and unique designs, logos and resources.

You! Be Informed! #0035: WordPress and Zenfolio

Posted on January 19, 2013 by admin

Hello everyone, before we end this awesome week, let’s take a quick look first at some relevant news that’s happening in the world of arts and design. And this week, we are giving our You! Be Informed! Segment something different as we will be discussing some great news for our readers who are also in to photography.

So instead of the usual graphic design conferences and contests, we’ll be talking about two popular websites on the Internet that will certainly make photographers and enthusiasts jump for joy when they hear the news that these two sites will bring in the coming future.

WordPress

Automattic, the creators of the popular blogging tool WordPress has finally seen the potential of photographers as a viable market for their services as they announced to roll out a vertical for portfolio sites just this week.

Although WordPress has long been used by a lot of photographers, designers, videographers and other people in the creative field as an online portfolio to showcase their work to the world, most of them only use portfolio-like themes in the past. And this announcement is the first time that WordPress is purposely creating a specific vertical to cater to the needs of these consumer groups.

Source

Currently, users can choose from around 30 portfolio themes, all of which of course comes with the usual add-on services and support as with other WP themes such as access to CSS for more customization for an additional $30/year or $60/year for VideoPress service that allows users to embed HD videos.

Zenfolio

After Adobe’s acquisition of Behance, another portfolio site by the name of Zenfolio has been acquired by Art.com. Zenfolio has made a name for itself for the past 6 years or so by providing online photography and sales solutions for professional photographers and enthusiasts. Its subscription-based services allow photographers a convenient way to create their own website and sell their creations to clients.

Having said this, the acquisition seems a very logical way for both companies to expand and serve more customers. As Art.com Inc. is one of the world’s largest online specialty retailers of high quality wall art, it provides a bigger market for Zenfolio users to sell their products. On the other hand, Art.com benefits from the acquisition as Zenfolio users will definitely add value to the websites collection of purchasable goods.

At this point, both websites will continue to operate as stand-alone sites. However, it is quite interesting how all the cards will fall into place and how the two companies will develop. Nevertheless, we hope that this acquisition works for the better especially for the benefit of their customers.

So there you go guys. Which news are you most excited about? Do tell us by leaving a comment below. You can also find us on Facebook, Twitter, Pinterest and Google Plus or you can subscribe to our blog using our RSS Feeds. And if finally, if you’re currently working on a design project for a print product (business cards, posters, postcards, etc.), please do visit our print templates page and download our awesome blank print templates to help you get your designs print ready in no time.

You! Be Informed! #0035: WordPress and Zenfolio

Posted on January 19, 2013 by admin

WordPress

Source

Zenfolio

20+ HTML5 Tutorials, Resources & Tips

Posted on January 16, 2013 by admin

HTML5 offers plenty of potential for web designers and developers, especially when combined with CSS3. The possibilities of HTML5 are exciting, and many designers/developers have been creating amazing things that weren’t possible with HTML and CSS in the past.

The life and career of a web designer/developer requires learning new techniques rather frequently due to changes in technology, and HTML5 is no exception. This post will serve as a guide to help you find tutorials and resources that will allow you to improve your own skills with HTML5.

Here’s a collection of HTML5 tutorials, resources & tips to help you understand HTML5.

HTML5 Tutorials:

Design & Code a Cool iPhone App Website in HTML5

Have a Field Day with HTML5 Forms

Coding An HTML 5 Layout From Scratch

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Bouncing a Ball Around with HTML5 and JavaScript

Creating a 3D Animated Box HTML5 WebGL Photo Slideshow

Coding Up a Web Design Concept into HTML & CSS

An HTML5 Slideshow w/ Canvas & jQuery

HTML5 for Beginners. Use it now, its easy!

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Create a Typography Based Blog Layout in HTML5

How to Make an HTML5 iPhone App

Triangle mesh for 3D objects in HTML5

HTML5 Clocks Tutorial

HTML5 Resources:

HTML 5 Cheat Sheet (PDF)

HTML 5 Visual Cheat Sheet by Woork

HTML5 for Web Designers

HTML5 Please

HTML5 Tips:

28 HTML5 Features, Tips, and Techniques you Must Know

HTML5 Unleashed: Tips, Tricks and Techniques

The Power of HTML 5 and CSS 3

About the Author:

This is a guest post by Ainsley Bevis, founder of Bloom Web Design, where you’ll find web design article, tutorials, resources, inspirations & tips.

Details of 10 E-Commerce Platforms

Posted on January 14, 2013 by admin

When it comes to choosing a platform for an e-commerce website there are plenty of options. Having options can be a good thing, but in some cases having too many options can make it difficult to know which one to choose. In this post we’ll take a look at 10 leading options and we’ll provide some details about each. They are actually broken down into 3 categories: hosted, open source, and hosted shopping cart.

Hosted e-commerce platforms will charge a monthly or yearly fee, which will include web hosting, use of the e-commerce system, and support. You’ll have to host your site with them in order to use the system. The downside to this is that you won’t be able to choose your own host, but the upside is that you’ll get support for hosting and the e-commerce system from the same place, and they will know their own system very well. Also, since it is hosted they can take care of most security details.

Open source e-commerce platforms can be downloaded and hosted anywhere. You’re not committed to a particular host, which can be a good thing. The downside is that support is likely limited to a forum or wiki. For designers and developers, open source solutions can be a good choice. End users who are looking to set up their own site will likely face more obstacles with an open source, self-hosted system as compared to a hosted platform.

Hosted shopping carts will allow you to use the CMS and host of your choice, and they will just host the shopping cart and checkout process for you. So they’ll still handle the security details since the payment will be processed through their site, but you won’t host your entire site with them.

So now we’ll take a look at the specific platforms. Certainly there are plenty of other options that could be included, but we have tried to limit the number to a few in each category to avoid overload.

Hosted E-Commerce Platforms:

Shopify

Shopify is a hosted e-commerce platform that is extremely popular with designers/developers and end users. If you’re a designer you’ll appreciate the ease of implementing you designs and templates with Shopify. For end users, Shopify offers a attractive and intuitive user interface and a wealth of features.

Because it is a hosted platform and your site will be hosted on Shopify’s servers and they handle the security details, which is always important for any site that collects payments from visitors. The hosting comes with no bandwidth limits, and also includes a content delivery network (CDN) to help pages to load as quickly as possible.

Shopify users can select from a large number of well-designed templates for free. They also have a theme shop where you can purchase premium templates, typically in the range of $100 – $200. Having a custom design is also an option, and Shopify provides a list of experts that they recommend for these types of projects.

You’ll also appreciate the fact that Shopify includes a mobile commerce shopping cart and responsive templates, making it possible for your customers to purchase from any device.

On the backend, Shopify provides detailed customer data and allows store owners to create customer groups. The CMS makes it easy for users to update the content of their sites, and it even includes a blogging engine.

The shopping cart integrates with over 70 different payment gateways. If you’re already accepting payment online and looking for a new e-commerce platform, chance are Shopify will integrate with your current payment gateway.

Shopify also includes marketing features like a discount code and coupon engine, social media integration, and email marketing integration with MailChimp. Users have control over things like page titles, URLs, alt tags, and other elements that can be helpful for search engine optimization.

Shopify offers a free 14 day trial on all of its plans, so there is no need to commit without giving it a test drive. Pricing starts at $29 per month for their basic account that allows you to sell up to 100 products. Their most popular plan allows for up to 2,500 products for $59 per month.

Shopify Summary:

Hosting and security provided by Shopify
Pricing includes hosting
Free templates available
Premium templates available for purchase
Marketing functionality included
Customer and order management from the admin dashboard
Mobile-ready
Full CMS, including blog functionality
Pricing between $29 – $179 per month

Highwire

Highwire is a hosted e-commerce platform that has a lot in common with Shopify, but there are some significant differences as well. Like Shopify, Highwire also offers a large number of quality templates that can be used with their system. They also have premium templates that can be purchased for $50. Their templates and shopping cart are also mobile-ready.

If you’re a designer or developer, Highwire gives you full creative freedom and implementing their system is not complicated to learn. Since online shops using their system are hosted by Highwire, they handle all of the security details, so you won’t need to worry about it.

Highwire features a powerful and well-designed admin interface, which provides plenty of details regarding orders and customers. Store owners have control to easily manage products, categories, and inventory.

Several important marketing features are also included with Highwire. You can set up discount codes, offer gift certificates, allow customers to post reviews of your products, and integrate with popular mailing list managers like MailChimp and Campaign Monitor.

Part of what makes Highwire unique is its multi-channel approach. In addition to selling products on your own website, you can also use Highwire to sell on Facebook, Bonanza, and Ebay. Inventory is integrated, so if you make a sale through Facebook it is tracked and reflected accordingly.

Highwire’s approach to pricing is also unique. They offer a free plan that allows users to sell on Facebook, Ebay, and Bonanza, but not on your own site. Paid plans start at $19 per month. The amount that you are billed is not determined by how many products you sell (unlimited products are allowed on all paid plans) or how much bandwidth you use, but rather by sales volume. For $19 per month you can sell up to $1,500 in products. The highest priced plan is $99 per month with unlimited sales volume, with a few other plans between $19 and $99.

Highwire Summary:

Hosting and security provided by Highwire
Pricing includes hosting
Free templates available
Premium templates available for purchase
Sell on your site, Facebook, Ebay, and Bonanza
Marketing functionality included
Customer and order management from the admin dashboard
Mobile-ready
Pricing between $19 – $99 per month

BigCommerce

BigCommerce is a feature-rich hosted e-commerce platform. They provide the hosting and security for users, although you can also purchase your own SSL certificate if you prefer not to use the shared SSL certificate. They also use a CDN (content delivery network) to decrease load times and improve the experience for your visitors.

After signing up for BigCommerce you will be able to get assistance (if needed) from one of their staff members for getting your site set up. The have a selection of more than 100 free templates that you can use, and they also have a list of recommended designers if you need a custom design.

With BigCommerce you can sell any type of product, including physical goods, digital downloads, events, and services. You can manage inventory, set up unlimited product options, and manage tax and shipping calculations. For payment processing you can choose from more than 60 payment gateways.

BigCommerce provides detailed reporting and analysis, and you can easily manage orders and customers from the admin area. Marketing features include coupon codes, gift certificates, email marketing integration with leading services (MailChimp, Constant Contact, iContact), social media integration, sell on Facebook, RSS feeds, Ebay integration, Google Shopping integration, and more. You also have control over details for SEO, like page titles, URLs, meta data, alt tags, robots.txt, and more.

Sites using BigCommerce are also ready for mobile commerce, feature a single page checkout, and allow user reviews of products. A unique feature that is available on some plans is the abandoned cart saver, which you can set to email users who place an item in their shopping cart and then do not complete the purchase.

Pricing for BigCommerce starts at $24.95 per month for the basic plan that allows you to sell up to 100 products. The abandoned cart saver is available starting with the gold plan, which is $79.95 per month for up to 1,000 products. The platinum plan offers unlimited products for $149.95 per month. A 15-day free trial is available with all plans.

BigCommerce Summary:

Hosting and security provided by BigCommerce
Pricing includes hosting
Free templates available
List of recommended designers is available for custom designs
Sell on your site, Facebook, Ebay, and through shopping comparison sites
Marketing functionality included
Customer and order management from the admin dashboard
Mobile-ready
Pricing between $24.95 – $299.95 per month

Izzonet

Izzonet is another hosted e-commerce option. Since the sites are hosted with Izzonet, they also provide the security. They offer over 100 free templates to choose from, and you can also customize the design of the template to meet your needs.

Marketing features include coupon codes, SMS marketing (text messaging), live chat, mobile integration, QR code generator, affiliate management, landing page generation, online surveys and more. In addition, Izzonet integrates with Ebay, Amazon Marketplace, Craigslist, and shopping comparison sites.

Other features include allowing product reviews from customers, email newsletters, product and order management, and product comparison. You can sell physical goods or digital products, and you can even provide serial numbers for products like software.

One of the unique features of Izzonet involves dropshipping capability. You can allow your products to be sold at other sites, and manage it all through Izzonet.

Pricing starts at $19.97 per month for the gold plan, which includes some limitations on features (for example, you cannot sell digital products, and cannot sell on Ebay, Amazon, Facebook, etc.). Five different plans are available from $19.97 to $299.97 per month, each with varying features.

Izzonet Summary:

Hosting and security provided by Izzonet
Pricing includes hosting
Free templates available
Sell on your site, Facebook, Ebay, Amazon, and through shopping comparison sites
Marketing functionality included
Customer and order management from the admin dashboard
Dropshipping
Email and SMS marketing
Pricing between $19.97 – $299.97 per month

Volusion

Volusion is a hosted e-commerce platform with a few unique features and a lower starting price point for those who only need to sell a small number of products. Like the other hosted options, they take care of the hosting and security, and they also use a CDN to help reduce page load times. Users can choose from more than 100 free templates, purchase a premium template starting at $195, or hire Volusion for a custom design starting at $1,295. The system is also mobile-ready to allow customers to buy from their smartphones or tablets.

Features include unlimited product options, product comparison, one-page checkout, inventory tracking, coupon codes, user reviews, email newsletters, social media integration, reporting and analytics, and more. One of the more unique features is the daily deal option that is great for promoting your specials. Another great feature is the option for users to create a wishlist of your products. With Volusion you can integrate you store to sell on Facebook and Ebay.

Pricing starts at $9 per month for a mini plan that allows you to sell up to 25 products and has some feature limitations (such as no daily deals, email newsletters, and Ebay integration.). Plans range from $9 per month to $149 per month for the platinum plan with unlimited products and all features. All features are also included for $99 per month on the gold plan, the products are limited to 5,000.

Volusion Summary:

Hosting and security provided by Volusion
Pricing includes hosting
Free templates available
Premium templates available for purchase
Custom designs available for purchase
Sell on your site, Facebook and Ebay
Marketing functionality included
Customer and order management from the admin dashboard
Daily deals
Customer wishlists
Pricing between $9 – $149 per month

Open Soure E-Commerce Platforms:

Magento

Magento (community edition) is one of the most popular open source e-commerce platforms. Aside from the open source community edition Magento also offers an enterprise edition that is more robust and advanced, and is used by large companies like Nike, Vizio, OfficeMax, and others. They also offer Magento Go, which is a hosted solution that includes support.

The open source community edition is popular with designers and developers who are creating custom e-commerce sites for clients. Because it is free and open source it helps to keep the cost low, which is important for many small businesses and start up e-commerce sites. In addition, it can be hosted anywhere, so you are not locked in to using any particular host.

Free templates and premium templates are available for Magento users. The community edition includes features like analytics and reporting, control over shipping calculations, choice of payment gateways, up-sells/cross-sells/related products, SEO options, coupons and promotions, customer and order management, and mobile commerce.

If you’re a designer/developer who creates a lot of e-commerce sites for clients, Magento is a platform that should be considered. If you are an end user who is looking for the right e-commerce platform for your own site, you’ll probably need to hire a designer/developer if you want to use the community edition. Magento Go is their version that is best suited for small businesses that want to set up their own site.

Magento Community Edition Summary:

Free to download
Open source
Can be hosted anywhere
Free templates available
Premium templates available
Add-ons available from community members
Marketing functionality included
Customer and order management from the admin dashboard
Mobile-ready
May require the assistance of a designer/developer

osCommerce

osCommerce is another leading option when it comes to free and open source e-commerce platforms. The features, as well as the pros and cons, are similar Magento’s community edition. With osCommerce you can use your choice of web hosts, but you’ll need to make sure that it is in a secure hosting environment. The community of users is another big benefit of osCommerce, as there are over 7,000 add-ons from the community that can be downloaded and used for free.

Free templates and premium templates can be purchased for osCommerce, or a custom design can be created. End users may find it necessary to get assistance from a designer/developer to set up osCommerce for their site.

osCommerce Summary:

Free to download
Open source
Can be hosted anywhere
Free templates available
Premium templates available
Add-ons available from community members
Customer and order management from the admin dashboard
May require the assistance of a designer/developer

Hosted Shopping Carts:

FoxyCart

FoxyCart is a bit different than any of the other options that we have looked at so far in this article. It is a hosted shopping cart. You do not host your entire site with FoxyCart and it is not a CMS. You can use FoxyCart with your CMS of choice or with static HTML files. When one of your visitors views their shopping cart and checks out they will technically be on FoxyCart’s site, although you can customize the look to match your own site. This gives you the flexibility to use whatever CMS you are already using, and by having FoxyCart host the shopping cart and checkout process they will handle the security details.

The FoxyCart system aims to be simple, and it’s a good option for e-commerce sites with a small number of products, although it can also be used for larger sites. Although FoxyCart is a more simple option, it still includes a lot of features like coupon codes, one-page checkout, control over tax and shipping charges, and custom products and options. You can sell physical goods or digital products with FoxyCart.

To setup and implement FoxyCart you will need at least basic knowledge of HTML. For this reason end users will likely need to hire a designer or developer.

Pricing for FoxyCart is a little different than other options. The standard plan is $20 per month plus $0.15 per sale (first 100 sales at no extra charge). The advanced plan is $300 per month plus $0.05 per sale (first 1,00 sales at no extra charge). It is free to use until the store is live, so you there is no need to pay while the site is in development.

FoxyCart Summary:

Only the shopping cart and checkout is hosted by FoxyCart
Host your site anywhere
Use any CMS
Pricing $20 per month and up

DPD

DPD (Digital Product Delivery) is similar to FoxyCart in that they only host the shopping cart and checkout, but DPD specializes in digital products. You can still sell tangible goods with DPD, but most of their features are intended for selling digital products. DPD is ideal for blogs and websites that want to sell digital products in a simple and easy way. DPD not only handles the checkout process, but it also manages the download process for your customers. The buyer will be provider with a secure download link that will be instantly available following the purchase.

Features include checkout security provided by DPD, hosting for your digital files, activation keys for selling software, coupon codes, control over tax and shipping calculations, customizable checkout, mobile-ready checkout, customer management, reporting, and more.

DPD includes a built-in affiliate program, so you can expand your sales by paying a commission to affiliates in exchange for their referrals. You can integrate DPD with your email marketing service, like MailChimp, Aweber, iContact, and Get Response. In addition to standard digital products, you can also sell subscriptions that involve recurring payments.

Pricing starts at $10 per month, which allows you to sell up to 20 products and store up to 1GB. Prices range from $10 – $280 per month, which allows for 3,500 products and 175GB. A 30-day free trial is available.

DPD Summary:

Only the shopping cart and checkout is hosted by DPD
Host your site anywhere
Use any CMS
Pricing $10 – $130 per month
Affiliate program included

Digital Delivery App

The features of Digital Delivery App are very similar to those of DPD, with a few exceptions. Like DPD and FoxyCart, DDA hosts only the checkout and shopping cart. You can host your site anywhere, use and CMS of your choice, and add your “buy now” or “add to cart” buttons wherever you like. With DDA you can sell digital files, subscriptions, licenses or tangible goods. When selling digital products, DDA will handle the delivery of the product as well as the checkout experience.

Features includes customization of the shopping cart and checkout, reporting and analytics, the option to self host your files or host them with DDA, mobile-ready checkout, coupon codes, subscriptions and recurring payments, control over tax calculations, and mailing list integration with MailChimp, Aweber, and Campaign Monitor. Like DPD, DDA also includes a built-in affiliate program to help with growing your revenue.

Pricing starts at $9 per month for a plan that allows up to 10 products and 1GB. Plans range from $9 per month to $39 per month, which will allow you to sell 250 products with 15GB of storage. Larger custom plans are available for upon request.

Digital Delivery App Summary:

Only the shopping cart and checkout is hosted by DDA
Host your site anywhere
Use any CMS
Pricing $9 – $39 per month
Affiliate program included

We’ve now covered 10 of the leading options for managing an e-commerce website and hopefully you have found some information that is helpful for deciding which option is best for you.