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

Transitioning from LabVIEW Developer to Firmware Developer
Publish Date 20 Aug 2020 Rohama KhadijaAshton Scalise

When I started at Erdos Miller, I did LabVIEW development for clients. One day, my [..]

Improving Project Success

Projects take many shapes and forms. From personal day-to-day things, to multi-year [..]

Technical Contributor to Stepping into the Project Manager's Seat
Publish Date 20 Aug 2020 Grant CampbellAshton Scalise

From Being a Technical Contributor to Wearing the Project management Hat

Persistent Settings in Desktop Applications
Publish Date 20 Aug 2020 Jamison GrayAshton Scalise

What is a Persistent Setting?

A Tip on IDE Setup to Make Programming Easier
Publish Date 20 Aug 2020 Yifang YangAshton Scalise

We have come a long way in computer programming over our history. There was a time [..]

The Petrochemical Supply Chain and Erdos Miller
Publish Date 20 Aug 2020 Cameron BashamAshton Scalise

Oil is a resource that is of particular interest to every reasonably-organized [..]

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 [..]

Popular Posts

Posts by Topic

See All Topic