The Response
The creation of responsive web design is due to the invention of the smartphones, ipads, and wide variety of monitor resolutions available to the public. Everyone uses the internet and with today’s advancing technology people expect to have a flawless web experience no matter what device they are using to surf the web with.
Responsive web design is a way for web designers to adjust their design to fit various screen resolutions without having to create a whole new site to work on a cellphone or ipad. There are various techniques available to web designers to create a responsive web design such as using media queries, Javascript, fluid grids and images.
Applying the Techniques
For this blog post I am going to take the final project for my intro to web class and plan out how I am going to apply a responsive web design to it. To be honest, when designing this website I did not think about responsive web design or really even know the concept.
My final project and first website is called ReCreate, this is a website about recycling and re-purposing recyclable materials.
Fluid Grids
Using fluid grids is a technique used to scale your design proportionately when a site is viewed on a tiny mobile device or even a very large screen. In order to do this, take the pixel width of a page element and divide it by the full width of the page. I designed my site within the 960 grid so if I take the width of one of my daily boxes, which is 460px. So I divide 460/960 = 47.91%
Media Queries
As stated in Beginner’s Guide to Responsive Web Design Media Queries,”basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles.” So, when changing my site to fit a mobile device I would add media queries in my css for a smaller pixel width such as 480px. For the specific browser size, I would adjust my css to fit that pixel width. In my design I am having my daily tip and fact float below each other and move my mission to the bottom. To simplify my design for a mobile device, I would also hide my second set of picture navigation.
Responsive Mobile Design for ReCreate Homepage
Responsive Design for inside page
When thinking about changing my inside pages, there really wasn’t much to change except make it from a two collumn to a one collumn. For the site, I would have to use fluid images and css3 media queries for my images. Another issue I thought about with my site is the hover effect for my navigation, this effect would not be visible on a smartphone or ipad. Adding a selected state to my pages would probably fix my issue if I want touchscreen users to also be able to see the icons.
