How many layouts do i need to make?


(VIRAJ UPADHYAY) #1

Hello guys! I am just little bit confuse about how many layouts do i need to make so websites can support on all devices I have made 4 layouts so far with breakpoints of 320, 768, 1024 and 1200. Can someone please tell me total number of layouts with proper breakpoints? thanks.


New layout destroys responsive position and size
#2

You can make responsive website starting with 2 layouts.
I personally use breakpoint 768px. One layout for mobile, one for desktop.
And also I make always first desktop layout.

Tip: set Breakpoint width of mobile layout to 0px and breakpoint width for desktop layout leave at 768px :slight_smile:

The more layouts you use, the bigger website would be - not very good.


(Trey Yancy) #3

It depends on the content and, if you’re using a web design app to layout the pages, it can depend on the web app. Hype breakpoints handle a minimum width and expand up to the next widest breakpoint whereas some web design apps handle the breakpoint as a maximum width and shrink. That sort of mismatch can be a mess, particularly if your Hype document switches heights between breakpoints. This can cause elements to overlap on a lower resolution device.

Another thing to be aware of is that certain norms in the Windows world have carried forward from the days when the OS was very primitive (e.g., the 6-foot mouse cable standard was originally so it could connect to a mouse card on the back of a PC tower on the floor). A relevant example is that most Windows users keep the default window setting of full-screen (from the days when you could only run one program at a time), which means that the average Windows desktop user will tend view the content across a wider area than the average desktop Mac user.

Smartphone screen resolutions vary widely, with the smallest (the Sudroid J5) having a resolution of 240 x 320. The lowest popular resolution has a width of 480. Note that this refers to physical pixels, whereas CSS (virtual) resolution is as low as 320. Check out the following:

https://deviceatlas.com/blog/most-popular-smartphone-screen-resolutions-2015

In my situation (which includes in-house design of corporate and retail sites - with the need to maximize conversions by maximizing the experience) I cover my bases and use four breakpoints, with uniform layout heights. Something to keep in mind that with narrow layouts, floating content can spread more than you might want as you reach the next largest breakpoint. I typically set the breakpoints at 320, 480, 768 and 1100, which work the way up on a ratio of 150% to 165%.


(Jonathan Deutsch) #4

As the @Matus and @TYancy said, it depends. Our vague thought was the 4 provided layouts would be the most likely configuration. Note there is the Flexible Layout system which allows element positions and sizes to change within a layout. So Layouts should generally only be used for drastic rearrangements and you can use the Flexible Layout system between sizes. The less Layouts you have the easier the document will be to manage.


(VIRAJ UPADHYAY) #5

thanks! this helps a lot


(Ken Heins) #6

Start with the minimal number, I like 1024x768, user the Safari Developers Responsive Design Mode to see what you are really getting, use Flexible to adjust. Then add more layouts if you really need to.
Be sure to use the Empty Caches command in the Responsive Design Mode. Safari seems to be very jealous about deferring to the previous cached item. You will get burned if you don’t clear the cache often. (reminds me of an ex-wife…never mind)

Don’t try to overthink it, I know I did. For a year! I think you will find that you need fewer layouts than you think right now.


(Freelancer) #7

3x2, fast and easy

2 fluid layouts + smart layout with CSS “max_widht”

.max_widht {
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
	max-width: 1200px !important;
	right: 0 !important;
	left: 0 !important; 
}

PREVIEW ONLINE

3X2.hypetemplate.zip (532.0 KB)


Responsive layout question shrink to fit
Mobile with large dimensions showing desktop layouts
Site posted, but not correct after uploaded to server
New layout destroys responsive position and size
Flexible layout and constraint element size
(Ken Heins) #8

good one! simple yet effective


(Freelancer) #9

yes, for the 70% of sites this solution is a good compromise.
If you need more than 3 columns in the main layout maybe is better a further (real) layout 1024px


(Alex) #11

Hello @michelangelo

I checked your attached document, so there are two layout, 320, 768 to cover all the situation, did you find any incompatible case?

Thanks for sharing.

Alex


(Ralph) #12

I looked at your file and I see what you did but this still does not solve the fact that I do NOT want 900 x 635 view to be able to be ANY BIGGER.

So again to make sure I need 900x 635 AND smaller NOT bigger.


(Ralph) #13

This is what I need exactly just need to change the size so It gets no BIGGER than 900 x638

http://art209.net/playground/seattle/