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
274 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
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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

25 Experts available now in Live!

Get 1:1 Help Now