Jump to content

Mobile vs desktop - detention


Jorgensen

Recommended Posts

Hi

What is the best way to handle webdesign, so the page looks good on both desktop and mobile?

i can see if that I setup the layout in a flexible way, the same page shows ok on both platforms. But I think I need to cut down content amount for mobile, and devide the content on several pages. 

So as I see it, the two things I need is two different menues and content loading platform depended. 

I have seen some php mobile detection that might work - but is this the right way to handle the two platforms?

thanks

jorgensen

 

Link to comment
Share on other sites

  • 4 weeks later...

The magic trick you might need is @media.

If you don't know what it is:
It is a CSS way of saying: IF this is the case, do this. A few examples:

@media (max-width: 1000px) {
EXECUTE THIS CSS.
}
@media (min-width: 1000px) {
EXECUTE THIS CSS
}
@media (min-width: 800px AND max-width: 1000px) {
EXECUTE THIS CSS
}

 

You should also use the following meta-tag in conjunction with this:

<meta name="viewport" content="width=device-width">

 

Your CSS will now craft your website responsive.

 

 

Quote

What is the best way to handle webdesign, so the page looks good on both desktop and mobile?

This is a very interesting question. And the best way is whichever you prefer. I will give two examples:
 

Mobile first: You create the style for the mobile website first. Adding the changes with @media as the screen grows.

Desktop first: You create the style for the desktop website first. Shrinking the screen with @media as the screen gets smaller.


Mobile first will let you make the website small and beautifull.
Desktop first can be harder, how will you make some things fit on a smaller screen?
 

Edited by Dodra
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...