<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:

Clarifying Misconceptions About “Pump Noise”
Publish Date 20 Aug 2020 Clayton CarterAshton Scalise

My first days as an MWD field tech I heard horror stories surrounding what is [..]

An Introduction To Responsive Design
Publish Date 20 Aug 2020 Ashton ScaliseAshton Scalise

If someone one were to say, they think it is very important for a website to be [..]

Failure Analysis: Is it Important?
Publish Date 20 Aug 2020 Nathan SzantoAshton Scalise

Yes.

Communication Through Design - Making Assembly Easier
Publish Date 20 Aug 2020 Garret HallmarkAshton Scalise

After dozens of hours designing an assembly and weeks of waiting for parts to [..]

The Virtual Water Cooler

We have all experienced many changes to our daily lives over the past few months. [..]

Implementing OAuth2 Authorization in LabVIEW
Publish Date 20 Aug 2020 John AmstadtAshton Scalise

  What is OAuth2?

Popular Posts

Posts by Topic

See All Topic