Testing Your Mobile Website



The obvious place to test any mobile site, you would think, would be on a mobile device. But, how many devices are we targeting for our site? Depending on the needs of the site, and its owner and users, there could be dozens of devices.

For a web app in particular, it's important to make sure the site works across as many devices as possible, as we want people to buy through that web app, and they won't buy if the app doesn't work for them.

So, what methods are available to us to test for different devices if we don't actually own all of them? The following methods are available to us:

•Using a desktop browser with a resized window
•Using a desktop browser with a mobile User Agent
•Using a mobile testing website
•Using a mobile browser emulator

We're going to look at these four methods, but first, let's take a moment to consider testing on the actual devices themselves.

Testing on Mobile Devices

While it's impossible for any web designer without an unlimited budget to test on all the devices available, it's a good idea to test on one or two. This is because of the following reasons:

•By holding the site in our hands, we get a much better feel for the design and user experience
•We can test our buttons and links by tapping them and seeing how easy it is to do that accurately
•We can easily test the interactions on the site, for example use of geolocation or the accelerometer if we're accessing them
•We can experience the speed with which the site loads and interactions take place

So, while it's not going to be feasible to test on every device we're targeting, it is a good idea to test on at least one. The most commonly used devices to access the Internet at present are iPhone and Android devices, so if we can get our hands on one of those, it would be much better. We don't have to own one—borrowing will do. But, for a web designer making a living from building mobile sites, buying a smartphone is probably going to be a worthwhile investment.

Resizing Browser Window

So, if we don't have access to a variety of devices, or want to test quickly without having to switch from our desktop browser, what's the quickest way to test our site?

The answer is simple—for a site that uses media queries only (that is, it doesn't send different content to different devices), we can just resize the browser window. And we can do this most easily if we use an extension.

Author Info:

SufalamTech specializes in creating, maintaining and marketing mobile websites. The company has a team of proficient mobile application developers, successfully working with major corporations across the world.
[Read More...]


Mobile Web Development Made Easy



In the past, most site owners who wanted a mobile-friendly site would use a separate mobile theme for the site with a design specifically for mobile devices. Some would also use different mobile domains. Mobile web development is an important concept that can be influential in the success of your online business.

If you’re using a mobile theme, you tell WordPress to switch themes if the visitor is using a mobile, and stick to the desktop theme if he/she’s using a—yes you’ve guessed it—desktop PC.
A responsive theme, on the other hand, uses the same theme and similar styling for both sites, but uses a combination of a fluid layout and media queries to make the layout and content different on different-sized devices. It doesn’t just work for mobile web development; responsive themes can change the look of a site on tablets or on really large screens, too.

Responsive design – Important Concepts

To get to grips with a responsive design, you’ll need to understand the following web development concepts:

1. Fluid layout: This is a site layout that uses percentages for widths instead of pixels. The effect of this is that when the browser window changes width, so does the site.

2. Media queries: We use media queries to add extra changes to the CSS for devices of a particular width. The widths most commonly targeted are:

3. Mobile devices such as smart phones: These are 320px wide and 480px high, which means the width of the screen, will change when the device is turned around. It is imperative to note this before you get started with mobile web development.

4. Tablet devices: These vary in size but the screen on the iPad, which is by far the most commonly used, is 768px wide by 1024px high. Other tablets such as the Kindle Fire will be smaller.

5. Desktop computers: Their width ranges from 1024px and above. It’s common to set a maximum width for our layout so that on very large screens (for example, over 1200px), the site doesn’t lay out so far that it makes the content difficult to read.

Before starting, it’s a good idea to think about your website, its content and functionality, and consider what the best approach might be. Let us assess the web development options available to us. There are five main options for developing a mobile site as follows:

1. Using a mobile plugin: This gives us a mobile-friendly site with the minimum of effort, but doesn’t give us much scope to incorporate our own design into the mobile site. Many mobile plugins also don’t target tablet devices.

2. Using an off-the-shelf responsive theme: There are a number of free responsive themes available in the WordPress plugin repository. You must know how to tweak them so that your mobile site is more consistent with your desktop site.

3. Using an off-the-shelf responsive theme for mobile devices and our existing desktop theme for desktop computers: We achieve this by using a theme switcher. The advantage here is that we can quickly install a free responsive theme, tweak it to look how we want, and don’t lose the benefits of our existing desktop theme for desktop visitors.

4. Making our own theme responsive: We do this by adding a fluid layout and media queries to the desktop theme we’re already using.

5. Building our own mobile theme and using a switcher to activate it on mobile devices: This is a useful approach when we want our mobile and desktop sites to look different or contain very different content.

SufalamTech is a leading web development company. It demonstrates a track record of successful website, offering other solutions such as php development, web designing, mobile app development and android apps.

Resource: http://www.sufalamtech.com/blog/mobile-web-development-made-easy/
[Read More...]


Return to top of page Copyright © 2011 | Web Development Company Converted into Blogger Template by Web Designer India