Responsive Web Design

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.

Recreate

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 design

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: