BLOG > Web Design > Responsive Web Design

Responsive Web Design


Posted on January 13, 2012 02:00 pm | by Krissada Dechokul
Responsive Web Design

When I first started to design this website, there are 2 web design concepts that I really wanted to explore, grid systems and mobile web design. After I had researched for a while, I found one solution for web design that works quite well and can tackle both design concepts. It’s called fluid grid system. So I try to put this kind of system into the design.

Grid System

Grid-based Design

Grid System is a design approach that try to streamline web development workflow by providing commonly used dimensions in web design for example 960 pixels or 1140 pixels which are based on today’s computer screen resolutions. The system allows for you to divide those dimensions of pixels into a number of columns of choices from a 12, 16 to 24-column grid to layout the structure of any websites resulting in making your web page look more organized. Have a look at A Brief Look at Grid-Based Layouts in Web Design and The 960 Grid System Made Easy for a brief information about grid system.


So rather than using traditional table-based layout for elements placement in webpages which has inconsistent appearance across different web browser and is hard to maintain, this design approach embraces grids and divs which is flexible and far more efficient to maintain and redesign. Have a look at CSS vs Table if you aren’t convinced yet.

Mobile Web Design

Resolution Comparison

Another concept that I’m also interested is mobile web design. New sizes of screen resolutions have emerged as there are new smartphones and tablets introduced every year. I wanted my website to look best of these things as well. There are many different approaches to bring mobile support functionality into websites. After considering both time and resources that I have, I decided to build my website using adaptive layouts to support mobile rather than to build a whole new mobile version of my website which might consume too much of my time. Have a look at Picking A Mobile Support Strategy For Your Website which provides quite useful information about many approaches for mobile supports as different project might have different design criteria and budget hence choosing different approach. Mobile Web Design: Best Practices is a very useful article to look at for best practices in mobile web design.

What is Fluid Grid System and Responsive Web Design

Responsive Web Design

Fluid Grid System is just like an ordinary grid system except that the layout of webpages designed by this system will be adapting based on the screen resolution of the viewing devices, in other word, the layout is “fluid” based on screen size and orientation. This kind of design is one of many approaches for the web design concept called Responsive Web Design suggesting that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The concept I want to call “design once, run on any device”. Actually you can resize your web browser right now to see how it adapts its layout across different size of your web browser. You can dive into Responsive Web Design: What It Is and How To Use It for more information about responsive web design.


There are many frameworks of choice for implementing fluid grid based websites for example Fluid 960 Grid, Tiny Fluid Grid, Columnal, or 1140px CSS Grid. For me, I’ve chosen the 1140px CSS Grid as I considered 960 pixels a little too small and the Columnal was just appeared after I implemented this website with the 1140px.

Conclusion

The result is quite impressive since the layout of my website adapts quite well and look pretty good on my iPhone 4 and my iPad. The look this website on the old Internet Explorers is quite acceptable as well. And the grid design really helps the website looks organized. So I think the Grid System and Mobile Web Design together are useful concepts to study for design once, run on any device that you might consider to apply them to your next web project.


Lastly, This website is not perfect and I know that there still are things needed to be improved. I believe in continuous improvement and as my professor always says, “There always rooms for improvement”, until the next design trends come out, I’ll try to improve this website for a better browsing experience.


Related Posts

 
blog comments powered by Disqus