Skip to main content
Participant
July 25, 2018
Question

Correct dimensions for mobile phone pages

  • July 25, 2018
  • 5 replies
  • 812 views

Hi,

I set my table at 450px across, but when I load it on my phone, it's shrunk...

What is the best method to code for mobile phones in Dreamweaver so it's WYSIWYG?

    This topic has been closed for replies.

    5 replies

    BenPleysier
    Community Expert
    Community Expert
    July 26, 2018

    nickc40153305  wrote

    Hi,

    I set my table at 450px across, but when I load it on my phone, it's shrunk...

    What is the best method to code for mobile phones in Dreamweaver so it's WYSIWYG?

    This is what the OP asked; the first two answers plus a couple of others down the line are relevant to the topic, the rest are degrading to personal issues and insults.

    I suggest that nickc40153305 starts a new discussion with this question, but elaborating by showing the code that is being used.

    For now, this topic is closed.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Nancy OShea
    Community Expert
    Community Expert
    July 25, 2018

    DW is not a WYSIWYG editor.   It never really was except back in the early days of web design when everyone used tables for layouts.  Those days are long gone.   These days, we use responsive CSS layouts. 

    Height & width of devices vary by make, model, pixel density and other factors.  There is no one size fits all.   You have to build your projects to respond to whatever device the end user has --  big, small and everything in between.

    There are many ways to build a web site.  The current trend is CSS Flexbox.   And I also like Viewport Units for their simplicity. 

    • 1vw = 1% of available viewport width. 
    • 1vh = 1% of available viewport height. 

    See links below for more info.

    CSS Flexbox (Flexible Box)

    https://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units

    Nancy O'Shea— Product User & Community Expert
    pziecina
    Legend
    July 25, 2018

    nickc40153305  wrote

    Hi,

    I set my table at 450px across, but when I load it on my phone, it's shrunk...

    What is the best method to code for mobile phones in Dreamweaver so it's WYSIWYG?

    First Dw is not a WYSIWYG editor, though it could be argued that it still sells itself as such.

    As for the best method to code for mobiles, there isn't one, or rather there are dozens of suggestions.

    The one I use is to start with a desktop first aproach, (18-25 inch screens), then to use media-queries to re-style and  re-do the layout as I shrink the browser. The media-queries I set at a value just before the layout starts to 'break', which means that I am only using a media-query when necessary.

    The reason I start with the desktop first is because at a later stage in development, I will also start to test my layout on larger screen sizes, (up to 60 inch) and again adjust the design and layout also, so that users viewing the pages on smart-tv's or using a game console, will also get an optimal layout.

    The estimated number of people using a smart tv or games console for web browsing is estimated at approx 10% of internet users, but no accurate stats are available, as the x-box, (360 and one) use IE or Edge, which report themselves as such.

    B i r n o u
    Legend
    July 25, 2018

    as far as it is mobile phone that is concerned, I will suggest to use vw unit... instead of %

    https://developer.mozilla.org/en-US/docs/Web/CSS/length

    Legend
    July 25, 2018

    https://forums.adobe.com/people/B+i+r+n+o+u  wrote

    as far as it is mobile phone that is concerned, I will suggest to use vw unit... instead of %

    https://developer.mozilla.org/en-US/docs/Web/CSS/length

    Anyone can suggest what they want these days........there's a 101 ways to achieve the same results, that's why web developement is currently in a huge mess....and yes for every one that agrees there is another that doesn't

    ie.....do I use React, Angular, Vue, even one of the other js frameworks, maybe stick to jQuery or even god forbid plain js (if youre a dumb ass )........Bootstrap, Materialise, Bulma, Python, Php, Asp........get where I'm coming from? Web development has never been in such a state of disarray.

    Thanks a lot guys for inventing all this confusing shite but some of us have to earn a living, not just 'play' around all day trying to invent the next trendy workflow which usually end uop being convoluted anyway, in my experience.

    Seriously have you tried to 'load' a page using vue js as opposed to loading a page using jQuery, hilarious?

    Why have the new generation of developers disintegrated into trying to produce web-pages as SPA's its like introducing frames all over again without the server load..........phewwy

    [Edited by Moderator to remove superfluous expressions}

    pziecina
    Legend
    July 25, 2018

    pziecina  wrote

    The main problem is that the web has been in disarray since it became commercialised. Once that happened it was for the majority of web designers/developers nothing more than a, 'make as much money as possible out of clients' environment. Most web sites do not even make back the money clients invest in their creation, and become 'zombie' sites within the first year, with only the client, their friends, employees and the creator ever making a real visit to the site.

    That I can well believe, nearly ALL my clients initially ask for a news area where they can output 'regular' news, hilarious, most havent updated since about the first couple of weeks of launching the site........humm why bother......they initially have the enthusiasm and one or two news stories appear in the first week or so, and then nothing..........for years.....some going back to 2013!!

    pziecina  wrote

    As for all the different frameworks etc. that is nothing new. If you go back to the 90's we had so many different server-side coding methods from python, cgi and php to asp and java, that it was impossible to keep up. We then had lots of js frameworks, (remember YUI?) with the main difference being they were only client-side.

    I dont remember there being as many as there are today but then again maybe I just was not looking and now I am. Hardly a day goes passed where another one smacks me in the face as Im searching youtube for current trends and interesting tuts.........how to create a modal - 101 ways, how to create tab panels - 101 ways, how to create a slideshow -101 ways, client side or server side - 101 ways, to bind data or not to bind data -101 opinions, the list goes on..................no-one can ever say the way they are doing it is correct, its all very subjective. There is no difinitive workflow or solution, which makes everything hugley confusing especially when you are learning something new. Every course out there will tell you or show you a different approach....is it right or wrong?

    pziecina  wrote

    Personally though, I have given up with what others are doing and develop using the workflow and techniques I feel good about using. At least that way I am not getting bored, or ignoring everyone who does not have a high speed connection to download all the files required for a site that looks and feels exactly the same as many others.

    I like to keep my eye in so I can assess if those workflows, methods, frameworks, libraries are any good or not because the developers using them will give you a biased view, mostly because its trendy, not because it's any better than any other workflow. Obviously we are now into the trend of using build files, webpack etc, client side application, SPAs. Its hard to find a simple tutorial out there that doesnt use webpack for something like vue js when you are building components/templates, most fool you into thinking downloading a shocking bloated set-up via the terminal is the only way it can be done but if you search hard enough it can be done very simply without all the nonsense and complexity........its something most course tutors and youtube channels dont want you to know, because it makes it look much, much  harder than it really is.


    osgood_  wrote

    There is no difinitive workflow or solution, which makes everything hugley confusing especially when you are learning something new. Every course out there will tell you or show you a different approach....is it right or wrong?

    Not certain if you want an answer to that or not, so just in case you do -

    A lot of people are now trying to justify their continued existence as developers, and to do so they have to try prove that the only correct way of working, (use of specific workflow, frameworks and other utilities) is difficult. Even the use of the js frameworks, (client and server) is done to make everything appear complicated.

    Just as an after note though -

    Percentage values are not actually units of measurement as they are based on the parent container. vw/vh units are absolute values calculated on the viewport size, (they are set values based on the browser/device size).

    Legend
    July 25, 2018

    Best method is NOT to use specific px widths. You need to use percentage widths, width: 100%; will fit any size mobile device. Any containers iniside the 100% table wrapper should also be set in percentages widths.

    <table class="myTable">

    </table>

    Css:

    .myTable {

    width: 100%;

    }

    You need to also add the 'viewport' meta tag to the <head></head> section of your page:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">