Tag Archives: responsive website

Responsive Web Design Vs Adaptive layout, Which One Rocks?

The Mobile web has been revolutionized with smartphones, and tablets with their growing popularity are throwing another wrench in to the gears. Considering this, a website of today must perform parallel and with great efficiency on a low resolution smartphone, a medium resolution tablet or a high resolution desktop or laptop.

This is what a responsive or an adaptive web design offers. Both are basically processes that make a website work efficiently on very small screens, very large screens and at any resolution without sacrificing the User interface or experience.

Over the last few years, the design industry has collectively developed a list of common practices for making websites for the mobile web. Many of these practices involve retrofitting websites to perform on high resolution and down to the lower sizes. While some focus on smartphones first and then work up to the larger viewports, scaling the content as needed.  These practices can be categorized as either a responsive web design or an adaptive layout. Starting with the Adaptive layout, lets briefly discuss what these two are and how do they perform.

What Is Adaptive Layout Design?

Before responsive web design went big, adaptive techniques and layout dominated the industry. Although it’s easier to transition a normal website into adaptive layout, but they require more work if you are making a website in adaptive from ground up- even more than a responsive website. This is also the reason why most people choose this route while retrofitting an existing website to make it mobile friendly.

Designing In Adaptive

responsive_vs_adaptive_01

Before responsive or adaptive web design became a thing, you simply designed a single layout and developed it. However, in Adaptive layout you design for multiple viewports and then go for development. It’s generally easier to begin designing at low resolution view ports and work your way up.  But if you go reverse, meaning if you start with high-resolution and go down towards low, things can end up a little cluttered. The number of viewports you choose to design for is entirely up to you and the developer, but it’s also sensible if you first formulate a strategy based on where you are getting your visitors from and then decide from those view ports.

Developing In Adaptive

responsive_vs_adaptive_02

Developing in adaptive layout is similar to developing a traditional website. You will begin developing the site at low resolution for mobile viewport then you will use media queries to expand the layout for higher resolution viewports.

Keep in mind that the adaptive layout jumps if you decide to test it just by resizing your browser window. This is because you are only targeting multiple common viewpoint resolutions and not all the independent common viewports-which is also much more of a hassle if not required.

What Is Responsive Web Design?

As of today, responsive web design and development is a catch all term and the most commonly used approach for making a website to work on all resolutions. This is because in responsive web design there is technically less work and maintenance as you only have one layout. It can also be more customized for a website, and this is the key feature. Responsive web design also includes fluid layouts which are amplified by media queries at either low or very high resolutions. 

Designing In Responsive

responsive_vs_adaptive_03

Adaptive design lets you have a simple guide to follow while responsive design isn’t so simple. Many designers argue that designing in the browser is the best way to go about responsive. Some even suggest designing & developing at the same time. As in responsive you have to take all the viewports into consideration, there is more work involved on the design side. It is also an ideal practice to keep the viewports in mind, but not the design of any particular one. We also suggest that you should try to work on a middle ground by focusing on mid resolution and keeping in mind that the layout should be adjusted for lower & higher resolution later.

You would also need to keep in mind your existing user analytics and devise a design strategy in according to that.

Developing In Responsive

responsive_vs_adaptive_04

This is where the real fun begins. Once you have designed the layout of your website, you will use the media queries to make it responsive. However, here you will not be defining set viewports; instead you will manually resize your browser until you see breakage. This is when you will set your breakpoint width and add a media query to fix design breakage and continue. The ideal way of doing is from a high resolution device so that you can see and test all viewports. Once you have worked for both low and high resolution, move on to final testing.

Responsive Vs Adaptive

responsive_vs_adaptive_05

If the agenda is to perform exceptionally well on all the devices and screen resolutions, then Responsive web design and development is by far the best choice to make. But in some cases especially for complex web apps an adaptive layout can serve visitors better. That being said, there are some businesses that choose the concoction of both the solutions while inclining majorly towards responsive web design. This is because the idea is to have a rock solid display and experience across all mediums which is made relatively possible and budget friendly due to the technologically advanced responsive layout. Plus, most of successful startups of today, suggest that their key to convert on all the platforms is because of a well styled responsive website design and creativity which transforms the experience even more.

It is also worth mentioning that if you still have audience in IE6-8 and you are having problems serving there, you can make things work with polyfill CSS3 Media Queries. If you need inspiration regarding adaptive or responsive designs, you may want to have a look at Mediaqueri.es.

Need a website that looks great and brings customers from all screen sizes, Contact us for a responsive web design. Quotations starting from $400.

5 Great Tips for Tuning a Mobile E-Commerce Site

5_great_tips_mobile_ecommerce_01

It has been estimated in the last holiday season alone that mobile e-commerce traffic is accountable for more than 50% of the traffic generated in the online realm. Besides traffic, more than 25% of the online conversions or purchases have also been made through various mobile devices.

With experts in mobile strategy hinting that there are more mobile devices than all the people in this World, the competition is tough- too tough for mobile commerce or M-commerce to be ignored in 2014.

So if you own an online Store, it’s high time for you to go mobile and enhance your reach to the millions of potential customers wanting to explore your catalog through their fingertips. What’s even more important than crafting a mobile ecommerce store, is tweaking it to become a magnet for mobile explorers with an interface that promises a swift buy out process.

Here are 5 things to keep in mind while tuning your mobile ecommerce site for greater performance, UX and traffic.

1. It Isn’t Just Your Desktop Website On A Small Screen

5_great_tips_mobile_ecommerce_02

Your desktop website could have some great design works and features and it’s tempting to have them scaled and adapted into small screens, but that’s not what you should be doing. Instead, try leveraging your design and features and show only what’s necessary and appealing to a mobile user. Always remember that a mobile website or app isn’t just a compatible view of your website on small screens-So don’t try retrofitting your desktop ecommerce website. Plus, this is called “Satisficing” and can affect your smartphone experience.

A mobile first strategy in designing a mobile ecommerce website, requires you to redesign from smartphone up. Here you need to ensure that besides showcasing your catalog, you have minimum viable content, functionality and that your pages load faster. Also keep in mind that a mobile first approach isn’t just hand coding for a smartphone only. You can keep the tablet experience as your starting point and then scale your design requirement accordingly.

2. Make Simpler & Smarter Forms

5_great_tips_mobile_ecommerce_03

Whether it’s a single field email entry system or a complex setup of user registration and checkout, most of the websites or mobile apps these days make form submissions as their main conversion goals. Hence, best practises for a mobile ecommerce website in tweaking forms are to keep them simple and as less sophisticated as possible.

Try inhibiting fluff entries from the forms you use for your mobile website. Also, place labels before each field, avoid in-line labels and disable the feature of first letter capitalization from email and password fields to enhance the experience of users while they are providing touch input.

3. Prevent Mobile SEO Hiccups

5_great_tips_mobile_ecommerce_04

In an official note Google states that “Faulty Redirects” and “Smartphone-only error” are the two commonly occurring mobile SEO hiccups that developers can easily fix. What faulty redirects do is that they detect wrong user agent and they send your mobile visitors to another URL (wrong URL), which is often the home page.

On the other hand, Smartphone-only errors occur when Googlebot Mobile is botched which creates an infinite loop of redirects between your desktop website and the mobile website. It can also result in serving a 404-page error at a smartphone friendly URL.

4. Display Content In The Context

5_great_tips_mobile_ecommerce_05

As mentioned above, you don’t need to copy your desktop website for your mobile website. The fact is if you know the context of your user’s mobile, it’ll be a lot easier for you to design your website, find out what images can you keep in the navigation, what products to feature and understand what needs to be where.

Aligning context with your content can also help you to find out which site tools you can use in accordance with your web needs, such as displaying physical store finders etc. You can also provide your mobile web visitors with an app like experience by taking advantage of the gadgets rich media such as camera, geo-location, push alerts and other features by using HTML5.

5. Be Fast

5_great_tips_mobile_ecommerce_06

Loading speed is a very critical point on mobile. Users are on the go and if your services are slow they are unlikely to stay. This is why it is always an advantage in using a mobile specific design which has light load than a responsive design to serve users.

You can resize, compress and optimize you images for small screens in a mobile specific design. You can also reduce fluff, scripts and redirect- OR further use a CDN service to speed things up even more.

If you want Dezine Geek to implement the above mentioned tasks in your mobile site or if you want to discuss a mobile app development.