PDA

View Full Version : Styling mobile sites



Ben
03-05-2013, 02:40 AM
So I've decided to try giving my mobile store a facelift and I thought we could do with a thread about how to customize Volusion mobile stores.

Here's what I know so far:

You can view and debug your mobile store on a desktop PC by visiting www.yourdomain.com/mobile/default.aspx
If you use Firefox and the Firebug plugin you can play with the CSS.

You have very limited control over layout but you can change most of the images, so the blue bar at the top, the arrows, cart images, add to cart button etc can all be replaced.

Here's what I want to know:

When you first activate a mobile store, the page visitors land on is www.yourdomain.com/mobile/default.aspx, this file is not editable but there is a blank file in there that can be edited:
/v/vspfiles/mobiletemplate/mobiledefault.htm

Am I right in thinking that I could create a custom mobile homepage using this blank file that could contain an "enter store" link to /mobile/default.aspx?

***EDIT***
Yes to the above, see later posts.

demitrius
03-05-2013, 01:11 PM
I just edited the file on our test store and nothing changed.

Ben
03-05-2013, 01:25 PM
I just edited the file on our test store and nothing changed.

I think mobiledefault.htm needs to contain a link to /mobile/default.aspx or you site will ignore it and show /mobile/default.aspx

If you include <a href=”/mobile/default.aspx”>Go to Mobile Site</a> within mobiledefault.htm it should show up.

Ben
03-06-2013, 08:50 AM
Just to confirm having tested it; if you edit mobiledefault.htm and don't include a link to mobile/default.aspx then Volusion bypasses it and mobile visitors go straight to mobile/default.aspx.

If you do include the link then mobiledefault.htm becomes your mobile landing page which you can customise however you see fit.

One nice trick is to put a click to call link in, just use the tel: attribute in a link like this, or use an image:


<a href="tel:123456789">Click HERE to Call: 123456789</a>

demitrius
03-06-2013, 09:03 AM
So can you essentially make a link and place it anywhere, even hidden - and just create some form of mobile splash page around that?

Ben
03-06-2013, 09:48 AM
So can you essentially make a link and place it anywhere, even hidden - and just create some form of mobile splash page around that?

That's it exactly.

I'm building one now that is a big lifestyle image (maybe even an image slider if I get bored), followed by a "SHOP NOW=>" button and a click to call button.


That's essentially all the mobile designs are on Volusion's premium templates; a splash page and a colour scheme on top of the standard mobile store front.

Ben
03-08-2013, 02:44 AM
Just a quick update, turns out that different mobile devices and browsers will render pages at different scales, to get round this and ensure that your landing page renders to fill the whole screen you need to use the viewport meta tag:

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

I'm still playing with this and will post the code I find that works best.

If I get this all figured out, would anyone be interested in me writing a detailed how to for making mobile landing pages and styling the mobile store?

demitrius
03-11-2013, 08:16 AM
Ben,

Write it anyway. Like many of us, there are a lot of stuff on V that is undocumented (like your mobiledefault.htm discovery). My money is on V left it this way in order to give their "premium template" more exclusivity.

Ben
03-11-2013, 08:37 AM
Ben,

Write it anyway. Like many of us, there are a lot of stuff on V that is undocumented (like your mobiledefault.htm discovery). My money is on V left it this way in order to give their "premium template" more exclusivity.
Maybe you're right, seems a bit odd to put the feature in then not document it properly. I'll write something when I'm done and drop it here.

I'm still playing around with this when I get chance and so far the viewport tag below is working best:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

I'm testing various image widths and so far the winner is 320px on phones but it stretches a little on tablets.

Creating good splash pages is hard, fitting everything in to such a small area without it looking crowded is tricky. I'm looking for a mobile friendly image slider to squeeze more in without making it seem cramped.

demitrius
03-11-2013, 08:46 AM
There might be articles that discuss your viewpoint issue in better detail. With the mobile rise, I'm sure someone has dissected it better.

You may have to resort to media queries.

e.g.


@media screen and (max-device-width: 480px){
body{-webkit-text-size-adjust: none;}
}

And so on