Tablet vs Desktop sites

My guess is this either going to be real easy or real hard in SitePublisher.

I have a requirement that the same site fit on multiple screen sizes.
The requirement is this:

For screen sizes >= 1024px the site should have a width of 930
For screen sizes >= 800px the site should have a width of 770
For screen sizes >= 640px the site should have a width of 600
for ... you get the idea.

Components that on a 930 screen fit side-by-side should wrap above-and-below.

Basically has anyone integrated any "responsive frameworks" in with Site Publisher or is there some other method available?

Find more posts tagged with

Comments

interDev

My guess is this either going to be real easy or real hard in SitePublisher.

I have a requirement that the same site fit on multiple screen sizes.
The requirement is this:

For screen sizes >= 1024px the site should have a width of 930
For screen sizes >= 800px the site should have a width of 770
For screen sizes >= 640px the site should have a width of 600
for ... you get the idea.

Components that on a 930 screen fit side-by-side should wrap above-and-below.

Basically has anyone integrated any "responsive frameworks" in with Site Publisher or is there some other method available?

If it is fixed width layout, i would think % based width of Areas might help.It will allow area widths will adjust according to Device size.

The overall width will be controlled by body or ls-canvas tag. Rest all areas will have % based widths.

Now in terms of defining the width of HTML body or ls-canvas (600px or 770px), you might have to write down separate CSS files for each device. Using device detection mechanism (which will be a custom solution), load the corresponding CSS file and page will be loaded into the width defined in your CSS.

Also your components should not be controlling any width and it should be controlled by Areas width defined in layout XML file.

I havent tried this solution and obviuosly there can be certain aspects which i havent thought about but i think this solution might work.

Rick Poulin

Basically has anyone integrated any "responsive frameworks" in with Site Publisher or is there some other method available?

Yep, and my solution is much less complicated than interDev's (sorry Smiley Tongue

). Don't put any sizing information at all in your layout.xml; instead put in html-id and/or css-class attributes and control everything through CSS. Then, you have a stylesheet that gives fixed widths in edit (by prepending all rules with #page-edit-html and using !important on width properties) and flexible widths by default like this:


/*** default rules, for 960px ***/
/** Body normalization for cross browser **/
body{min-width: 768px;}
/* etc */

/*** 768px ***/
@media only screen and (max-width:959px) {
 /** Body normalization for cross browser **/
 body{min-width: 768px;}
 /* etc */
}
/*** 1200px ***/
@media only screen and (min-width:1200px) {
 /** Body normalization for cross browser **/
 body{min-width: 1200px;}
 /* etc */
}

You can see how this CSS ends up working here: http://alpha.gcwwwtemplates.tbs-sct.ircan.gc.ca/theme-gcwu-fegc/home-accueil-megamenu-theme-gcwu-fegc-eng.html

If anybody cares for the context, the Government of Canada requires all department sites to use the Web Experience Toolkit (http://ircan-rican.gc.ca/projects/gcwwwtemplates/wiki) which mandates a certain approach to HTML and CSS. There's a whole whack of progressive enhancement things in there that we've had to get working in SitePub Smiley Happy

Bowker

Thank you all.

Looks like rpoulin's solution is going to work for us.

davcruz

Hi,
excuse me to keep open this thread, I just want to get some feedback from you that have some experience with this...
I need to go a little further, I have a requirement to display the right column of a fixed layout as a row above the footer using Responsive Design (CSS3) for screen sizes lower than 640px.
I have tried to do the same as rpoulin described above but I am not able to make it work. I will appreciate your help!

Rick Poulin

Do you have a working mockup? Your question sounds like more of a HTML/CSS thing than a LiveSite thing. Get a working mockup first (I suggest asking for help on forums that are more focused on those languages in general, e.g. stackoverflow.com) and then if you need help getting it working in LiveSite/SitePub, post your working code here.

Bowker

So I have created a SitePublisher page that will change shape and design when being viewed on different devices and/or screen resolutions.

Note this does not work with IE-8 since it does not handle media queries. However there are Open Source libraries that will make this work in IE.

Usual disclaimers - this worked for me, it probably won't work for you...

You can look at the design, but basically I wanted the area with three columns to be side by side with more than 800px available on the device.
(also the header is wider on screens more than 1023px)

On small devices the three columns appear stacked.

CSS: (lots of other stuff omitted)
[PHP]
#ls-row-3-area-1 {float:left;width:250px;}
#ls-row-3-area-2 {float:left;width:250px;}
#ls-row-3-area-3 {float:left;width:250px;}

@media screen and (min-width: 800px) and (max-width: 1023px) {
#ls-gen1-ls-fxr {width:750px;}
}

@media screen and (max-width: 799px) {
#ls-gen1-ls-fxr {width:100%;}
.lsTopWideRow {}
.lsTopWideArea {width:100%}
#ls-gen3-ls-fxr {width:100%}
#ls-gen5-ls-fxr {width:100%}
#ls-gen9-ls-fxr {width:100%}
#ls-row-3-area-1 {float:left;width:100%;}
#ls-row-3-area-2 {float:left;width:100%;}
#ls-row-3-area-3 {float:left;width:100%;}
.footerArea .columnHeader {width:100%}
#ls-gen6-ls-area-body {width:100%;}
#ls-gen7-ls-area-body {width:100%;}
#ls-gen8-ls-area-body {width:100%;}
.columnHeader {width:100%;}

}[/PHP]

Fixed layout:
[PHP]

[/PHP]

Suggestion: I used Google Chrome's developer window (Press F12) and played with styles until I got what I wanted. Put them in the style sheet. It took about 2 hours once I put my mind to it.

Good Luck
(Pass it forward - if you do something cool - share it with the group.)

normal_VN_characters.png

testvn .pdf

testvn.rptdesign

nipper

If you have an external URL for a rendered page some of us can beta test it for you. I have 4 flavors of tablets at home, 1 iPad and 3 Android