<img height="1" width="1" src="https://www.facebook.com/tr?id=1101141206686180&amp;ev=PageView &amp;noscript=1">

Blog

An Introduction To Responsive Design

If someone one were to say, they think it is very important for a website to be “responsive” what does that mean to you? I can tell you what I thought when I first heard the term “responsive website”.

 

I had initially thought it meant that the website was fast and had slow loading times. That when I had clicked a button the action would be executed immediately and be able to keep my low attention span from clicking off the website. As it turns out, I was wrong with my assumption and I know I am not the only one who has had this misconception.

 

Modern smartphones and tablets have revolutionized how developers go about designing websites. According to Google about 50% of all web traffic is done through a mobile device. Designing a website for a smartphone versus a desktop is going to be completely different. We want all of our users to have a good experience when visiting our site. The way we accomplish this with “Responsive Design”. We want our website to respond with how it renders elements based on the size of the device.

Assuming you are on a traditional desktop monitor/laptop, take look at the navbar on this website -

navbarBig

Now look at what happens when I resize the window to be closer to the size of a smartphone -

navbarSmall

 

The navbar responds to the size of the screen by collapsing the navbar in order to fit on a smaller size. Simply making the navbar smaller with respect to the screen size would not be a good alternative because these links will be used on a touch screen.

 

On the topic of keeping links suited for a touch screen let’s take a look at another example. BMW’s website has a button at the bottom of the page near the footer to display more content. Here is how it looks on a large screen -

BMWButtonBig

 

Now when I resize the screen to the size of an iPad, notice the button actually gets bigger despite the screen being smaller -

 

BMWButtoniPad

Despite this initially seeming counter-intuitive, remember this is made for a touch screen in mind. So things like buttons can sometimes be better suited to be bigger accounting for a loss of precision when not using a mouse.

 

 

If you are interested in exploring how your favorite websites look on all different devices, google chrome has a neat feature to do so. After loading your favorite website press f12 to open the developer tools. You may then toggle the device toolbar by clicking the icon developer tools. After that you can click the dropdown to select different devices.

redditDevTools

redditDevToolsiPhone

If you didn’t already now you understand the basics of responsive design!

Recent Posts:

Filtering Basics: Importance of Linear Phase
Publish Date 20 Aug 2020 Jason ThaiJason Thai

Linear phase and computation/memory complexity are important characteristics to [..]

Revisiting OAuth 2 in LabVIEW
Publish Date 20 Aug 2020 John AmstadtJohn Amstadt

Recap In my previous blog, we took a look at how to implement OAuth2 in LabVIEW. [..]

Engineering a Better 3D Print (Part 1)
Publish Date 20 Aug 2020 Michael MaloneyMichael Maloney

3D Printing and its widespread use has been a long time coming and seems to have [..]

NVCC – Intro to Utilizing GPU Power to Offload the CPU Part 3
Publish Date 20 Aug 2020 Jack BakerJack Baker

Assumptions: Machine has a Nvidia CUDA Core GPU (such as a GeForce) with installed [..]

How I Learn New Skills for Personal Growth
Publish Date 20 Aug 2020 Bryce UrestiBryce Uresti

Learning new skills can be quite the task especially when there's already so much [..]

Controlling the Supply Chain Dream
Publish Date 20 Aug 2020 Thomas MathewThomas Mathew

You are out with your friends, bird watching, and nothing could be more peaceful. [..]

Aligning Data in WAVE
Publish Date 20 Aug 2020 Rohama KhadijaRohama Khadija

When analyzing data from multiple sources, we often find that the time series data [..]