How many layouts do i need to make?

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.

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.

1 Like

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%.

4 Likes

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.

5 Likes

thanks! this helps a lot

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.

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)

3 Likes

good one! simple yet effective

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

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

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.

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/

Is there a way to structure the website into 2 Columns so that the right column moves to under the left column on mobile devices, thereby making it more responsive and maintaining only 1 layout?

You could manually add CSS, using media queries, to float a div to the side.

If it's just text, and not two separate types of columns, you could also use CSS columns. The browser support is pretty good now.

You could also use Flexbox… which is also CSS.

In Hype you can use at minimum 2 layouts. This could then be set to whichever break point you need (note Hype layouts are in effect similar to Media Queries in CSS) so you can create a new layout and set it to a width where you want the column to be under the content if viewed on a device that has that width or less.

Flexbox could also be useful. You could write the CSS for a master group to be flex and then put your content in there which should change based on your flex settings. This would need coding in CSS (or JavaScript) for it to work so you may need to get your hands dirty with some code :wink:

1 Like