Jump to content
Jorgensen

Mobile vs desktop - detention

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...