Solved

How to get a web page resize layout with CSS to according to resolution ( i.e . mobile devices ) ?

Posted on 2012-03-19
9
284 Views
Last Modified: 2012-06-21
Hello Experts.

I've seen somewhere on a Dreamweaver video of an upcoming feature a while back that can take your webpage and have it resize and change layout if it detects a mobile device or something with a different resolution.

I'd be very grateful for pointing to the right way.

Thanks in advance.
0
Comment
Question by:colonelblue
[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
9 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 250 total points
ID: 37740935
0
 
LVL 30

Assisted Solution

by:IanTh
IanTh earned 250 total points
ID: 37743183
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37743192
0
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!

 
LVL 30

Expert Comment

by:IanTh
ID: 37743216
see
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-creating-a-native-mobile-application/

they bought phonegap of the devs and integrated it into dreamweaver so you can write a app using web design elements
0
 
LVL 16

Expert Comment

by:s8web
ID: 37746571
*Not for points, the first comment steers you in this direction.*

It's funny, we spent a long time waiting for displays to get bigger, and processing power to improve so we could make everything big and shiny, then bam, we're targeting small displays again.

Anyhow, you should take a few to look into 'responsive web design.' You use 'css media queries' to deliver different css content to various display sizes.

The media queries work natively in all good, modern browsers, and IE9. You 'll need to include a little conditional js to support <IE9.

http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
http://designmodo.com/responsive-design-examples/

I noticed that Dreamweaver 5.5 understands this principal. That's probably what you heard about. I use DW as a code editor only. I've never been pleased with it's WYSWIG design stuff. It's best to set up a test environment instead of relying on DW's parser.
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37746687
I have to tell you its not good to target ie9 m$ are going to silently update ie so in the future web code needs to be very strict to work with any ie version I have a feeling that using dreamweaver will work but I think its far better to use now and in the future html 5 as I think that will also help out the situation with ie
0
 
LVL 30

Expert Comment

by:IanTh
ID: 37746698
dreamweaver has integrated phonegap which was available before I useed it with eclips it to do it for mobile devices way before adobe purchased it
essentially an app is a web design its not really going to work as a local app that needs to be done in xcode to use nitro as thats the only way
0
 

Author Comment

by:colonelblue
ID: 37750878
Thank you SO VERY much. I have much to digest.
Cheers Experts!
0
 

Author Closing Comment

by:colonelblue
ID: 37750891
Thanks IanTh and mroonal.
IanTh , you just rock!
Also s8web, thank you for those great additional links. Greatly appreciated!

I wish you all great karma.
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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