I've created this page specifically to test the various tools used in creating a responsive web page. I really hope it works!!
Responsive web design is built on a fluid grid and uses media queries. Media queries control the design and content as the page scales up and down with your broswer or device. Forget about trying to make your website look the same in every browser and devie, focus on instead allowing your site to break, mold and conform to the size and dimensions your user wants to experience it at as they resize their browser. This allows for a seamless user experience rather than being device specific
Below are 4 different website display forms:
- FIXED. Fixed webpages have a set width, usually set in pixels. Resizing the browser or viewing it on different devices won't affect the way it looks.
- FLUID. Make your site fluid. Use percentages for your width columns instead of pixels. This makes your columns relative to each other and the browser which means your browser can scale up and down FLUIDLY
- ADAPTIVE. Introduce media queries to target specific devices like smaller monitors, tablets and smartphones. Adapative sites can be built on both fixed and fluid grids.
- RESPONSIVE Built on a fluid grid and use media queries to control the design and its content as it scales up and down with the browser or device.