The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App
I never considered the idea that you need to adapt a website to fit certain devices whether it be mobile, desktop, game console, tablet, etc. I guess it’s sort of like watching a DVD and it says that the picture has been automatically reformatted to fit your screen. It’s not like I know what all goes into a DVD, but something tells me that formatting for different devices on the web may be a little more difficult. For the web you want to maintain a certain look and functionality while still making sure your audience is receiving the intended message. But then you are still faced with the problem of trying to get your site to format with pretty much anything without having to create ten thousand different sister sites. In this case you would be using a responsive web design as discussed in The Pros and Cons of Responsive Web Design vs. Mobile Website vs. Native App. Personally, I find that responsive web design is your best bet if you want to save yourself time, frustration, and money. On the downside you potentially face frustrating your users. I must say though, the Smashing Magazine’s small design looks pretty good to me.
Introduction to CSS Media Queries
Media queries are here to save the day (clearly). When I was reading the Pros and Cons article I was worried about how you would accomplish making a website that is ‘native’ to a desktop fit on a mobile device and still have the pictures fit the same. I was thinking that you would have to just go through a bunch of hoops and have multiple copies of the same pictures. I wasn’t too far off, but with media query, it’s a lot simpler than what I thought in my head. I learned that you are able to keep the picture as is without overwriting it, which would unfortunately change the picture for whatever device it is displayed on. Fortunately you are now able to isolate it. I like to think of it like putting an alter ego in a box and taking it out whenever you are ready to use it. The box would be a separate CSS for the sites mobile personalities only. That probably makes no sense written down, but it makes sense in my head.
Responsive Web Design by Ethan Marcotte