One-page or multiple-pages – new site

[taxicss]

Hi all,

I need some opinions about how would I design/code my new project. It’s a restaurant site that has 5 pages (home, menu, branches, catering, contact).

1. The homepage will just contain a slider and some basic info.
2. Branches page will just be a list of all stores.
3. Catering page will be just few details about the catering services.
4. Contact, just a contact page.
5. Menu, this will be a heavy page I think

See most of them have static or few contents only except for the menu page. Now I already have a design idea that I think it will look good on a “one-page” site. But I’m not sure if it is a good idea since the client wants a website that is optimized for mobile and tablets.

Performance? Usability?

Thanks.

[Strider64]

I would check into responsive (fluid) website design that uses media queries, fluid grids or gutters this will insure the website looks nice on tablets and smart phones as well.

[taxicss]

@Strider64, thanks but maybe I wasn’t clear enough. Right now I can’t decide if I’ll go for multiple pages or just a single page. I have a design which is better for as single page website but I am concern on the performance and usability of single-page(long page) on tablets and mobiles.

[AlexanderK]

If its mostly text like you said I dont see a problem.. Just use ankers if you want to make one long page. my 2 cents..

PS plus if you make it resposive why shouldnt it work?

[taxicss]

@AlexanderK

Just use ankers if you want to make one long page.

??? sorry, not a native..

PS plus if you make it resposive why shouldnt it work?

Yes, the plan is to make it responsive. I know it will work, but I have doubts/worries about the performance, it’s a single page, it will have bigger file size. And I’m not sure if long pages are touch-friendly. I mean, contents are hidden down below that you have to swipe down to view them.

I was just looking for best practices…

Thank you.

[AlexanderK]

<a id="top">There is a link at the bottom of the page!</a>

<a href="#top">Go to top</a>

And I like scrolling down 1 page more on my mobile then waiting for every new page to load..

[Lee Church]

The site http://www.handysandyservices.ca is a single page website and displays reasonably well on various devices (have not tested the ones coming out in 2016 yet :)

The answer to your question really depends on what you are trying to do. Many of the folks around focus on what can be done with the tools (technology driven). With the Handy Sandy site I took it from the business card and local marketing material and wanted it to be a web presence with a conversion goal of folks calling.

With a restaurant, I imagine the ultimate goal is to have folks come into the restaurant (rather than say maximum number of FB ‘likes’ from Somalia).

And it depends on whether you care about the semantics, and/or whether the under-the-hood stuff looks pretty. Oddly enough, the web isn’t very good at taking a business card and expanding it to a website (though I think I managed OK given the whole faulty box model constraint with CSS, js, and a competitive mobile environment where various browsers seem to go out of their way to make us say the same thing 5 different times).

There is a lot on the web about SEO and single pages. However, as google keeps saying focus on the user experience and they will focus on the indexing relevant content. To that extent, I used parameters to allow google to index the various “pages”. You may have to use the google webmaster tools to specify your parameters, but I don’t consider that a show stopper (see http://www.handysandyservices.ca?page=411 for brief discussion on that issue).

Another point I must make is that ‘responsive’ is one of those over-reach terms that folks everywhere seem to be using. I prefer ‘adaptive’ for sites that adapt to the device (to paraphrase Warren Buffett comment about gold, you can whisper sweet things to the website, but it won’t ‘respond’. The website will however ‘adapt’). I think that we might have a ‘responsive’ website in the future, but I have not seen one yet. :)

I may clean up the actual code for the website, but it works, and it indexes reasonably well in google and elsewhere. Customers have found us, and called (but none from far away, which is GOOD!).

(Oh, and yes, Sandy has a little road sign that she puts out when at work, and it looks like the road sign on the website. and the business card link on the 411 page gives you an idea of the ‘theme’).

I would give some thought to your error pages during initial design as well. With handy sandy if a user gets anywhere in the domain of handysandyservices.ca they are brought into the page (with what I happen to think is one of the better error pages out there.. but hey.. it’s my baby so of course it’s cute!). With a restaurant you could do a cute 404 page.. with some line about getting hungry for the right page, and if they make it to any of the locations they will get ‘real’ food instead of the error page (much more satisfying, i’m sure) – some other theme related angle on the 404/403 page.

If you want some ideas for a fairly clean design that scales up a business card to an adaptive website, take a look at these links (any of them will do):

http://www.handysandyservices.ca

http://www.handysandyservices.ca?page=1
http://www.handysandyservices.ca?page=2
….
http://www.handysandyservices.ca?page=5

and the extra pages (not in the automatic tour)

http://www.handysandyservices.ca?page=404 (or you can just enter a junk url inside the handysandy domain)

http://www.handysandyservices.ca?page=403 (for when you try to hack me)

and

http://www.handysandyservices.ca?page=411 (for information about the website)

The business card to full size single page site isn’t appropriate for everything, but for a small business that has a local footprint it’s not a bad way to go.

[tomasz86]

This is an example of a long single page:

http://contrastrebellion.com/

but I wouldn’t use this technique if there was a lot of content on the website. A heavy single-page website would be slow to load and also difficult to navigate.

[AlexanderK]

And use sprites. ^^

[Author]

Posts