Mobile Design

websites

Mobile friendly


Mobile friendly is just as it sounds; the site does not contain anything that will break or fail to load if rendered on a mobile device. You can pinch and zoom to hit buttons, read text and access all the sites nifty bells and whistles.
Treefrog, by default, builds mobile friendly websites. Nothing will break, everything will load, although it will still feel as if you're trying to look at a page through a keyhole.

Why would you go this route? Mainly due to budget/time, but also because not every website needs to have an 'experience' mobile version, which we'll discuss later. You may have already noticed, but iOS7 for iPhone came equipped with a handy tool for Safari (the default web browser on the iOS) that allows you to view the text and images within the main content frame of a website. For those who simply want their users to be able to read on-site content or news items, mobile friendly websites are often perfect.
Just so you have a point of reference, the main treefrog.ca website is what we would call 'mobile friendly'

Adaptive Mobile Design


Adaptive is a development style that physically changes the design of the site as you resize your window. An adaptive design will re-arrange page elements in relation to the size of the window where it is being displayed.
An adaptive design is based on predefined screen sizes. Resizing a window will 're-stack' visual elements based on the width of the display. The websites code has been arranged so that it will reorganize content sections to conform to the display size.
An aside, Treefrog makes a front end development tool called a.mphibio.us which allows web designers to create adaptive layouts. If you want to get a sense of what mobile adaptive websites do, you can load a.mphibio.us on your desktop computer and resize your browser window. The layout will shift, change and adapt based on the size of your screen.

websites
websites

Responsive


Responsive web design is sometimes referred to as 'liquid' design. A responsive design conforms to the physical dimensions of the device you are using to view the site. It will literally morph the content in order to save viewers having to zoom in and scroll left or right to read page content. A responsive design can actually resize images and page content sections based on the width of the screen/device you are using to view it.
There are similarities between adaptive and responsive design, however the biggest difference is probably that adaptive web design is based on fixed columns and screen resolution sizes, whereas responsive design is not fixed.
Resizing the browser window actually changes the pixel ratio of the images within the frame.
This differs from adaptive in the sense that adaptive would not technically resize the images, rather rearrange them into a logical columnar layout depending on the size of the devices screen.

Experience


An experience mobile site is formatted to display on a specific mobile device. It's a completely separate design, and it often requires a separate content structure. Most mobile sites are pared down to contain only the essentials for a quick, nimble experience.
Loading this site on a desktop machine will look strange. Basically, all the content is made to display properly on a mobile device, and is not really supposed to look right on a desktop browser.

websites
websites

Native


A native mobile site is essentially an app. An app is a web-based program, often coded with specific languages (such as Objective C for the iOS platform) specifically engineered to run on a mobile device. The native mobile site will contain separate content and offer a different experience from the desktop website. An app means a whole other site build, a different style of programming, different content loading structure and maintenance. It's a completely separate animal from your desktop website.
The strength of a native app will be defined by fulfilling the need. Some native apps don't need a connection to the web in order to run properly, whereas others do.

What Client Says
Donec tortor felis, egestas non quam quis, aliquet ultrices enim. Donec pulvinar fringilla quam sit amet viverra. Sed et semper diam. Donec mi felis, hendrerit ut molestie a, malesuada ac tellus. Vivamus feugiat tortor turpis, et tempor enim posuere in.