Correct dimensions for mobile phone pages

Report · Jul 25, 2018

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?

Report · Jul 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>

Css:

.myTable {

width: 100%;

}

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

Report · Jul 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

Report · Jul 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}

Report · Jul 25, 2018

I don't understand what the suggestion of using the Viewport Width unit over Percentages has to do with a rant about frameworks and libraries.

Are you sure you're replying to the right thread?

Report · Jul 25, 2018

https://forums.adobe.com/people/Jon+Fritz+II wrote
I don't understand what the suggestion of using the Viewport Width unit over Percentages has to do with a rant about frameworks and libraries.
Are you sure you're replying to the right thread?

Yeah I'm definitely replying to the correct thread. I just got fed up with 'suggestions' being posted all over the web and opinions which are poles apart............everything is a suggestion, as my post outlined. Lets have some 'definitive' workflows and answers, rather than all these suggestions which really help only to confuse.

I know you dont really do much in terms of participating in intersting debates so if you dont like it tuff, just do what you do which is quite boring.

Report · Jul 25, 2018

Could you please then explain what exactly is wrong with using viewport units as they pertain to the issue of scaling sites for use on phones, rather than turning a plea for help with that issue into yet another "Os and Friends Hate All the Things" thread hijack?

The OP asked nothing, and Birnou said nothing, about frameworks, libraries, javascript, angular or the rest of the items in your rant. Quite frankly, VW and VH are extremely underrated, and underutilized, tools in a responsive designer's toolbox. You may as well have posted about how PHP includes work, for as much as your "expletive deleted" laced rant had to do with the OPs actual issue.

"VW is Great for Responsive Design on Phones"

Change my mind.

Report · Jul 25, 2018

https://forums.adobe.com/people/Jon+Fritz+II wrote
Could you please then explain what exactly is wrong with using viewport units as they pertain to the issue of scaling sites for use on phones, rather than turning a plea for help with that issue into yet another "Os and Friends Hate All the Things" thread hijack?

Read the post....did I actually say there was anything wrong in using vh and vw? Its not the difinitive way just another way, suggestion, amongst dozens of other ways. I guess you could use static px width if you wanted to sniff for ALL the various devices on offer as well.

Did I actually say I hate vh and vw, no obviously you're baised because you use them which comes across in your own rant. As I said too many opinions make only for confusion and that's unfortunately the nature of web development today....everyone involved is blindly going down a path that they only 'think' is correct not one that actually IS correct.

https://forums.adobe.com/people/Jon+Fritz+II wrote
The OP asked nothing, and Birnou said nothing, about frameworks, libraries, javascript, angular or the rest of the items in your rant. Quite frankly, VW and VH are extremely underrated, and underutilized, tools in a responsive designer's toolbox. You may as well have posted about how PHP includes work, for as much as your "expletive deleted" laced rant had to do with the OPs actual issue.

Trouble with you is youre sooooo boring, like most who post in this forum, to form any opinions beyond what a brain dead person might do. If it wasnt for me and a couple of others this forum would be about as exciting as lying on the morgue table - is has got to a point where no one want to discuss anything remotely about actual web-development.

https://forums.adobe.com/people/Jon+Fritz+II wrote
"VW is Great for Responsive Design on Phones"
Change my mind.

Why would I want to change your mind....I could say the same about using percentage measurements.......always worked for me in the past and present.

But hey let's not kid ourselves here the OP is using 'fixed' width tables......I'll leave it to you - amatuers tend to gravitate towards amatuers.

Report · Jul 25, 2018

osgood_ wrote
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 *** )........Bootstrap, Materialise, Bulma, Python, Php, Asp........get where I'm coming from? Web development has never been in such a state of disarray.

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.

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.

Eventually most of the frameworks we see now, both client and server will vanish, (or never even make it to become popular) and those 'specialising' in any of them will suffer the same fate as those who insisted table layouts could do everything css layouts could do, (amazing how css grids is being used and promoted by many as the css equivalent of table layouts).

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.

iOS and Android have lowered the total cache size, (for all sites) back to 4Mb, (2Mb for some Android devices) so no one should rely on any file being cached.

Report · Jul 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.

Report · Jul 25, 2018

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).

Report · Jul 25, 2018

pziecina wroye
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.

Thats really the only conclusion l have arrived at after spending some weeks studying these workflows. It appears that tried and trusted workflows have become the domain of just about every man jack and his dog, requiring very little skill once you have grasped some basic fundamentals. So why not lets complicate it all in a desperate attempt to once again make web development smoke and mirrors. This complication doesnt actually produce anything over and above what a simpler workflow can achieve it just justifys our existence and confuses the shite out of everyone else.

Im tempted to jump on board but l aint going to bullshite anyone, lm just making my life harder in an attrmpt to justify l can do something simple using a more complex workflow........

Report · Jul 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.

Report · Jul 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jul 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?

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, the only real Dreamweaver alternative.

Adobe Community

Correct dimensions for mobile phone pages