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

[amangoyal15]

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? 

[kautuk_sahni · Accepted solution]

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

[smacdonald2008]

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