Responsive Web Design

Get Started
1

i want to design web site for Responsive which sizes i have to design?

2

I would think less about designing for specific resolution sizes, and instead design your site in a way that will function properly at any screen size. If you base your site around certain mobile screen sizes, and then a new phone/tablet comes out with a new unique size, then your site might suddenly break on that device.

3

which sizes i have to design?

All of them but none of them specifically.:slight_smile:

As mentioned above it should be the content that dictates the breakpoint for you media query and not the width of some yet unknown device. Create a fluid site that scales all the way up and all the way down and you will collect all devices on the way without knowing anything about them.

http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/
http://teamtreehouse.com/library/build-a-responsive-website/responsive-design/content-defined-breakpoints-2

4

Hi klevinparker123,

I think you should have to watch some tutorials from Youtube or Lynda.com then you must be understand which sizes or every thing you are learned from these site’s tutorials.

Regards,
Mamoon

5

Try some online tuts, check these links too-

Sizes: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/
How to Approach: http://www.lukew.com/ff/entry.asp?1816

6

Hi,
Responsive web design means ensure that your website work well in on both large and small devices.While responsive design always consider in mind images, quick navigation, less loading time, typography. So design your website in a way that it run in all resolution sizes

7

If you design to 30x30 then it should fit on any device :slight_smile:

In reality responsive means not designing for a size but building a site that automatically adjusts to the size of the display.

8

From what I’ve known responsive is supposed to fit all sizes. So if you’re going to choose one size, how can it be called responsive?

9

Hi @klevinparker123 I asked the same question about responsive design a few months ago and got some great help, heres the link: http://www.sitepoint.com/forums/showthread.php?1178981-Responsive-Design&p=5601500#post5601500

The most useful piece of information I found from this was this tutorial: http://www.1stwebdesigner.com/css/cr...ideo-tutorial/

I have been doing web design for a year now, so I don’t have the most advanced skill set as of yet and I easily followed this video. Found it very simple to follow and was quite chuffed with myself for building a responsive website.

I’m sure there are plenty of other great tutorials out there, as @Paul_O_B has mentioned above (I’d definitely take a look at these as he has helped me out a lot over the last few months! But just found the tutorial I have mentioned very helpful.

@Smarties83 In relation to your question:

From what I’ve known responsive is supposed to fit all sizes. So if you’re going to choose one size, how can it be called responsive?

I think you’re asking the question that I originally asked on the subject. When you’ve finished the main code for your page you add some additional code as media query, this tells the page to behave in a certain way when the window is a certain size, here is some code that I did in the tutorial, hope this gives some kind of explanation:

 @media only screen and (min-width: 150px) and (max-width: 600px)
{
.body {
	width: 90%;
	font-size: 95%;
}

.mainHeader img {
	width: 100%;
}

.mainHeader nav {
	height: 160px;
}

.mainHeader nav ul {
padding-left: 0;
}

.mainHeader nav ul li {
	width: 100%;
	text-align: center;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
	padding: 10px 25px;
	height: 20px;
	display: block;
}





.content {
	width: 100%;
	float: left;
	margin-top: 2%;
}

.post-info {
	display: none;
}


.topcontent {
	background-color: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top: 2px;
	margin-bottom: 4%;
	
}

.bottomcontent {
	margin-top: 3%;
}


.top-sidebar, .middle-sidebar, .bottom-sidebar {
	width: 94%;
	margin: 2% 0 2% 0;
	padding: 2% 3%;
}

As I said I am just a beginner, so bear with me if any of this is incorrect or pretty simple…jus thought it might help.

1 Like
10

Interested in learning how to make a responsive website also… checking all the links provided… Thanks

11

If you want to creating website for
mobile view you can use
Smartphone <480px

for tablet:
Tablets portrait <768px
Tablets landscape >768px

for desc top:
Desktop >1024px

This dimensions are not fixed one.
If you want change the dimension based on your device.

First of all you have to add meta viewport name and content in the header position of html.

<meta name=“viewport” content=“width=device-width, initial-scale=1”>

And then add the media query in your css styles page:

@media all and (max-width: 420px) {
/* CSS coding for your device*/
}