Responsive Web Design

Hi Experts,

I'm having trouble finding a "correct" solution for designing for multiple devices.

I have read different sites and some suggest to use media queries for specific devices where others suggest not to use media queries for specific devices. Some sites suggest to resize your browser and only create media queries where you page starts to break apart. So rather than using the specified media queries that are suggested some people say not to do that and to only use media queries where your design starts to fall apart and then to create media queries for those specific sizes.

I wanted to see what other feedback I get from Experts Exchange about this matter. Any help would be greatly appreciated.

Also, i'm new to this process to please bare with me if I ask questions about solutions.

Thanks in advance!
LVL 4
asp_net2Asked:
Who is Participating?
 
LZ1Commented:
Before I throw an example together, I want to clear one thing up.  When your responsively designing, it's not always about widths.  You'll also want to hide some things, such as larger images. % based widths should be used through out, if that fits the design.  But remember that you'll have to write your media queries to take care of the different widths.

For example:
You don't want to have a 960px wide container if your user is on an older smartphone that has a width of 480px.  

See here for an example media query that may help:
/* 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 */
}

Open in new window


Found this here:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
0
 
Dave BaldwinFixer of ProblemsCommented:
You haven't said what you're trying to do.  ??
0
 
LZ1Commented:
Well there are a ton of different devices and an equal, if not more, amount of theories on how to design/code for all of them.  The best solution is going to be the one that caters to as many platforms/resolutions as possible.  As long as you understand what your doing and what affects what element, then you should be all right.  

I've personally used the 320 & up project and I love it.  http://stuffandnonsense.co.uk/projects/320andup/
It comes with 5 resolution increments and tends to cater to a very wide audience. The above is a boilerplate that you can use to start designing/laying out your site pretty quickly.

The overall goal should be one thing: Usability.  Whether it looks pretty or not is incidental. The user should not have to go through extra work/click/taps in order to get to what they came to the site for. Ultimately what you choose will be up to you, but try to keep in mind development time in case of changes, as well as usability and accessibility.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
asp_net2Author Commented:
@LZ1,

Can you please explain what you meant below?

>>As long as you understand what your doing and what affects what element, then you should be all right.

I guess i'm looking for that needle in the haystack that says "this is what you should use for responsive design".

Basically what I'm looking for is to create one website and use one CSS file that will handle the design/layout of the site for desktop users and other tablet/phone devices.

Also, is there a site or something that you can go by such as a template(s) to use that work well with responsive design?

I basically want to have the following structure below. This is just a rought idea.

- wrapper (will contain all elements on page will use a fixed width of 960px )
- header (will contain logo and main nav links )
- article ( will contain heading of page along with page content )
- aside or section ( will be either on the left or right side of the article )
- footer
0
 
asp_net2Author Commented:
@LZ1,

Are you still able to assist?
0
 
LZ1Commented:
Sure. I'll take another look in a few
0
 
asp_net2Author Commented:
ok, thanks LZ1.

I guess i'm still a little confused as to what the best method is when designing for Responsive Design. Do I design a site for Desktop use and then ONLY worry about the design based on the pixels by the recommened media queries or should I resize my browser until the page breaks and then create a media query there.

This is what I'm confused at, not sure what method I shoud use.
0
 
LZ1Commented:
The theories on responsive design and media queries can go pretty deep.  There's also a theory called "mobile first responsive design". Since desktop browsers are going the way of dial-up, we are starting to design and develop for mobile/tablet environments first.  

If I were you though, here's what I would do:
Go here: http://html5boilerplate.com/ 

Download the template files and play with things.  That's the best way to learn.

Another one you will definitely want to look at is this:
http://www.initializr.com/
This one gives you the ability to "start an HTML 5 project in 15 seconds".  

Ultimately, I want you to keep in mind one thing: Learn it. Understand it. Apply it.  If you have questions, we're always here.  Just keep in mind you need to have a decent understanding of what's happening.
0
 
asp_net2Author Commented:
@LZ1,

Ok, I did look at both links that you supplied and saw and good amount of information. I just have one more question before I close this post based on the templates from the two links that you supplied. Please see my question below.

- When desigining for responsive web design is it better to include all of the sections elements such as <header> , <nav> , <article> , <section> , and <footer> into a "wrapper" div that uses percentages as it's width?

For example do I need to just set the width/height of the wrapper to percentages and all other sectioning elements will adhire to that?

So if you look at my example layout below I only specify #wrapper as a width of 90% and the rest using "px" as the size of the sectioning element. Is that correct?

This is what I'm having trouble understanding with responsive design.

<wrapper>
    <header>
        <nav> </nav>
    </header>

    <article>
        <h1>
        <p>
    </article>

    <aside> </aside>

    <footer> </footer>

</wrapper>

CSS:
#wrapper:
{
width: 90%
}

#header
{
width: 960px;
height: 200px;
}

#article
{
width: 600px;
}

#aside
{
width: 300px;
}

etc...
0
 
asp_net2Author Commented:
@LZ1,

Can you please look at my last post 37829706 for your feedback?

I would like your opinion on how the overal site should be laid out. Do I use a wrapper container to put everything in and then apply a percentage width to just the wrapper container.
0
 
LZ1Commented:
Ok, give me a few and I can get an example together with an explanation too.
0
 
asp_net2Author Commented:
Ok, thanks LZ1, your the best!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.