Responsive Web Design

Up Early Designs

Responsive web design means the website is designed to adapt to device of the user.  From a 4″ mobile device, to a  13″ laptop to a massive desktop, the screen in which someone experiences your website can vary. A lot.

As a web designer, what you see on your machine may look nice but when you switch to another device or another browser things can look quite different. Buttons that line up side by side suddenly are uneven when looking on a smaller device for example. Too much content for one button compared to another can cause unevenness as text wraps around.

There’s a lot to think about. And if you don’t plan ahead, you’ll produce a product that is great for some, OK for others and likely horrible for most. The latter being the ever growing use of mobile devices. Fact, there are more mobile devices in the world than toothbrushes.

So what responsive design does, is it “responds.” It know what size device a user is accessing a website and therefore adjusts accordingly. It’s also not just a device. Even the size of the browser you have opened can impact the aesthetics of a  website.

So responsive web design essentially maximizes the viewing experience for all users. Granted, on a mobile device rather than getting the full experience a designer created, the user will see a slimmed down version. Navigation with colorful flowing backgrounds for example become a drop down menu. Though not as pleasing to the eye it is still very functional.

A simple test to see if you have a responsive design is to do one of the following. Simply change the size of your browser by grabbing a corner and moving it arbitrarily so the aspect or width to height ratio changes. See any difference in images or layout? Then you are viewing a non-responsive design.

Another method, look at that same site on a mobile device. Again, does it look any different? The final method, many browsers have developer tools on the upper menu. Select a responsive mode design. This allows you to see a website for any given device. Below is an example of the Up Early Designs website.


Full Size Machine (1920 by 1080)



iPad Pro



iPhone 4