Last semester in my Introduction to Web Design class, I designed a four page site. The goal was for it to be usable and easy to navigate as well as a crisp design. Although the design part succeeded for the most part, the responsiveness and flexibility of the site was lacking. A few articles on responsive web design that helped me understand what it is exactly is A Beginner’s Guide to Responsive Web Design, Responsive Web Design by Ethan Marcotte, and Smashing Magazine’s Responsive Web Design: What It Is and How to Use It. Below is a screen shot of the site I designed last semester.
Responsive Web Design
In today’s ever expanding technological world, responsive websites are key to a successful website. With the iPhone and other mobile devices and various screen resolutions, it is important to keep flexibility (meaning a fluid grid system and flexible images) and media queries in mind when designing a site. Responsive web design allows the resolution of a site to expand or contract, with the images growing or shrinking in response, as well as the text to wrap a certain way to allow for optimal viewing on any device. This is an example of one of the media querys to utilize for viewing the web on a smartphone resolution of 480px taken from Ethan Marcotte’s article Responsive Web Design.
Changes to Original Site
The changes I would make to my site would be to use a min-width and max-width number in the CSS so my site could grow and shrink in response to the device it’s being viewed on, whether it be an iPad, iPhone, or computer with a huge screen resolution. When I scaled up the size in my browser to view my site, the entire thing, image and text, grew in response. The image lost quality as well as some of the FontFace typefaces I used. My image was set to a certain size and floated to the right to accommodate the space on the right column. This was probably a huge error in thinking right off the bat because I shot myself in the foot in doing so. I did want just a single column of text on the left because it makes readability so much easier and predictable.
When I viewed my site on my iPhone, it looked exactly the same as it did on a computer. Everything was just proportionally smaller in resolution. I had to zoom in and do lots of scrolling in order to read the text. This is because I did not use a flexible grid system nor put a min-width and max-width property in the CSS. The images could grow and shrink in resolution by using media queries but I simply did not know of this when designing the site, much less think about it.
Responsive web design involves a lot of thinking and adapting. You have to know that when you are designing for the web, you’re not doing so for one computer. There is a multitude of devices and screen resolutions that have to be accounted for in today’s society. Instead of pixel dimensions in CSS I’d use percentages to accommodate various screen widths. I’d use media queries to plug in different resolutions for my images so they could expand and contract on any device and computer. Below is an original screen shot of the second page of my site at 960px and a concept for a 480px.
shealy 