Menu Close

Responsive Design and Media Queries

Responsive Web Design

I learned from responsive web design about the term “responsive architecture.”  This deals with how physical spaces can adapt to the presence of the people using them. In a sense, this is about creating an interactive experience. Responsive architecture is used when designing art, buildings, or amusement parks. However, this same principle can be used when designing a website. In the age of fast-growing technology, companies must learn to adapt their sites so that users can get a complete experience on whatever device they are browsing on. Nowadays, people are more likely to browse on an iPhone/smartphone, tablet, or laptop; as opposed to a desktop computer. By using responsive web design, business owners and tech people can make their site adjust based on what kind of screen it is on. This solves the problem, of a site’s layout dramatically changing (for the worse) when visiting a site on a mobile device. You can find out more about responsive web design by visiting the link below.

Responsive Web Design

rwd

(image from icenineonline.com)

Introduction to CSS Media Queries

Media queries in CSS coding allows a user to target specific screen sizes. In other words, you would have a different set of style commands that take effect, depending on the device you’re using. Media queries look at several factors, including height and width of the device, height and width of the browser, screen resolution, and orientation of the device. The only problem when putting the queries into effect is the browser. They won’t work if you aren’t using a search engine that supports media queries. If you want to learn more about how media queries work, check out the link below.

Introduction to CSS Media Queries

mq

(image from www.cssmania.com)

The Pros & Cons of Responsive Web Design vs. Mobile Website vs. Native App

The great thing about responsive web design is it allows you to make one website that is capable of fitting the screen size of whatever device is used. Therefore, the site will look just as good on any device. Implementing this design is cheap, since you only have to maintain one site, as opposed to several for each device. Also, there will only be one URL for your site, SEO (search engine optimization) works just as well on all devices, and the marketing of your company is easier when a company site can be viewed anywhere.

However, there are a few downsides to RWD. It may be difficult to maintain the exact same content on each screen, It’s possible you may need to put different emphasis on data on different devices. Another downside is the speed of loading the websites could slow down, since different CSS coding has to be factored in. Lastly, if you are having to change a little bit of content on each site, therefore leaving something out, you may be left with an incomplete viewing experience in each site-viewing method. To understand more about the pros and cons of RWD, visit the link below.

Pros & Cons

1 Comment

  1. Ashley Marinez

    Awesome summaries. I really liked the way you laid everything out as well. looks very clean. Good job!

    Ashley Marinez

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.