Sent to you by nunok via Google Reader:
What is it and why should I consider it?
Well responsive design has been around for a little while now, it is a technique which allows you to create a website that will adjust its layout depending on the size of the browser window that it is being viewed in.
This is useful mainly because well how many times have you been looking at a site on your phone for example and had to zoom in and then scroll horizontally to view content? Annoying isn't it? Basically with responsive web design you could then create media queries which find out and use the width of your browser window and then adjust the CSS within the queries creating new rules for them allowing the content to be displayed in a more user friendly way.
I'm not going to tell you that you HAVE to use responsive design when creating website…..you don't have to, obviously, but with the world using technology such as tablets and smart phones which have the ability to view websites all be it on a smaller resolution screen wouldn't you want them to be able to see your site without having to exert the effort of zooming in. It also prevents you from having to create multiple websites for mobile and PC as you would just be able to manage the different styles from within the one websites CSS……just saying.
Where should I start?
Well, before I start I will just say this is all in my opinion so don't track me down with pitchforks and try to burn me for what I say next.
The Design
When creating a website to be responsive the main thing to think of is to make sure that you first off have planned for this. If you make sure that you design your layouts for all the screen resolutions that you want to use it will make things a lot easier when coming to actually coding it….bit of an obvious thing but more often than not it's the obvious things we miss! Also when you are creating your designs all be it wireframes or just PSD designs, people will tell you to make sure that the different layouts aren't too different so that when the screen size is changed it doesn't look completely different, in my honest opinion I don't believe this is correct only because I just don't believe that anyone (other than developers who know your site is responsive and want to see the prettiness) would sit there and resize the window.
So basically with this section my main thing to say is be as creative as possible rather than trying to avoid jumpy changes.
Coding the initial layout
Again for me I feel that coding the layout with just the sections at first and then adding the designs and all your creative goodness after you have got everything moving when you want to where you want is a better idea as you can the see the different stages and sizes that you need to accommodate for but again that's just what I do, feel free to ignore that!
If you haven't already looked up media queries prior to deciding to make your site responsive, do it now here is a link to a really good tutorial to how to use them.
What I tend to do when I am coding the layouts for the different sized screens I will make the header changed colour once it hits the different points, this just lets me see initially where everything is, what values would need to be changed etc. just a little thing which made my life easier once when I was creating a content based RWD for myself once.
The important thing to remember when you are coding the layout is to have sample content within the different sections as without this you would be guessing as to how it will look and guessing at the padding making a difference as well as the overflow attributes as these can all be affected when changing the screen size.
Simple section as it isn't really that different to creating a normal website I just thought I would chuck in my two cents as to the processes I go through when creating a responsive website.
Once you have done these two things you will basically be ready to finish off your site with all your creative images, backgrounds, logos what ever floats your boat really as the skeleton for the site will be there waiting to be utilized. Last thing I will say is when the screen gets smaller try to not over fill the white space on the site as this can easily become cluttered.
Conclusion
Concluding this short and very basic beginners intro to why they should consider RWD, I just want to say that I think personally using this technique will allow you to reach a bigger number of people and be more accessible to them wherever they may be (on a train, in an office even in a pub!). I also think it will help your inner designer as it will make you think about the use of white space more and to help you to create a more fluid and user friendly website.
What are your thoughts on this subject? We would love to hear your thoughts, so don't be shy and comment below! Please don't forget to subscribe to our RSS-feed or follow Inspirationfeed on Twitter, Google+ and Facebook! If you enjoyed the following article we humbly ask you to comment, and help us spread the word!
Things you can do from here:
- Subscribe to inspirationfeed.com using Google Reader
- Get started using Google Reader to easily keep up with all your favorite sites
No comments:
Post a Comment