Adaptive, Fluid, Responsive or Static?

Responsive or Adaptive?

Responsive web design allows you to create a website that will adjust itself to fit the size of the browser regardless of the size of the screen. It means you code it once and it will flow more like a grid with images that will rescale themselves to fit the screen.

Adaptive web design is where you make lots of different versions of the same website so that it fits the different screen resolutions perfectly, while effectively gaining more control of the specific user experiences, it is time consuming. Adaptive design uses breakpoints that mean once you reach a predefined point, the layout will change to fit the screen again.

Something to take note of when making adaptive or responsive sites, is that they all use the same information but use styling to change the information. For example, an image is required at a large size, then the browser will resize it depending on the screen size. Therefore, when possible, it is important to use vectors. It is equally important to remember that you should always design for the desktop and then work smaller down to mobile rather than starting at mobile size.

So overall, fixed websites, the ones I am currently learning how to build have set widths and no media queries (allows the size to understand the size of the device it’s being used on). Fluid websites are a little different, they rely on percentages for relative widths to the browser itself, therefore they don’t need to you use media queries either. Adaptive are built to certain resolutions, then require media queries to determine the device or resolution, these usually rely on set or relative widths. Responsive seems to be a lot more focused on the actual resizing of the display as it is actually designed at multiple levels using again media queries and relative widths.

I found the utility http://www.liquidapsive.com/ which has the same design but allows you to change the way it is coded so you can see for yourself fluid, static, adaptive etc. This allowed me to find the negatives of using every type design. My first finding, one that I was already experiencing when designing my site was when you try to reduce the size of a static site;

1

Adaptive is time consuming and works well for smaller devices but as you can see there are white borders on each side of the design once you reach a certain size.

2

Liquid, because it uses percentages of the width works really well at larger sizes but starts to become illegible when you start to minimise it to a smaller level;

3

Finally, responsive seems to be the go to style as it works when the browser is both really large and really small.

Having understood the different types I thought it would be important to have a look at current responsive sites, as it was the best option from the four above.

Meti Design is a really nice responsive site complete with animation, smooth transitions and a nice 3D animation using frame loads like I noted previously in Sony’s Be Moved Campaign (https://akbrodie.wordpress.com/2014/10/15/website-analysis-4-dangersoffracking-com/). This makes the website look very professional and I found myself wanting one of the products they produce, whether that’s because of the website or not, I am unsure.Below you can see the different screen sizes effecting the page, and how similar the experience looks.

4 5

Skinny ties also have created very good responsive site that promotes the ties they sell. It works just like a responsive site should but has thew addition of a feature that I haven’t seen anywhere else. This feature being the fact that the rollover still works regardless of the screen size, I am unsure if this is pointless or not as when the screen sizes are smaller they generally are touch screen but it turns out that when used on a mobile, the rollover menus come up when the menu items are clicked on. Below you can see the images of the screen sizes and then the different sizes with the rollover menus.

6  8 7
9

Mry is probably my favourite out of the lot though, doing what my research said about starting with desktop and working your way down removing parts bit by bit. The desktop version is complete with zooming circles with flat colours and images in the background while the mobile version has none of this and turns into a box style, therefore creating to completely different experiences for the user depending on how they view the site. You can see this here;

10  11

12

References;

http://mry.com/

http://skinnyties.com/
http://www.metidesign.com/#

Advertisement

WEBSITE ANALYSIS 4 – DANGERSOFFRACKING.COM

dangersoffracking.com informs its user to the environmental damage, safety and health hazards caused by fracking, it does this with a great user-friendly experience with animation that takes the user on a journey from the city where the gas is being used to where it is being fracked. It’s aim is to bring awareness and essential get people to vote for the Fracturing Responsibility and Awareness of Chemicals Act which would “require the energy industry to disclose all chemicals used in fracturing fluid as well as repeal fracking’s exemption from the Safe Drinking Water Act”.

The user starts as a droplet of water at the top of the page, then as you scroll you travel as the the water drop in the the form of a truck towards the fracturing site. From there, you continue your journey under the ground, as a droplet of chemical, through land, oceans and finally to a an open air pit for evaporation. You can see the smooth transition of the animation with the images below.

1 2 3 4 5 6

The animation and fluid parallax scrolling takes the user on a journey describing every stage fracking goes though and the effects it has on them. After effectively selling the reasons to be against fracking the website jumps straight to the section that encourages users to take action against the ‘dangers of fracking’ by supporting local organisations ect.

WEBSITE ANALYSIS 5 – SONY’S BE MOVED CAMPAIGN

Sony’s ‘Be Moved’ campaign main focus is to allow users to look deeper into the products they create and the teams that work in them. They created an elaborate website with a fully immersive user experience using parallax scrolling, which is where the foreground images move faster than the ones in the background. This method of having separate layers within a page and manipulating the size and the speed they move you can create a sense of depth.

The method of having images and text moving alongside each other and flowing in front of and  behind each other looks like something that would be somewhat of a nightmare should it be attempted using code.

The website is complete with animations of shattering glass, assembling of products and visual scenes of underwater, forests and the universe. It looks very professional and an extreme version of a parallax scrolling site, at first glances this website seems extremely complicated to build, but doing a bit of research I came to the understanding that it was much more simple than how I’d imagined.

By creating a video sequence that lasts 1306 frames and allowing the user to flick between the frames by scrolling is essentially all that is needed to create a website as creative and professional looking as this one. It then creates a website that looks like nothing else on the market as it would be extremely difficult if not impossible to create the movement of some of the objects in 3D space with just normal code. Looking at the code;

img_source-code

the .frameloads is a function that makes the display move on the the next image when thhe user scrolls, and the small_256,small_512 and large_960 are for the different size images for the different sized displays.

Screen Shot 2014-10-27 at 14.15.20 (2)Screen Shot 2014-10-27 at 14.16.21 (2)

Screen Shot 2014-10-27 at 14.16.56 (2)

As you can see it is very visually appealing, the textures and layers just create this completely immersive experience for the user, telling the story of how they engineer and design together.

References

http://subtlepatterns.com/thumbnail-view/page/16/

http://discover.store.sony.com/be-moved/

https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/