Alternative mobile site layout

by Severin Banned
15 replies
Hi,
I've been messing around with some mobile site designs and one thing has always narked me... all mobile sites look alike. It seems there is a standard layout of...
Logo
(Small) Image
(Big) menu buttons

And then the screen is full!

I know the obvious and important reasons for this- mobile users need the info quickly, easily etc.

But I'm an artist by trade so the design and look of the sites is highly important to me, so I wanted to make a more visual site with a nice big image with none of those pesky buttons getting in the way. And I think I've cracked it.


Or click here (remember to resize your browser to cellphone size)
Home

I'd be interested to hear your thoughts on this as a viable solution.

All the best
Sev
#alternative #layout #mobile #site
  • Profile picture of the author msakallah
    I just tried it both on my desktop and smartphone. The Mobile side of it worked fine. However, when I opened it up under my desktop (using Chrome), the images were HUGE!

    Was it intended to work on mobile only???
    {{ DiscussionBoard.errors[5900051].message }}
    • Profile picture of the author Severin
      Banned
      Originally Posted by msakallah View Post

      I just tried it both on my desktop and smartphone. The Mobile side of it worked fine. However, when I opened it up under my desktop (using Chrome), the images were HUGE!

      Was it intended to work on mobile only???
      Hi Msakallah
      Yes, its a mobile only site, and its made with Quentins script so it uses a class system. If you reduce down the size of your browser window to kinda cell-phone size the images will shrink down and fit automatically. The alternative menu style was my main motivation for making the template though.
      {{ DiscussionBoard.errors[5900232].message }}
      • Profile picture of the author rlhurst
        Originally Posted by Severin View Post

        Hi Msakallah
        Yes, its a mobile only site, and its made with Quentins script so it uses a class system. If you reduce down the size of your browser window to kinda cell-phone size the images will shrink down and fit automatically. The alternative menu style was my main motivation for making the template though.
        Here's your site in the phone emulator..
        Iphone mobile simulator

        The "call us" button looks a little out of focus to me. Plus it only scores 14% on the W3C validator... mostly due to the 526k home page size!!

        I commend you trying to be creative and unique, but that page size is WAY too large. You can bring that way down and still be creative.

        R
        Signature
        I do voice over work... here's a SAMPLE
        {{ DiscussionBoard.errors[5900878].message }}
        • Profile picture of the author Severin
          Banned
          Originally Posted by rlhurst View Post

          Here's your site in the phone emulator..
          Iphone mobile simulator

          The "call us" button looks a little out of focus to me. Plus it only scores 14% on the W3C validator... mostly due to the 526k home page size!!

          I commend you trying to be creative and unique, but that page size is WAY too large. You can bring that way down and still be creative.

          R
          Yeah, I know its pretty big but file size wasn't my aim at this point its just a demo to test the menu function, if I was gonna release it as an actual site I would of course reduce everything down.

          Thanks
          Sev
          {{ DiscussionBoard.errors[5901180].message }}
          • Profile picture of the author rlhurst
            Originally Posted by Severin View Post

            Yeah, I know its pretty big but file size wasn't my aim at this point its just a demo to test the menu function, if I was gonna release it as an actual site I would of course reduce everything down.

            Thanks
            Sev
            Well, I guess I missed the point in your original post that it was "just a demo to test the menu function".
            Signature
            I do voice over work... here's a SAMPLE
            {{ DiscussionBoard.errors[5901723].message }}
            • Profile picture of the author Severin
              Banned
              Originally Posted by rlhurst View Post

              Well, I guess I missed the point in your original post that it was "just a demo to test the menu function".
              No worries, perhaps I should have made it clearer :rolleyes:

              All the best
              Sev
              {{ DiscussionBoard.errors[5901760].message }}
  • Profile picture of the author Blindmasters
    Hi Sev
    Great idea looks cool and should sell ok let me know if you are going to sell it soon I hope
    Regards Stormming nmockford@aol.com
    {{ DiscussionBoard.errors[5900719].message }}
  • Profile picture of the author Steve Solem
    I'm not quite sure I'm following you here...

    Originally Posted by Severin View Post

    I'd be interested to hear your thoughts on this as a viable solution.
    ...a viable solution to what?

    I think if, as an artist, you want to do something "prettier" at the risk of losing visitors and/or sales that's up to you - but I think most users on cell phones look up businesses to get directions, contact info, a menu or some other information, and a mobile website that doesn't give them that as quickly as possible is only going to frustrate them and send them to your competitors.
    {{ DiscussionBoard.errors[5901353].message }}
    • Profile picture of the author Severin
      Banned
      Originally Posted by Steve Solem View Post

      I'm not quite sure I'm following you here...



      ...a viable solution to what?

      I think if, as an artist, you want to do something "prettier" at the risk of losing visitors and/or sales that's up to you - but I think most users on cell phones look up businesses to get directions, contact info, a menu or some other information, and a mobile website that doesn't give them that as quickly as possible is only going to frustrate them and send them to your competitors.
      So you think by having a 'click here for the menu' button- which I'm proposing in this design will scare/frustrate visitors away?

      I agree that functionality is probably the most important aspect of any good design and that mobile users have particular needs against their desktop counterparts but I think we tend to live under this illusion that mobile users somehow are attention defecits who are unable to navigate.

      I think you need to think of the possibilites this offers both to the website owner and the visitor:
      What if the information (it doesn't have to be an image) visitors saw straight away was a call to action or a daily special? The menu isn't gone, its just neatly stored in the corner freeing up the space on the screen for other important content.

      My view is that people who use their mobile devices regularly will eventually get bored with the standard layout which 95% of mobile sites have. There is nothing to differentiate them, apart from logo, colour and shape of button. Cookie-cutter style sites were great a couple of years ago, but surely its time to begin offering more choice.

      Perhaps I'm wrong, but I think its important for the customers I design for to have a unique site as possible, one that impresses and encourages the user to stay and most importantly to return- thats what they pay me for.
      {{ DiscussionBoard.errors[5901665].message }}
      • Profile picture of the author Steve Solem
        Originally Posted by Severin View Post

        So you think by having a 'click here for the menu' button- which I'm proposing in this design will scare/frustrate visitors away?
        I didn't realize that was your objective here and looking at the page on my iphone, I wonder how many people would think to click that to get to see the full menu? The graphic itself doesn't really say "menu" to me, and since the text itself isn't clickable, I find that kind of confusing.

        There a great usability design book I read years ago called "Don't make me think" and while mobile sites didn't exist at the time, I think the concepts it teaches are particularly applicable to mobile sites today.

        Important info should be only two or three clicks away at most, and if people have to think about how to do something for more than a few seconds, odds are good they're leaving to go somewhere else.

        Will people get bored with the standard layout? Maybe, but there's a lot to be said for standards and having things appear in place where people expect them to be.

        I'm all for thinking outside the box and I think its worth testing new ideas to see what works best for people, but personally, I'd prefer to leave that to guys with deep pockets like Amazon, Zappos and LL Bean and then follow their lead after they've tested and proven what works best.

        Cheers,

        Steve
        {{ DiscussionBoard.errors[5902633].message }}
        • Profile picture of the author Severin
          Banned
          Originally Posted by Steve Solem View Post

          I didn't realize that was your objective here and looking at the page on my iphone, I wonder how many people would think to click that to get to see the full menu? The graphic itself doesn't really say "menu" to me, and since the text itself isn't clickable, I find that kind of confusing.

          There a great usability design book I read years ago called "Don't make me think" and while mobile sites didn't exist at the time, I think the concepts it teaches are particularly applicable to mobile sites today.

          Important info should be only two or three clicks away at most, and if people have to think about how to do something for more than a few seconds, odds are good they're leaving to go somewhere else.

          Will people get bored with the standard layout? Maybe, but there's a lot to be said for standards and having things appear in place where people expect them to be.

          I'm all for thinking outside the box and I think its worth testing new ideas to see what works best for people, but personally, I'd prefer to leave that to guys with deep pockets like Amazon, Zappos and LL Bean and then follow their lead after they've tested and proven what works best.

          Cheers,

          Steve
          Steve,
          I understand your thinking on this and maybe I'm pushing ideas that need more time, but I'd like to remind you of the massive changes in just a few short years that the cellphone has made in terms of icon driven navigation. At the time nobody knew what these icons did or were, and to make it more confusing every brand had its own set of icons, but here we are now and pretty much everything is icon driven to some extent and not just on the internet or with technology.

          I guess I'm just frustrated with the constraints that the size of a cellphone screen puts on us and want to maximize the use of space we have to work with.

          All the best
          Sev
          {{ DiscussionBoard.errors[5903799].message }}
          • Profile picture of the author rlhurst
            Sev,

            Another option for your designs is using css to change what shows up on the phone depending on the phone's position (portrait, landscape left, landscape right). This would allow you to avoid stretching a portrait position photo to fit the landscape view, (and the degrading in picture quality that happens with that). You could really get creative with that.

            I'm starting to get into this method, but have not done it for a client yet. If you google it, you'll find articles about how to implement. I tried a simple one that had text show up depending on the position... "your phone is in the portrait position", "your phone is tilted left", "your phone is tilted right".

            I tried the code and it worked.. pretty cool. Opens up a lot of creative options.
            Signature
            I do voice over work... here's a SAMPLE
            {{ DiscussionBoard.errors[5905434].message }}
            • Profile picture of the author Severin
              Banned
              Originally Posted by rlhurst View Post

              Sev,

              Another option for your designs is using css to change what shows up on the phone depending on the phone's position (portrait, landscape left, landscape right). This would allow you to avoid stretching a portrait position photo to fit the landscape view, (and the degrading in picture quality that happens with that). You could really get creative with that.

              I'm starting to get into this method, but have not done it for a client yet. If you google it, you'll find articles about how to implement. I tried a simple one that had text show up depending on the position... "your phone is in the portrait position", "your phone is tilted left", "your phone is tilted right".

              I tried the code and it worked.. pretty cool. Opens up a lot of creative options.

              Now that sounds cool, I really need to get my head around css, I've read a bit and 'fiddled' with templates with css but I've still a long way to go. I reckon its only through experimentation that we truly learn, that and not being afraid to make mistakes.

              Ok, you've given me the impetus to finally crack css

              Thanks
              Sev
              {{ DiscussionBoard.errors[5907877].message }}
  • Profile picture of the author Quentin
    If you want to do a more graphical layout these these may help



    Quentin
    {{ DiscussionBoard.errors[5902929].message }}
    • Profile picture of the author Severin
      Banned
      Originally Posted by Quentin View Post

      If you want to do a more graphical layout these these may help



      Quentin
      Thanks Quentin, I saw these designs on your site. Really I'm just floating the idea of a different layout in terms of the menu position to free up space at the top of the webpage and specifcally how people actually reach that menu. I'd be interested on your thoughts on this as your WSO was what got me into the whole mobile thing in the first place .

      All the best
      Sev
      {{ DiscussionBoard.errors[5903716].message }}

Trending Topics