We are going to talk about the last two today, Adaptive Design and Responsive Website Design.
There are a lot of terms that people like to through out when it comes to website design.
“Mobile First Website Design” “Adaptive Website Design” “Responsive Website Design”
It makes me think of something Bruce Lee once said in Enter The Dragon,
“Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way around or through it. If nothing within you stays rigid, outward things will disclose themselves.
Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot. Now, water can flow or it can crash. Be water, my friend.”
Your content, (images and words on the page), should be fluid no mater what device you are on.
Adaptive Design is the methodology that is used to somewhat retrofit a non Mobile friendly site and make it more more mobile friendly.
Responsive Design is the methodology used to show the content of the page based on the width of the screen or window it is being viewed.
By doing so, not only can the content and design be device agnostic, depending on the the design, and the elements, the order of elements on the page, and the actual content on the page can change since we can detect the size of the device!
Below you will see a quick example. If you came here from our homepage, depending on the device you were on, you will see a video header (on large screen devices), and you will see a static image of our logo (on smaller screens). There are several reasons why this is done. First and foremost, it is done for load times for Mobile devices. You want to be nice to the people that are visiting your site on a mobile network. You want your site to load quickly, while not eating up there data if they are not connected to WIFI.
Below, you will see what kind of device you are on. If you are on a phone, turn your sideways. If you are on a desktop, adjust the width of your browser window.