AEM Responsive Web Design | Community
Skip to main content
Level 8
Oct 29, 2015 4:59 PM UTC
Solved

AEM Responsive Web Design

Hi,

Please refer to the following URL on AEM Responsive Web Design.

https://docs.adobe.com/docs/en/cq/5-6-1/developing/mobile/responsive.html

Is there a step by step procedure (tutorial) of creating a AEM Responsive Web Site and testing it, using the principles described in this link (end to end)?

Appreciate your help.

Thanks,

Rama.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Lokesh_Shivalingaiah
Lokesh_ShivalingaiahAccepted solution
Level 10
Oct 29, 2015 6:01 PM UTC

Developing a responsive website remains the same and the article [1] explains how to use the css with some example snapshots.

However, if you want a complete website, you can refer 'Geometrixx Media' project which is completely responsive as a working example.

 

 

[1] https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html

10 replies

nsvsrkAuthor
Level 8
Dec 24, 2015 4:12 AM UTC

Hi,

1. There could be AEM Developer concerns and UI Developer Concerns and there should be a clear cut separation of these concerns, in terms of duties of these two sets of developers.

2. Given a non-responsive AEM page, what is the step by step process of converting to responsive.

In the following URL,up to "SPECIFYING THE DEVICE GROUPS", it is clear of what to do.

https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html

Beyond this (starting "Using Adaptive Images"), it becomes confusing of how to proceed.

3. Is there only one procedure? Or more than one and each has merits and demerits.

Discussion around these lines is completely missing in the public documentation.

4. If 6.0 documentation holds good for 6.1 also, please update the page with these comments.

In the absence of this, different people are expressing opinions that 6.1 is much improved from 6.0, etc.

Thus, We are leaving room for speculations.

5. We specify different dimensions for images. When will these renditions be created?

When the DAM resource is uploaded to DAM by virtue of WFs or when the resource is requested dynamically?

Thanks,

Rama.

Translate
New Participant
Sep 4, 2023 12:40 PM UTC
Lokesh_Shivalingaiah
Level 10
Dec 23, 2015 7:11 PM UTC

It isnt different for AEM 6.1, the same document holds good for 6.1 aswell

Translate
nsvsrkAuthor
Level 8
Dec 23, 2015 4:04 PM UTC

Hi,

The following URL is for AEM 6.0.

https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html

Do we have it updated for 6.1?

Thanks,

Rama.

Translate
kautuk_sahni
Employee
Dec 21, 2015 5:48 AM UTC
nsvsrkAuthor
Level 8
Dec 19, 2015 5:43 AM UTC

Hi smacdonald2008,

On reading the documentation, I am getting confused on AEM RWD.

There are some tasks from UI designer (CSS-Media queries), some tasks for AEM developer (including simulator.jsp, etc), some fluid grids, etc.

Does one have to follow all these to achieve RWD?

Some people say that if the AEM developer implements the OOB of AEM, the list of devices is limited to 4-5, but if the UI guy implements, it is endless.

In how many ways could this be implemented and what exactly are the ways and the pros and cons of each of these approaches is not very clear from the documentation.

I just want to see for myself the RWD capability of AEM.

Do not have any AEM website, for implementing RWD.

So, could you please send me step by step procedure and package for creating the simplest possible template and a couple of components (as simple as Hello World displays) in it with this feature?

I will follow these steps and see the behavior.

Appreciate your help.

Thanks,

Rama.

Translate
nsvsrkAuthor
Level 8
Oct 30, 2015 5:06 PM UTC

All these are very useful pointers.

Thank you all.

Rama.

Translate
Employee
Oct 30, 2015 8:27 AM UTC

Hi,

AEM 6.1 with the touch-optimized UI has introduced the Responsive Layout feature - see:

http://docs.adobe.com/docs/en/aem/6-1/author/page-authoring/responsive-layout.html

I'm not sure which AEM version you're on, but hopefully this will be of interest...either now or in the future.

Translate
smacdonald2008
Level 10
Oct 29, 2015 6:02 PM UTC

I am not aware of any other content for this. We will add this to our list of end to end articles. 

Translate
Lokesh_Shivalingaiah
Lokesh_ShivalingaiahAccepted solution
Level 10
Oct 29, 2015 6:01 PM UTC

Developing a responsive website remains the same and the article [1] explains how to use the css with some example snapshots.

However, if you want a complete website, you can refer 'Geometrixx Media' project which is completely responsive as a working example.

 

 

[1] https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/responsive.html

Translate