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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Responsive Web

From novice to tech pro — start learning today.