Confused about Responsive Design? These GIFs help.

Responsive Design

Responsive design is more than websites that work on desktops and smart phones. So what is responsive design? 

The GIFs below will demonstrate the principles of responsive design.

Responsive designs fluidly expansive, on the contrary adaptive designs hitch as you expand a browser or viewport.

GIFs 1

Use relative units such as percent of the  screen in place of static units like pixel to prevent your site from looking weird.

relative units vs static units

When the screen decreases, content takes up more vertical space causing anything below to be pushed down. This process is called the flow.

the flow

Breakpoints allow the layout to change at fixed points, for instance having three columns on a desktop, but only one column on a mobile device.

breakpoints

You can make it so collections of onscreen elements adjust to a shrinking or expanding screen as one by using nesting elements.

nesting

Having the same content stretching to the whole width of your television screen is unnecessary it is important to establish a maximum width.

max width

There is not much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). However, it adds extra limitations and helps you make  better decisions if you start with mobile first.

desktop first mobile first

Vector vs. Image

Use a bitmap if your icon has lot of details and some fancy effects. If not, consider using a vector image. A vector image can more properly adapt to different resolutions.

vectors or images

I hope you enjoyed the GIFs demonstration!

When Responsive Design hit the automotive space over a year ago, it was a brand new concept to many. The idea that dealers no longer needed a separate mobile site, but a single site with a Content Management System (CMS) that automatically adjusted to various screen sizes, seemed too good to be true. Now, a year later, there are a large number of car dealers enjoying this great new architecture. When Responsive is deployed properly, dealers witness both an increase in mobile traffic and site visits. Additionally, home page and landing page bounce rates are reduced.

Not all responsive sites can make this claim, but Dominion can. Our responsive sites optimize images so that loading time is expedited. In fact, PCG Consulting ranked Dominion Dealer Solutions as having the “fastest loading sites” in the industry. The study is listed here.

Share
Posted in: