Tag Archive for: adaptive design

iPad 2

Source: Matthew Downey

There is a big push recently to ensure that websites are optimized for mobile devices, especially after Google has openly stated they plan to begin punishing sites that don’t properly accommodate mobile traffic.

There are really two solutions for making a site work great on smartphones. Designers can either create an entirely separate and unique version of their site specifically for mobile phone users to access, or they can choose the more popular responsive design solution which promises to “work on every device.” Both have their perks and drawbacks, but can lead to great smartphone internet experiences when done properly.

The devices everyone forgets to discuss are tablets. While we’re ensuring sites work wonderfully on smartphones and desktop devices, the normal solution is to simply direct tablets to the desktop version of the site and be done with it. While that may sound fine initially, it actually leads to sub-par experiences for a quickly growing market.

According to Mobify’s ebook Tablet Design Best Practices, over half a billion tablets are estimated to be shipped in 2013 and 2014 combined, and that number could end up being higher as prices drop and new options become available. Not only that, tablet users continuously show remarkably high quality of traffic and are more earnest to make bigger purchases than smartphone or desktop users.

If you aren’t optimizing sites for tablet users, you are leaving quality traffic and willing consumers to mediocre experiences that can lead them to take their business elsewhere.

Designing sites that work well on tablets doesn’t require much more time than ensuring you are also delivering a quality smartphone internet experience, and often builds on the same responsive or adaptive framework. Most desktop sites do in fact work on tablets, so long as they aren’t overloaded with Flash, but they become frustrating to use. Buttons are too small or scrunched together, text becomes tiny, and images can become pixelated messes when viewed on the high pixel density screens that are becoming standard.

If you want to create a site that will actually excite and draw in tablet users, you can choose to minorly alter your desktop site with small adaptive enhancements and basic media queries, or you can strip your site down to its basics and rebuild a tablet option that creates a uniquely usable site.

For companies without a lot of resources to spend on creating multiple versions of their sites, improving your desktop site to make it enjoyable for tablet users is often the best option. It can be as simple as making buttons a bit bigger and incorporating the zooming and pinching that tablet users are constantly doing. Text also has to be bigger, but that can be easily solved by increasing font sized to 16 pt minimum. But, there are even smaller changes you can make that can make the site easier to use.

Typing on tablets can be incredibly difficult without any tactile response and overzealous autocorrect, but it isn’t difficult to make your site light on text input or create shortcuts that will save the fingers some effort. It is also a snap to enable contextual keyboards with some simple code adjustments.

But, webmasters who want to really engage tablet users and have the resources to do so can find huge benefits from going above and beyond, taking the basic structure and layout of their site and remixing it with adaptive frameworks to really make the site tablet friendly. It is entirely possible to create an adaptive tablet site without even changing the desktop site, and you rarely have to create entirely new elements for the site. It is more about using the elements you have on your site in new ways.

For example, sites with tons of images can make it so that these high quality images can be pinched and zoomed endlessly, while the rest of the page maintains its original size and clarity. You can also re-imagine your navigation for your site to fit how visitors will be using your site. Similarly, you can attempt to replicate the app style on your website with smooth transitions and panel menus hidden away, but always available at the tap of a button or swipe of a finger.

It is hard to suggest specific techniques for creating great adaptive tablet websites that go beyond simply editing your original desktop page, but that only goes to show how slowly the internet is adapting to one of its most fruitful markets. There are massive opportunities for us to completely redesign the tablet experience for the people actually using them, but designers can be stunted by the need to work for multiple clients, limited resources, and general willingness to rest on “acceptable” sites rather than truly exciting experiences.

Hopefully, as businesses recognize the potential of the market, designers can begin to truly explore the potential for design on these great devices.

We’re officially in 2013 now, and it is time to plan for the year ahead, if you haven’t started already. Planning means trying to predict the biggest trends that will hit design before they get here, which can be tricky, but there are plenty of lists already out there of people making their predictions.

The one I believe is the most accurate is Andrew Kuchariavv’s article on Intechnic. He starts with the same item that has topped just about every list I’ve seen, and seems less like a prediction than a statement. Yes, responsive and adaptive design will only be more important in the next year. There are a few drawbacks, but the bottom line is responsive design means a quality design will look good, if not great, on any display from an iPhone to a desktop.

Predicting parallax scrolling will be more common in 2013 however is a bit more of a reach. Parallax scrolling is a technique where multiple layers of a website scroll at different speeds, creating a 3D effect. For an example, check out Bagigia’s website. There have been sites with parallax scrolling for a short while now, but it is only now beginning to catch on, because it works great for product presentations and looks excellent on smart phones or tablets.

Probably my favorite prediction Kuchariavv made might be more of a hope than a foresight, but it is still fairly probable Flash could finally die in the next year. Javascript, HTML 5, and CSS3 enable just about every animation effect you could make with Flash, but without the need for plug-ins, and compatibility issues with mobile devices.

The next year looks promising for web design, and I personally am excited to see what comes out. There are always the new things we can’t see before they get here, but just these trends suggest websites will keep getting sleeker and more fun to use.

 

There is more than one way to do responsive web design. The most prominent seems to be adaptive web design, which is more rigid and structured because the elements of the site only change when reaching different breakpoints.

Just because bloggers and media specialists focus on adaptive web design doesn’t mean there isn’t another approach with merit. Both approaches have pros and cons, and both will help you more in certain instances.

Adaptive Web Design

The adaptive approach is best when used on sites that frequently go through design changes. Adaptive design doesn’t have to think too far into the future because adaptive designs require regular updates to make them optimized for the latest technology.

The approach uses breakpoints set with media queries as the only changing visual aspect. Usually, this results in about three different layouts, which provide a good experience on most platforms. The downside is along the outer edges of these breakpoints (for example if the range has a maximum of 620 px and the device used to access the content is 619 px) users will begin to have design issues.

The upsides to adaptive design are you don’t have to test it at every conceivable width to ensure it renders properly, and it makes sure the majority of users will have a good experience. Unfortunately, if you aren’t using the most recent and popular devices, you are more likely to have a problem, and it requires periodic changes to keep up to date.

The Fluid Approach

The fluid approach responds to different viewing widths allowing the design to create a suitable layout on nearly every platform. The viewers are able to get a good experience that is catering to the dimensions of their device, but for the designer, the fluid approach requires a lot of time spent checking the site at different widths to see where the design breaks.

The design doesn’t have a “true form”, but an ever-changing appearance molded to fit the needs of the viewer’s device. The ability to achieve this type of design comes from keeping all of the aspects of the site proportional. Everything is rendered based on the size the screen is viewed on.

The best part of this type of design is fluid designs are practically timeless. It is impossible to really predict what will happen in the industry in a few months, let alone years, but fluid designs have the ability to still look aesthetically pleasing on all devices for much longer than adaptive designs.

Conclusion

Both design approaches have their merits. Adaptive design is feasible to be able to make routine changes to stay current, and offers an almost universally pleasing experience with little testing. Fluid designs don’t require the regular updates of adaptive designs, but you will likely end up spending the same amount of time testing widths.

No approach is ever perfect for everything, but these two should keep you covered in most situations.

For more technical information about these two approaches, read Jamal Jackson’s article from 1stwebdesigner.