How to test mobile layouts

Jonathan tmp

I'm developing a set of mobile layouts and aside from the obvious "use a mobile device" I wondered how I can test the pages within a desktop browser.



Normally I would modify the browser's User Agent when faced with client-side browser sniffing but I'm not sure how BBNC determines the device, as my UA spoofing isn't having any effect.



I have seen http://bbnccommunity.blackbaud.com/bb... and posted a comment but I presumed that thread would be off the radar as it's already been answered.

Greg Milton

Hi Joff,



You can append the following delivery channel string to the end of a URL to force a NetCommunity site to display the mobile version of the page.



?deliverychannelid=3f6b7ea0-73e8-462b-a075-de89431816a4


-or-


&deliverychannelid=3f6b7ea0-73e8-462b-a075-de89431816a4



Use ? or & depending on the URL. If the URL already has a '?' in it, use a '&.'



For example:



Desktop site:


https://advance.einstein.edu/



Mobile site:


https://advance.einstein.edu/?deliverychannelid=3f6b7ea0-73e8-462b-a075-de89431816a4



Desktop site:


http://www.smileschangelives.org/page.aspx?pid=329



Mobile site:


http://www.smileschangelives.org/page.aspx?pid=329&deliverychannelid=3f6b7ea0-73e8-462b-a075-de89431816a4



Hope this helps.



Thanks!

Jonathan tmp

Thanks Greg, that works for me!

naveen ramisetti

Joff/Greg,



we are looking for some layouts/style-sheets to develop mobile version of donate pages. Can you please share some example templates i can use?



Thanks in advance.


Naveen

Jonathan tmp

Hi Naveen,



BBNC is completely flexible with it's templates so you can create mobile versions however you would like.



Copy one of your desktop layouts and start by stripping out any HTML so you're left with just the part placeholders, then start building up the HTML as you would any normal page.



There are a number of techniques for mobile CSS (such as media queries) but you might find the easiest is to simply have a separate mobile stylesheet to keep everything separate.



Sorry my answer is a bit vague but without knowing more about how your current layouts are designed any examples might just confuse more than help. Depending on your HTML knowledge you might find http://html5boilerplate.com/mobile/ either a good starting point or completely overwhelming.

naveen ramisetti

Thanks for the reply Joff! we are using basic layouts that we got from blackbaud


Our current donate page looks like this - secure.aidindia.org



I will try to follow your suggestions. but it would really help me if there is a standard template as we are very new to web designing.



Thanks,


Naveen

Jonathan tmp

Hi Naveen,



There's not really any such thing as a standard template - it's like asking for a standard template for a desktop web page. You're only really limited by your imagination!



On that layout you're using all I would really suggest is removing the fund information content at the bottom of the page (for mobile) or at the very least rewrite it without tables. Then you can fairly easily control the rest of the page elements to flow to a mobile width.



It's probably not going to be easy if you're new to designing for the web but if you're happy to learn then read up on the basics such as HTML and CSS before tackling responsive design.