I am learning to design web pages, but I am unable to figure out the layout of page. My content always messes up when I see it on different screens.
How to manage the size of page so content is always intact & adjust according to the screen?
How can I calculate the size on paper if I have to?
Thanks!
I started with HTML 4.0, and would say the best advise I would suggest is, don't learn just "HTML", because its outdated, start with HTML 5, its because there's been a lot of changes and even with me, this is something that's taken me a while to adjust going from simple px x px to now elastic and fluid.
I wonder if you need to add a viewport meta tag to your HTML to help define the initial size that your site should show up on mobile devices, here's a common setting many sites use:
<meta name=viewport content="width=device-width, initial-scale=1">
You can read more about the viewport meta tag in HTML here:
Also, sometimes there can be a difference between how wide a website is in portrait and landscape modes on the same device. Some mobile devices like to zoom in a little bit when you rotate so that it shows the same amount of web page as it did before you rotated, if you want to stop that from happening you can add this line to your CSS:
html { -webkit-text-size-adjust: 100%; }
You can read more about text-size-adjust in CSS here:
That will make sure that the website is the same zoom level whether it's in portrait or landscape mode.
Hope this helps!
Devtips suggested three things to make websites responsive without using a css framework which I find it more effective than actually using the framework itself. Meta tag, html structure, and media queries. Media queries will help you more on how you want your site look like on smaller screens. Since I learned on how to use media queries, I merely use a framework on some of the webpages I am creating. Have you ever tried these? Give it a try and it will help you to be more efficient in terms of creating responsive web pages.
The question itself is flawed, and indicates a "fixed layout" mentality.
Good layouts should be THREE things:
Elastic. This means your font-sizes should be in EM as should any declared widths (when possible) so that the entire layout grows and shrinks to the user preference. See, 1EM does NOT always equal 16px -- it is a value the USER can set in the OS or the browser to their own preference so they aren't always having to screw with the zoom. I've seen values as high as 64px for 4k displays using ten foot UI's, so you NEED to be designing to that. As I often joke, the WCAG says to use EM, so use 'em!
Semi-fluid. Your layout should have at LEAST the primary content area 'fluid' in width, aka NO defined fixed width and a max-width so that really long lines aren't hard to follow. You MAY end up adding a min-width so that legacy IE (at least back to IE7) doesn't screw things up too badly, but the max-width without a fixed width is the important part here. If your content or design cannot handle the width of the layout changing, your content or design is crap.
Responsive. The new kid, it means using media queries to re-arrange the layout when the screen is too small (or too large) to make the best use of the available space.
When I create a semi-fluid elastic layout, I start out by creating the legacy desktop layout FIRST. A LOT of people will tell you to start with mobile first, and that's just ignorant bull. Mobile in the modern sense can be targeted with media queries -- that's what media queries are for. What we CANNOT target is legacy desktop, which is why you start there! Otherwise, how in blazes does one create a layout that gracefully degrades?
Once I have that desktop layout, I narrow it until it breaks, figure out how many EM that is, add around 5% extra for wiggle room, and use that as my media query trigger for changing the layout. Typically the best and easiest approach just being to reduce the number of columns and lower any padding. You just stack style in your media queries that overrides the existing style. Some techniques are easier than others for implementing the removal of columns or changing their number -- the "content first double-div negative margin float" approach (holy grail's grandpa) being one of the better ones -- certainly easier and more legacy compatible than flex-box.
There are a LOT of artsy-fartsy rubbish layout concepts that simply are NOT viable for web deployment; no matter how many PSD jockeys and marketing turds cream their panties over them. Full width banner/logo images, image based non-tiling non-"sliding door" backgrounds, fixed non-scrolling elements, perfect screen width -- or worse -- perfect screen height elements, etc, etc.
There's a reason most REAL websites don't use any of that crap, and the only place you'll find such asshattery is sites by artists under the DELUSION that they are a "designer".
As I'm always saying, PROGRESSIVE ENHANCEMENT. You take content of value or a reasonable facsimile of future content, and arrange it in a flat text editor as if HTML doesn't even exist in a order that if you were just reading it flat would make sense. You then mark it up with HTML to say what things ARE, and NOT what you want them to look like. (since that's the semantics stage, no DIV or SPAN yet). THEN you bend that markup to your will with CSS to create your first of MANY layoutS (yes, plural!) adding DIV, SPAN, classes and ID's where and only AS necessary. (aka leverage as much of your semantics with child selectors BEFORE you start slopping classes onto things!). THEN you adjust the base layout with media queries to make it responsive. ONLY once all that is done do you start playing with colours or hanging images off the working layout.
... and you have ZERO damned business throwing JavaScript at it until ALL of that is complete if you care in the slightest about accessibility, and usability. As the joke goes:
Content dictates markup, content + markup + device capabilities dictates layout, NOT the other blasted way around!
THAT is design, via the method known as progressive enhancement. You develop that way, the result is most always an accessible easy to maintain site with proper separations of concerns that gracefully degrades should any of those fancy extras go bits-up face-down!
... and is why dicking around with appearance before you even have logical document structure or semantic markup is half-witted mentally enfeebled rubbish -- the province of ignorant fools and outright scam artists! Most of whom don't even understand why numbered headings are numbered and don't even know half the semantic tags in HTML much less what they're actually for!