Website layout differs by device

Question

1.00/5 (1 vote)

See more:

Im having some trouble with my website layout changing by device.

On my website the layout is perfect but on mobile and older computers the layout changes.

Im guessing this is due to resolutions.

I was then advised to abolish the use of padding to center items on my site but i am still having the same problem.

Can anyone advise me on this ?

My Website is conorpendlebury.com

What I have tried:

I have tried changing site layout, resolution and adding media queries.

Posted 21-May-16 9:01am

Conor Pendlebury

Updated 21-May-16 10:23am

Add a Solution

Comments

Homero Rivera 21-May-16 16:41pm

I posted an answer, but then I realized that this website is your resume.
If the companies trying to hire you can't have modern browsers and devices, you probably shouldn't accept a job from them.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Homero Rivera · Answer 1 · 2016-05-21T10:23:00

Solution 1

HTML and CSS have evolved dramatically over the last 15 years so it makes sense your code won't work as expected on older devices/browsers.

That's when you need to make decisions. Whether you can let go people with older devices (as they may not correspond to your target audience). This takes us to marketing and stuff, and you'll have to read about that elsewhere.

You can always make different web layouts, 1 for standard laptop/pc, 1 for older laptop/pc and another one for mobile.
In your javascript, when the page is loading, you can check the name-version of the browser and redirect to best version for them.

Also, try not to embrace right away new HTML tags before you know they are a working standard. Some browsers introduce features that are not standard.
2 notable examples are Internet Explorer, which would accept vbscript instead of javascript, thus not working on all browsers.
Also we have Internet Explorer instroducing AJAX on a non-standard class, which was later adapted and became standard.

Posted 21-May-16 10:23am

Homero Rivera

Updated 21-May-16 10:26am

v2

Comments

Conor Pendlebury 21-May-16 17:53pm

Hey Homero, Thanks for your reply. I would like to ask you is it common practice to create multiple layouts ? For instance, if i were a professional should i create muliple layouts for desktop (new) and then one for phone ?

Homero Rivera 22-May-16 13:44pm

It´s a matter of choice whether to use 2 drastically different layouts.

At times it is completely necessary because, for example, the desktop version is fully loaded: buttons here, buttons there, textboxes, images... Loaded!
You really can´t make it all fit well on a smartphone.

That´s when you really need a second design for smartphones. One where you´ll just show the most essential information and options.

When websites are not that loaded (e.g. yours :), it is possible to work around with just some jquery here and some scriptaculous there or javascript, and adapt all content well to fit on either screen size.
Sure, it's hard and complex, but then you don't need 2 different layouts.

I'm thinking, maybe, since your forte is game development (I'm guessing here based on your website), maybe you shouldn't invest that much time in trying to figure out the right scripts that work for you, but buy a responsive HTML and CSS template. There's very good responsive and adaptive templates out there for $70 USD (definitely worth if you're trying to land on a good job). And definitely, there should be cv theming.

Then your work would be not adding and figuring out stuff, but cutting of parts of the template you don't really need.

Sergey Alexandrovich Kryukov 21-May-16 19:03pm

Some good points here, 5ed.
I would add that layout differences are unavoidable. The goal of layout design should be not near-identical rendering, but stability of the layout. Good layout remains operational and convenient enough for all non-nonsense size of browser window.
—SA