nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Responsive web site

itsamb

Hi,

I have a question on the mobile web site development. In Livesite, is there any difference in development for mobile and desktop website development.

I know, the responsive page on a mobile can be handled via CSS at client side.

But, I would like to know if there is anything that handles it on server side.

For e.g. A complete RIA page on desktop page, but shows limited content on the mobile phone.

Basically, I do not want complete data to be sent for mobile and handle it via css on mobile. Rather, anything which takes care that only limited (required) content will be fetched and displayed for mobile.

Appreciate any expert advice on this.

Livesite - 7.4.1 on windows 2012.

Thanks,

Amit

Find more posts tagged with

Comments

Rick Poulin

You can either create a completely separate site and then redirect to it (in your front-end web server) when appropriate, like was the trend 5-10 years ago.

Or, you can use the LiveSite Mobile product to add server-side device detection capabilities to your LiveSite components and fork your logic that way. It is a separate license though, so there may be an additional cost involved depending on your contract with HP.

itsamb

Thank you Rick for the reply. But, I am not able to find any document to get detail about the livesite mobile product. I could only get TeamSite_7.4.1_Mobile_TechNote_en.pdf.

But it only has info limited to installation.

Can you help me to get/direct to the documentation where I can get more information about the livesite mobile product?

Thanks,

Amit

nipper

You will need ot talk to your local sales critter for more information. There may be some product briefs on the www site, though they will not be super deep.

Adam Stoller

As I recall from several sessions at the HP Engage conference, LSCS/LSDS has some built-in functionality that allows for server-side optimization of the content based on device detection with CSS and JS code (you need to choose your JS model, but they provide the directives for the server-side detection) - I think if you go without LSDS you'd still be doing client-side detection (though I could be wrong about that - might have just been the slant they gave at the conference)

As noted - talk to your sales rep - they may be able to get you stuff from the conference and/or actual documentation (if you do get stuff, please let us know what they give you)

itsamb

Thank you all for your input.

I found some tags for device detection in site publisher guide.

Device-Awareness Tags for Mobile Components on page number 99 in TeamSite_7.4.1_SiteDeveloper_Rev0_en.pdf.

So following is my understanding. To enable this feature in sitepublisher, we need a seperate license and then we can user the device awareness tag library.

Then we also need to do Mobile Installation for LiveSite Server.

Finally create components with device awareness tags and deploy it on the runtime.

Is this understanding correct?

Thanks,

Amit

Kalam

Yes Amit, Your understanding is correct.

So when you enable the License for Mobile, you will get options to create mobile site, Mobile page, Mobile template etc. Also you will get an emulator using which you will get the facility to preview the mobile pages and the desktop pages in more than 200+ devices. Its very good feature but only thing is it comes with extra cost.

In Livesite server, the mobile installation is just copy of some jars you will get from the support site.

Thanks

Kalam

itsamb

Thanks Kalam.

As you specified the option for mobile, does that mean I have to always create a seperate web site for mobile?

My understanding is that to create a single site in Sitepulisher and develop the components which will cater both desktop and mobile.

Thanks,

Amit

Kalam

Hi Amit,

Yes you need to create seprate components, pages and the templates and sites for the Mobile.

You cannot resuse the same components, pages and the templates and sites for desktop sites.

You can preview the desktop pages in the emulator to see how the desktop pages looks in different devices.

May be with minimum changes you can use in both desktop and Mobile but not the same sites you can use for mobile and desktop.

Thanks

Kalam

Adam Stoller

Kalam, are you positive you need to create multiple sites?

My impression from the conference was that you could utilize the device-aware tags in a manner that allowed you to handle the various devices within a single site - much the way that client-side responsve design works.

It would seem a big step backwards if you had to develop a separate site for multiple client devices.

Kalam

Hi Adam,

Sorry for the english.

I mean to say that we need create seperate sites for Desktop sites and Mobile sites.

Your impression is correct that we utilize the device-aware tags in a manner that allowed you to handle the various devices within a single site - much the way that client-side responsve design works.

Thanks

Kalam

Rick Poulin

You can create separate sites but you don't have to. For example, you could create a (single) responsive site that uses the device-aware tags to deliver images optimized for the device. It depends on how different you want your sites to be.

Kalam

Hi Rick,

Do you mean to say that we can utilize the same mobile site as desktop site?

My impression is that we can have a single mobile site for all the devices(provided we have tags specific to each type of devices) and another site for the desktop.

Thanks

Kalam

Adam Stoller

Kalam wrote:
Hi Rick,

Do you mean to say that we can utilize the same mobile site as desktop site?

My impression is that we can have a single mobile site for all the devices(provided we have tags specific to each type of devices) and another site for the desktop.

Thanks
Kalam

If you're presenting essentially the same content for your site for different devices, you should not need to create separate sites within TeamSite for them, you should be able to use a single site with properly marked up information, much the way you would do it for client-side responsive design (where, for example, you might have 3 different sized images where one is used for desktops, one for tablets, and another for phones - though you could be even more discriminating based on the size and/or type of device [e.g.: flip-phone or blackberry vs. iPhone, etc.])

That's my understanding. I have not, personally, dealt with this [yet] - so I cannot say that it is correct empirically, but ...

nipper

Kalam wrote:
Hi Amit,

Yes you need to create seprate components, pages and the templates and sites for the Mobile.

You cannot resuse the same components, pages and the templates and sites for desktop sites.

You can preview the desktop pages in the emulator to see how the desktop pages looks in different devices.

May be with minimum changes you can use in both desktop and Mobile but not the same sites you can use for mobile and desktop.

Thanks
Kalam

This is completely WRONG.

You create a site that changes on the fly based on the device accessing it. You do not create mulitple sites, nor separate components or pages.

Kalam

Hi Andy,

I am also saying the same . But you need to create one site which can be used by all the mobile devices depending on the tags specified in the server side.

But you need to create the seprate components for mobile sites and desktop sites. When i say desktop site, it is normal site.

Please read the full thread before replying.

Thanks

Kalam

Adam Stoller

Kalam - can you explain why you believe you need a distinctly separate [SitePublisher] site to support "desktop" / "normal" from "mobile" - instead of using the same kind of tags that differentiate different mobile devices to differentiate different any-kind devices?

nipper

NO you create a component that runs on Mobile as well as Desktop. It is the same code base and we are not saying the same thing.

You build up a mockup that looks different depending on the device in use but the components and code are all the same.

itsamb

Hi All,

Need to extend the thread. I am working on the understanding of how do the component development with livesite mobile component. I checked TeamSite_7.4.1_SiteDeveloper_Rev0_en.pdf, on page number 105, sample component is shown.

In that css class is created for each device that we want to show the page to. So page is compiled with correct css classname for the html element.

Now, as per my UI development team, they are developing HTML5 responsive pages. They will be creating only one css file, and css attributes will be applied as per the screen resolution of the device to the HTML.

In Above cases, complete css file need to be loaded at the client side and HTML element will refer to correct class name in css. But, how is that making the load less at the client side.

Am I missing the mobile compoent idea here?

Note that, I know we can hide some HTML block or show correct images with device awareness tags in mobile. But still that do not explain the need of only required css elements to be loaded at client side.

Thanks,

Amit Bhoyar

Rick Poulin

You're right, it doesn't. Having one giant CSS file that caters to every device, even if you're not using media queries, kinda defeats the notion of adaptive design. It's not wrong, but it's perhaps not as optimal as you had in mind. If you want to deliver only the required CSS, see if your CSS people can break it up into a 'base.css' and then individual files specific to each device category.

Also note that images (and possibly HTML markup) are where the real bandwidth savings are going to be. If having a single CSS file saves your dev team a lot of headaches, then the cost of increased effort may not warrant the marginal decrease in bandwidth.

PS. Since this thread was already marked as solved, you should probably create a new thread next time and just link to your old one for context.