Welcome to WebmasterWorld Guest from 54.210.61.41

Forum Moderators: not2easy

Responsive design for various tablets and mobiles?

     
12:29 pm on Jul 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


Hi so I have a responsive site. However at this moment the design for devices like ipad is not right.

Is it OK if I ask the programmer to set all greater than 7" devices to show desktop version of my site? Any tips would be appreciated. Thanks!
12:43 pm on July 31, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4155
votes: 262


Most css files do have a media query at 767px. It may or may not be desktop version over 767px, but most desktop views are fine on iPad screens.
12:58 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


So above 767px I can allow desktop view? This will take care of Android and IOS tablets?
1:16 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2041
votes: 340


I'd say a 7" screen is still pretty small for a desktop view, but it depends on the layout. The best way to find out is by testing it on a variety of tablets. I'm sure there are also emulators to be found online.

Having one mobile view and one desktop view, and switching between them at a certain screen size, is not really what responsive design is all about, of course. Ideally, your design should adapt to the space it's given with small, incremental changes.
1:20 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2354
votes: 625


I'm sure there are also emulators to be found online.

There is an emulator built right into:
Chrome
Opera
Firefox

Just right click and click "inspect element" then select the icon showing two screens. In Chrome/Opera "Ctrl + Shift + M".
1:31 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


Yes thanks, only thing is I don't have programming resources available to extensively design and test a proper responsive site.

However for tablets as not2easy said, can I set the css media query at 767px and higher to set a desktop version of the site? Thanks!
1:57 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2041
votes: 340


For most [screensiz.es] of them, yes.
2:06 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


not2easy is it 767px or 768px ? I was scanning google.
2:56 pm on July 31, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4155
votes: 262


767px is the max-width for my first media queries to change the css layout for mobile. If you set max-width at 768px, then it cuts iPads out of the desktop css.
3:15 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2041
votes: 340


In other words, a max-width of 768px means screens with a width up to and including 768px. So to target screens of 768px and above, you indicate a max-width of 767px.
3:18 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


Ok thanks so much guys!
5:52 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


BTW it's 767px viewport size correct? Thanks!
6:32 pm on July 31, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4155
votes: 262


No, it is 767px @media for the css, you don't adjust the viewport because the device uses that to calculate their device pixel ratio.

Your viewport is:
<meta name="viewport" content="width=device-width, initial-scale=1"> 
and it belongs in the <head> of the html page.

The media query serves different css settings for different screen widths. It may look like this:
@media only screen and (max-width: 767px)
and it belongs in the css file.
7:38 pm on July 31, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 19, 2004
posts:951
votes: 12


Ok thanks again!
12:01 pm on Aug 2, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Nov 13, 2016
posts:596
votes: 90


You don't have to use an universal pre-defined size to switch between desktop / tablet / smartphone. Just resize your browser (on desktop) , and see by yourself at which point it would be more wise to apply changes to the page layout.

Additionally, the web dev tool of Chrome lets you preview what your site can look like, on different devices (there is something a bit similar in Firefox, but less easy to use, in my opinion)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members