Adaptive web design how does it work?

Don't you hate when you're surfing the internet or you are logging into you favorite online application and the design is all over the place and you can't see or get access to the tool or information? It is frustrating and a waste of your time. It does not have to be that way if the sites designer and developer can implement and design a site that uses the adaptive website design process. Adaptive design is the way of the future in web development, there are many advantages and benefits for the user of your website and it will assist in an increase in traffic for you.

What is adaptive design?

Adaptive design allows a user to resize their browser and the content will change to fit the circumstances. This is really useful for different size screens, for example if a person has a smart phone or a desktop computer the content is able to move accordingly. Better adaptive design will even remove irreverent information making it easier to give the viewer exactly what they are looking for.

Adaptive website example

One of the best at adaptive design is the Boston Globe web development. If you resize your screen browser it moves the information around to display in an orderly and relevant fashion, making the information always easy to access and ensuring the user will get the best experience on any size screen.

Flexible website application

Purencool Website Development are working on a html5 web app that will resize on any screen. Below are some screen shots of Purencool Iticket, an online html5 application we have designed and developed using adaptive design. You will notice that as the browser size gets smaller the login and register buttons move and adapt according to the screen size. The images go from a large screen to a small screen. 

This is Purencool Iticket at full screen size as you can see the Register and Log In buttons are in the middle of the screen. This way the user knows exactly what they are here for. If this was a static application when a user accessed the login page with a smaller screen they would not see these buttons.

As the browser gets smaller the buttons keep moving to the center of the page so there is no need for the use of scroll bars. The information keeps resizing so that the user on a smaller screen can see the relevant information that they have come to that website for, in this case it is to log in to the Purencool Iticket application.

This screen is the smallest Purencool Iticket will go to, after this the design will start to shape badly. In our design we have made it so any smart phone will get sent an altered design to best suit the screen, this is called responsive design but that is a post for another day.

If you would like to try it for yourself please go to Purencool Iticket and resize your browser and see website adaptive design for yourself and if you want to log in to see this application the username is: purencool and password is: q

Adaptive design and media queries

How is adaptive design achieved? First of all and most importantly is in the design stage it has to be a part of the decision making process. Technically CSS 3 media queries are the key, they get the size of the browser and make the changes that are needed when the user resizes the screen. An example of this below says when a screen size has the maximum width of 1024px then the Log In box (which is the div that holds the Log In and Register button) will position itself 25% away from the right hand side of the screen.

Want to know more about adaptive website design

If you want a more indepth look at responsive design I recommend these references I found them very useful and it talks about the principles around adaptive design. If you want to know more about how we can help you with your online strategy please call us or contact Purencool Website Development now

For your reference these articles I found very useful and give a rounded view when to use this type of design element. The first one explains what adaptive website design is http://www.lullabot.com/articles/responsive-adaptive-web-design and the second article explains how you can use CSS3 media queries in your development of your online site http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/