[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Responsive Web Design

Posted on 2012-04-05
12
Medium Priority
?
325 Views
Last Modified: 2012-06-27
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!
0
Comment
Question by:asp_net2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37813036
You haven't said what you're trying to do.  ??
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37813075
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37813844
@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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 4

Author Comment

by:asp_net2
ID: 37828634
@LZ1,

Are you still able to assist?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37828662
Sure. I'll take another look in a few
0
 
LVL 4

Author Comment

by:asp_net2
ID: 37828800
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37828871
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37829706
@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
 
LVL 4

Author Comment

by:asp_net2
ID: 37834948
@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
 
LVL 30

Expert Comment

by:LZ1
ID: 37834976
Ok, give me a few and I can get an example together with an explanation too.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 37835036
Ok, thanks LZ1, your the best!!
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 37835075
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question