I'm wanting to make my website responsive.

I know there are a few downloads like Bootstrap etc. But I don't know how it all works when I integrate it into my website.

I basicly want the website to work with phones.

 

Anyone know any tutorials for to make websites responsive?

Research media queries. And stay away from bootstrap. It may look nice but it creates markup hell and CSS bloat

see here and here

Yes, stay away from Bootstrap. Code it yourself and feel like you've achieved something!

 

Responsive design is simple in principle.

 

1.Design a site to scale in Photoshop using a 960 grid or design the mobile version first and work towards the desktop version.

2.Code your website as usual. (Using HTML5 Bolier Plate with Modernizr)

3.Convert all your widths from pixels to percent.

4.Add media queries to target your device sizes.

5.Test, test, test.

 

You can learn from tuts, as posted above, but I prefer to work with books (still). I'd recommend this one 'Responsive Web Design with HTML5 and CSS3 by Ben Frain.

Just want to add a little something before I get shot down...

 

When converting your width in pixels to percent you have to do it relatively. So if your container/wrapper is 960px wide and contains a div that is 500px wide they would become 100%(container) and 52.0833333%(div) wide.

 

Here is the math: 500/960=0.52083333 --> multiply by 100 = 52.0833333% (just do it all in the calculator, I know there are more 3's in the final answer).

 

As long as you apply this rule you'll be ok. If something is not quite right then you can inspect it in the browser.

 

I final tip is to NOT round you percent. Always put the full number displayed in the calculator and let the browser do the rest.

Edited July 8, 201313 yr by OliverB

Thank you for your comments.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

All you’ve got to do is to fill the blanks

Just want to add a little something before I get shot down...

 

When converting your width in pixels to percent you have to do it relatively. So if your container/wrapper is 960px wide and contains a div that is 500px wide they would become 100%(container) and 52.0833333%(div) wide.

 

Here is the math: 500/960=0.52083333 --> multiply by 100 = 52.0833333% (just do it all in the calculator, I know there are more 3's in the final answer).

 

As long as you apply this rule you'll be ok. If something is not quite right then you can inspect it in the browser.

 

I final tip is to NOT round you percent. Always put the full number displayed in the calculator and let the browser do the rest.

Just a shameless plug. I created an Air app just for this purpose as well as calculating ems. You can get it at http://cibgraphics.com/projects/responsive-calculator

 

It's free by the way

That's great Sash and Cib, that's a very handy link. I think I'll get that later today.

@sash_oo7 Not sure what you mean by fill in the blanks?

@cibgraphics Thank you for that

Hi Vulcan,

 

Fill in the blanks means add your CSS here /* Styles */. So the CSS that is specific to the device you're targeting in placed between the brackets.

 

@media only screen

and (min-device-width : 320px)
and (max-device-width : 480px) {
#div1 {

width: 100%;

height: 200px;

}

#div2 {

width: 100%;

height: 200px;

}

}

 

You want to include your media queries at the bottom of your CSS file. Or you could create a separate one, but then it's another request by the website.

Edited July 9, 201313 yr by OliverB

Okay, So do I create CSS for each device?

I don't want the website to be fluid, the largest size is 980px.

 

Also how do I convert px into %? I have a container inside that is content div and a side bar.

1.Yes you create a media queries for each device but it doesn't have to be everything. For example;

 

/* Desktop CSS */

#div {

width: 980px;

height: 500px;

background: #ffffff;

{

 

/* Device CSS */

@media only screen

and (min-device-width : 320px)
and (max-device-width : 480px) {
#div {

height: 1000px;

}

}

This means that when viewed on a device, that fits the device width criteria, it will have the same width and background colour as on the desktop, but it will use the height specified in the media query. Sometimes when making you site fit onto a mobile device you will delete elements/content that isn't really needed. You can hide by applying the following;

#deviceDiv {

display:none;

}

2. If you don't want a fluid site then you don't need to convert to percent. The only difference between a fixed width and fluid site is what happens when you resize the browser window on the desktop. If you have it as a fixed width as you resize your browser the content will snap into place once a media query is satisfied. If you have a fluid site then as you resize your browser window the content will move/decrease in size to the next media query.

You basically apply a media query when the website breaks. So if you resize your browser window and realise that your navigation is displaying incorrectly at 768px wide, you apply a media query to fix it.

Check out this site . Resize the browser window and you'll see the site resizing nicely. At a certain point the background and menu changes because a media query has kicked in.

Also check this site out, it shows the different sizes of site next to each other. Also download this to resize your browser window.

Okay thanks, I'll see what I can come up with.

Just a shameless plug. I created an Air app just for this purpose as well as calculating ems. You can get it at http://cibgraphics.com/projects/responsive-calculator

 

It's free by the way

 

Just downloaded this, it's great! Stops me reaching for my phone every 2 seconds.

 

Brilliant!!

Edited July 9, 201313 yr by OliverB

If I have an image and I want to shrink it when the the screens change. What Do I have to do?

Images are fun and need a bit of playing with.

 

If you apply this to your CSS;

 

img {

max-width: 100%;

}

It tells the images that they can't go larger than there file size (the size you created it). Now if you want your images to resize then you have to remove the width and height attributes from the images code. E.g;

<img src="your-image.jpg" width="260" height="295"> becomes <img src="img/your-image.jpg">. Don't forget you alt and title attributes for good SEO.

This cheeky litte page can give some good tips but I preferred to buy the book so that everything is in once place and that I'm following one idea.

Just downloaded this, it's great! Stops me reaching for my phone every 2 seconds.

 

Brilliant!!

 

Glad you like it.

I recommend you learn how to use SASS (SCSS). Using this media queries can be nested within elements, for me it helps a lot with maintainability. You can name the breakpoints using a mixin and then you can call the media query by name like a variable or function.

 

I don't like listing breakpoints with names such as 'mobile' I'pad' the're simply to device specific, I just give them generic names like Small, Medium, Large. With the breakpoints themselves not being set at specific device width, but at a width when the content begins to break / look less desirable.

 

Have a read of this for a more in-depth explanation.

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Edited July 10, 201313 yr by rbrtsmith

What kind of website do you have? If your website is related to shopping then I suggest you to try Magento or Joomla.

 

Responsive Web Design really makes the life easier, recently I experienced converting a b2b trade portal on RWD and experiencing good results so far.

If you want creating responsive website just need html and css code only enough.

 

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

 

thats given below:

 

<meta name="viewport" content="width=device-width">

 

And then add the @media query in your css style sheet.

that is given below:

 

@media screen and (max-device-width 480px) {

/* css code*/

}

 

Most probably use the width size "%" instead of "px".

Hi,

Just reading through the above posts but cant get my head around 1 issue that i have.

Pc viewing is fine BUT when looking on the iphone the slideshow images do not resize to the screen but rather stays large.

 

Can you advise please.

The page is here http://www.theremotedoctor.co.uk/zzz.html

 

Thanks very much if you could assist.

Any advice please ?

Hi there! If you need an HTML5 developer look for this company - http://www.intellectsoft.co.uk They made such a job for me, and everything was really greatly done. I guess, it is a great option for you too

hi,

you want to make a website with responsive you need good knowledge about bootstrap and each div u have mention different resolution

You can use CSS MediaQuery instead of using Bootstarp for making your website responsive (mobile friendly). This is more easy to learn rather than Bootstrap. You just have to use HTML5 and CSS with MediaQuery for making your websire mebile friendly. I have used this technology for designing my personal HTML5 Tutorial website and it worked perfectly. You can have a look in this site for getting an idea -

 

http://www.html5tutorial4u.com/