Hello,
If you turn your mobile phone the horizontal view will be wider.
Should I design two separate mobile websites? One for the narrow and long window. And another for the wide and short view?
Currently my tablet version is the wider mobile phone view.
I think you’ll find current best practice is to use media queries in your CSS to adjust the way the markup is presented. The way to do that is to set your media queries at the width at which the layout breaks, and not to try and tie them to specific screen sizes.
Yes - I understand that. I am using responsive design.
I am using max width 310px for the narrow view. What max width pixels should I use for the wider horizontal view? (some phones will be wider than others when turned)
Thanks.
That really depends on your site and the point at which the design breaks. It may be fine with what you have, but that may not look right on the wider screen. Perhaps display the site on a laptop/desktop where you can alter the browser size and look for things going awry when it is reduced down towards smartphone sizes. Chrome (and others) certainly has tools to specifically set for those in either landscape or portrait modes, or even set your own custom sizes if the built in ones don’t suit your needs.
Presuming we are talking about a main container element for the page. I generally have a single max-width set for a desktop view, that’s the biggest the page will be viewed. Then the width can remain at the default of auto to be fluid for any size smaller screen. If you want a gutter, you could use a % width or have margins.
The key to responsive/fluid design is to stop thinking about individual devices/screens/orientations, and just make things as fluid and flexible as possible.
That is exactly why you cannot design for specific devices because there are now hundreds all at different sizes.resolutions and orientations.
As Chris said the only thing you really need to concentrate on is your design and assuming you have created a fluid design you can test in your browser by simply grabbing the right edge of the browser and dragging it smaller. At some point the design may look awkward or not fit so just before that happens throw in a media query and make it look better.
With a few well placed media queries you can normally make a design go from large to small (320px min). In that way you cater for all devices and orientations now or in the future (apart from devices like the apple watch but that’s not really relevant for a website).
You can of course also use specific media queries for landscape and orientation and/or common devices but in essence all you are interested in is the available width in which to show your design. If you design carefully and use a fluid approach you can make the design fit all screens without too much hassle.
There are limits of course to what can be achieved but flexbox (modern browsers only) allows the flexibility to even move items out of order but still remain in the flow.
With almost all except the older browsers, you can start to look at CSS Grid too - the demos I’ve seen of that are very impressive. Have a look at Grid by Example by Rachel Andrew
I like the idea of using max width. Can you use percentage in device max width or do you just use percentage in the actual CSS rather than the max width setting?
The idea of max-width is it leaves to actual width property at its default auto so the element remains totally fluid without exceeding a maximum size. So your max-width can use any unit, px, em, % or whatever fits your needs. Though a fixed unit like em or px is generally preferred for it. A % would generally be applied to the actual width property, if that were required.
This is a simple demo to illustrate the point that you only need one max-width, then just keep it fluid for anything smaller.
ok - thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.