Are iPads Mobile or Desktop? Can I choose?

Jaime Lassman 2

Is there a mechanism somewhere in the settings of BBNC that will allow me to choose which devices or screen sizes are considered mobile or desktop? Is there a way I can determine that an iPhone is mobile but an iPad is desktop? This would impact which template is served up.

Martin McFly

Jono Young:
Updated iPad redirect script: Detect if an iPad, then use Blackbaud NetCommunity's ViewAsDesktop function to redirect to the desktop page:



See here: iPad Redirect for Blackbaud NetCommunity



Note" Click the edit link in the lower left corner to see the code, if needed.

Yes, very much. One more question-- is there a reverse of the javascript:BLACKBAUD.netcommunity.ViewAsDesktop() method, ie, a way to switch back to the mobile version instead of the desktop? It would be extremely useful to be able to switch to mobile the same way.



Thanks again!

Paul McCarthy

Jono Young:
Updated iPad redirect script: Detect if an iPad, then use Blackbaud NetCommunity's ViewAsDesktop function to redirect to the desktop page:



See here: iPad Redirect for Blackbaud NetCommunity



Note" Click the edit link in the lower left corner to see the code, if needed.

Thanks Jono. This works really well. One thing though, I noticed it caused the page to refresh constantly, so we added a counter:


var counter = 0;


var iPad = (/ipad/i.test(navigator.userAgent.toLowerCase()));


if (iPad) && (counter==0) {


document.location = "javascript:BLACKBAUD.netcommunity.ViewAsDesktop();";


counter++;



Now it runs perfectly. I did need to adjust our mobile viewport to allow resizing as there are some fixed widths in my desktop site (my bad, next time!)



Thanks again



Paul

Chris Martin

You can think of a content "Pane" as the combo of a "Content Placeholder" and the HTML "box" in which you place it. Together, they define where you can later place parts.



To have a content pane that exists only on one layout, you simply give the Content Placeholder an ID that only exists on that layout.



For example, say you want a mobile and desktop version of a given page template. And say you want 2 content panes to exist on both layouts (where the same parts will be seen on both the mobile and desktop versions of a given page), two other unique panes to exist only on the desktop layout, and one unique one to exist only on the mobile layout. You could number / name your content placeholders as follows:



In Desktop Layout:


Number = 1, Name = "Desktop Main Content"


Number = 2, Name = "Desktop Secondary Content"


Number = 3, Name = "Shared Content A" (**SHARED**)


Number = 4, Name = "Shared Content B" (**SHARED**)



In Mobile Layout:


Number = 3, Name = "Shared Content A" (**SHARED**)


Number = 4, Name = "Shared Content B" (**SHARED**)


Number = 5, Name = "Mobile Main Content"



By doing this, any part you place in pane 1 or 2 will only appear on the desktop view of pages. Anything you place in pane 5 will only appear on the mobile version of the page. And anything you place in panes 3 or 4 will appear on both the mobile and desktop versions of pages.



Make sense?

Martin McFly

Actually, I just noticed that there's a button to add a pane on the edit layout screen. I'm finding this PDF to be very helpful:


https://www.blackbaud.com/files/suppo...

Martin McFly

I'm finally getting to this, and I'm realizing I'm a bit confused about the interaction between templates and layouts.



Can you tell me how to have a content pane that's only on one layout? I don't see a way to add or remove content panes. Can I delete an existing one from a layout by deleting the div in the HTML?



Happy to open this as a new topic if it's too far off the original. Thanks for all the help!

Chris Martin

You should be able to do this by placing your meta tag in an Unformatted Text (UFT) part, place the part on the desired template (maybe in a content pane that only exists in a mobile-specific layout), and set the advanced options in the UFT part to insert its content into the section of the page.

Martin McFly

Thanks. Unfortunately we don't have that version yet, so I can only see the mobile version in my iOS emulator.



Sorry to (maybe) extend this thread even farther off topic, but is there a way to serve a different viewport in the HTML header?



E.g., < meta name="viewport" content="width=device-width" >



thanks again!

Chris Martin

Image of above-referenced new feature:

Chris Martin

Jono Young:
Updated iPad redirect script: Detect if an iPad, then use Blackbaud NetCommunity's ViewAsDesktop function to redirect to the desktop page:



See here: iPad Redirect for Blackbaud NetCommunity



Note" Click the edit link in the lower left corner to see the code, if needed.

Actually Martin, hot off the press with version 6.53 of NetCommunity is a handy way to allow you to implement this feature in a "toggle-able" way.



When using the WYSIWYG link-picker (like from within a Formatted Text & Images part), there are two new options in the "Special Page" grouping:



- View desktop version


- View mobile version



You can place the "view as mobile" link in an FTI part placed on the desktop version of a page template. Then place the "view as desktop" link in a different FTI part, inserted on the mobile version of the same template.



To do this in the most seamless way, make sure that you have at least one content pane that only exists in the desktop version of the page template and one that only exists in the mobile version of the same template. And of course make sure to place the above FTI parts into those two panes respectively. That way, when a site visitor is viewing a page in desktop mode, they won't see the "View as Desktop" link (and vice versa for when in mobile mode).



Doing this allows users to toggle at-will between the desktop and mobile site versions.

Karen Badham

Screen is used for both tablets and phones. This is set on the style sheet properties under Style sheet options, Media. That's what you can do in NetCommunity for this.



To target phones differently than tablets you'll want to look into setting widths in your style sheet. This doesn't have a specific feature in the software, so what you find via googling is just as viable as anything else.



There's A LOT of debate on the internet if tablets are considered mobile or not. From the perspective of CSS they are mobile since they both use "screen" as their media type.



I hope that helped get you a jump start on researching this!

Chris Martin

Jono Young:
Updated iPad redirect script: Detect if an iPad, then use Blackbaud NetCommunity's ViewAsDesktop function to redirect to the desktop page:



See here: iPad Redirect for Blackbaud NetCommunity



Note" Click the edit link in the lower left corner to see the code, if needed.

Hi Martin. This script needs to fire when iPad is the browser agent. Because BBNC treats iPads as mobile devices, you'll want to insert this script at the top of your mobile layout (i.e. the layout that will be used once BBNC detects the browser agent to be a mobile device).



Placing the script at the top of the layout allows the targeted style to hide the layout from view (on iPads) until the redirect occurs and prevents the momentary "flicker" that you'd otherwise see as the mobile version of the site begins to load before the redirect happens.



Does that help?

Martin McFly

Jono Young:
Updated iPad redirect script: Detect if an iPad, then use Blackbaud NetCommunity's ViewAsDesktop function to redirect to the desktop page:



See here: iPad Redirect for Blackbaud NetCommunity



Note" Click the edit link in the lower left corner to see the code, if needed.

Jono, can you provide a bit of info on where this script should be? IE, does it go in a particular template, part, etc. Thanks!

Jono Young 2

Updated iPad redirect script: Detect if an iPad, then use Blackbaud NetCommunity's ViewAsDesktop function to redirect to the desktop page:



See here: iPad Redirect for Blackbaud NetCommunity



Note" Click the edit link in the lower left corner to see the code, if needed.

Patrick Brown 2

Thanks for all of the information here. I know there is debate about the status of the iPad (and now, the iPad mini) as a mobile device. For what it's worth, I would rather see the full version of our NetCommunity site on the iPad.



That being said, it would be a great if this was something we could configure ourselves in NetCommunity.



Cheers,



Patrick

Jono Young

I should add, that today, it is recommended (and our lead solution) that you design mobile-first. Meaning responsive, with @media queries for mobile before desktop in the CSS.



Also worth noting, there are internal discussions between the Products team and the Interactive Design team at Blackbaud regarding evolving the current mobile features/functionality into a more natural "responsive" solution.



My general recommendation today is, if you are considering a redesign in the next 6 to 18 months, worry about responsive design then, when you over haul the entire site. If you are not redesigning for more than 18 months, the default mobile microsite is a great way to go. Why?



Most sites built in the past 2 to 3 years were not built with mobile in mind. Older sites may even be table-based. These types of sites make responsive design (where content is shared between desktop and mobile) difficult and risk creating a less-than-great mobile user experience.

Jono Young

Hi Jaime, you can create a single stylesheet and use your @media queries inline, in the single style sheet so that updates are all done in one place. (See "QUIRKS" below")



/* -------------------


| Desktop Styles


------------------- */


.yourClassHere {


...


}



/* -------------------


| Phones


------------------- */


@media only screen


and (min-device-width : 320px)


and (max-device-width : 480px) {


.yourClassHere {


...


}



}



/* -------------------


| iPad


------------------- */


@media only screen


and (min-device-width : 768px)


and (max-device-width : 1024px) {


.yourClassHere {


...


}



}



QUIRKS:


By default, Blackbaud NetCommunity (currently) defaults all stylesheets to "screen." So, the CSS above would need to be updated to remove the "screen" portion of the query:



/* -------------------


| Desktop Styles


------------------- */


.yourClassHere {


...


}



/* -------------------


| Phones


------------------- */


@media only (min-device-width : 320px)


and (max-device-width : 480px) {


.yourClassHere {


...


}



}



/* -------------------


| iPad


------------------- */


@media only (min-device-width : 768px)


and (max-device-width : 1024px) {


.yourClassHere {


...


}



}



There are many different queries that can be used, I really enjoy Chris Coyer's posts on the topic, specifically (read the comments too):



1. http://css-tricks.com/snippets/css/me...


2. http://css-tricks.com/snippets/css/ip...


3. http://css-tricks.com/snippets/ (everything else)

Jaime Lassman 2

Great answers. It seems like this is still new enough that there is no firm idea of how the software can make this more manageable. I like the suggestion of targeting the iPad with a stylesheet, but it could easily make things confusing quickly. We have started using multiple stylesheets in our stack, and it would mean that I would need to duplicate many of those stylesheets. Then, we we wanted to make a quick change, we would have to remember to go into the desktop stylesheet AND the iPad stylesheet. Maybe I'll test it out and see how complicated it gets.


Thanks.

Chris Martin

BBNC sees iPads as mobile devices, so it serves up pages using the page template you have set for mobile devices. However, in the properties of each stylesheet, you can use the stylesheet's settings to target a given stylesheet to devices of a particular type using the "media" option.



Using media tags to target specific device types in styleshets is reasonably well-documented on the internet. Here's an article that I came across that describes using media tags to target the iPad.



So, using this technique, you could add a stylesheet to your mobile stylesheet stack but have it be served up only for iPads.