Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

which devices should be keep in mind while developing AEM Website?

Avatar

Level 3

I want to make my AEM site working for every platform and devices. So please help me , which all devices and platforms i should keep in mind? 

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi


There is no rule as to how many breakpoints a page should have, but one should be added wherever the layout breaks. The aim is to make sure the design and content flows nicely regardless of the width of the viewport. See this article http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

If you scroll down to the media queries section you'll see they use five CSS3 Media Query increments (480, 600, 768, 992 and 1382px). Typically I stick to just 4 (480, 600, 768, 1024).

To explain the ranges:

min-width: 480px: Will target mobile devices in landscape mode and up

min-width: 600px: Targets tablets in portrait mode and up

min-width: 768px: Targets tablets in landscape mode and up

min-width: 1024px: Targets the desktop view

 

Link:- http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries

//Twitter Bootstrap 3: how to use media queries?

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:34em){}
@media(min-width:48em){}
@media(min-width:62em){}
@media(min-width:75em){}
Update 2015-12-08: This is still accurate as of version 3.3.6 and 4.0.0a2

 

Link:- http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-cre...

// 

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

 

There is no hard and fast rule for this. It is more related to your webpage and its layout. 

 

I hope this would be helpful.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

2 Replies

Avatar

Correct answer by
Administrator

Hi


There is no rule as to how many breakpoints a page should have, but one should be added wherever the layout breaks. The aim is to make sure the design and content flows nicely regardless of the width of the viewport. See this article http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

If you scroll down to the media queries section you'll see they use five CSS3 Media Query increments (480, 600, 768, 992 and 1382px). Typically I stick to just 4 (480, 600, 768, 1024).

To explain the ranges:

min-width: 480px: Will target mobile devices in landscape mode and up

min-width: 600px: Targets tablets in portrait mode and up

min-width: 768px: Targets tablets in landscape mode and up

min-width: 1024px: Targets the desktop view

 

Link:- http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries

//Twitter Bootstrap 3: how to use media queries?

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:34em){}
@media(min-width:48em){}
@media(min-width:62em){}
@media(min-width:75em){}
Update 2015-12-08: This is still accurate as of version 3.3.6 and 4.0.0a2

 

Link:- http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-cre...

// 

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

 

There is no hard and fast rule for this. It is more related to your webpage and its layout. 

 

I hope this would be helpful.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 10

If you want to develop AEM content for devices, lok at AEM Apps too.