Solved

Responsive Web Design

Posted on 2012-04-05
12
287 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
  • 6
  • 5
12 Comments
 
LVL 82

Expert Comment

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

Expert Comment

by:LZ1
Comment Utility
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
Comment Utility
@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
 
LVL 4

Author Comment

by:asp_net2
Comment Utility
@LZ1,

Are you still able to assist?
0
 
LVL 30

Expert Comment

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

Author Comment

by:asp_net2
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 30

Expert Comment

by:LZ1
Comment Utility
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
Comment Utility
@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
Comment Utility
@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
Comment Utility
Ok, give me a few and I can get an example together with an explanation too.
0
 
LVL 4

Author Comment

by:asp_net2
Comment Utility
Ok, thanks LZ1, your the best!!
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now