0

I'm trying to create a website for a small project. The first page you reach after launching it in a browser window is a landing page that provides means to pick one of multiple options. E.g. Pick what you'd like to access -

1. 2. 3. 4. and so on

I'm using basic html, css and javascript to work on this, since those are the ones I'm somewhat familiar with. That being said, I'm open to learning something else if it makes the job much easier.

But at the moment, my problem is I have designed an html page for the inital landing page and when the user picks an option, I'm thinking of using links to transfer him to a new webpage.

Should there be a separate html page for each of these options, given that each may be a little different, but not majorly.

I'm sorry, I tried looking online for a solution but I'm not sure how I can word my search terms. Also, the only other thing I found on stack overflow was How to display multiple html pages using single index.html

Any help or guidance would be most appreciated. Thanks!

Community
  • 1
  • 1
thekkm13
  • 49
  • 2
  • 9
  • you're asking for opinions. there's no right/wrong way to do this. pick which ever makes the most sense and is easiest to maintain for you, and go with that. – Marc B Jun 10 '16 at 21:46
  • I also found http://stackoverflow.com/questions/8211128/multiple-distinct-pages-in-one-html-file which does shed some light on it, but I'm more curious as to the pros and cons of each method in case I'd like to further extend the options in future. – thekkm13 Jun 10 '16 at 21:46
  • @MarcB In a way yes, though I wasn't sure if there is a particular standard method that professional programmers follow or if one method has very clear advantages. If there is no such thing, I'm thinking of probably going for multiple html pages. Thank you so much for your response. – thekkm13 Jun 10 '16 at 21:48
  • @thekkm13 This is the case of user experience which depends on how you go about designing your website. The main thing drives here is content, choose wisely what and how you want to display and what would be the best UX for that ;) – Tushar Gupta Jun 10 '16 at 21:48
  • @TusharGupta Thank you! I'm thinking of multiple html pages simply because I'm assuming it will be less complicated for me - I'm not really a programmer so! And also since based on the replies, it seems like it doesn't matter either way. – thekkm13 Jun 10 '16 at 21:52
  • If the proyect will end up being big, a single page will delay a lot the load due to lots of resources being loaded. If the proyect will stay small, a single page will gather more info in one look and you could even add nice transitions between sections adding a more "flowing" experience to the user. – LordNeo Jun 10 '16 at 21:56
  • @LordNeo Ah! Makes sense, thank you so much! – thekkm13 Jun 10 '16 at 21:58
  • Also, if you can learn yourself some basic php, you could do some "includes" to insert the common sections (like header and footer) in each page, making it easier to keep in place. Pure HTML has the `w3-include-html` option too, but I haven't tried enought to make an opinion about it. – LordNeo Jun 10 '16 at 22:01

2 Answers2

1

From easy to code perspective: (Not Recommended)

Obviously you can repeat the same HTML structure in all your pages and just change the center content in each page. Then you have to link your sub pages (1,2,3,4...) using normal anchor tags <a href="1.html"></a>.

Pros:

  1. Easy to create.
  2. Requires no / less technical expertise

Cons:

  1. Difficult to make changes to header and footer.

----------

From easy to maintenance perspective: (Good Option)

In case you want to have a common header and footer for all pages, then I would recommend creating a single page with following structure

Header
(1,2,3,4) <-Links
BODY CONTENT
FOOTER

Then on click of the links (1,2,3, etc.,) fetch the content from 1.html and inject it to the body of this index.html.

So as a result you are avoiding the need to repeat header and footer in multiple pages and you will adhere to DRY principle (DON'T REPEAT YOURSELF).

Pros:

  1. Elegant way to implement.
  2. Easy to make changes to the header/ footer.

Cons:

Requires technical knowledge to use AJAX based content fetching and substitution in the parent page.

----------

From easy to maintain & manage content: (Best Option)

You can think about using CMS systems to maintain your simple website more efficiently.

Pros:

  1. Easy to Manage content
  2. Easy to make changes
  3. User friendly Rich text content editing features.
  4. Easy way to link all pages
  5. Easy to use Out of Box dynamic features (to generate your links 1, 2,3, etc.,)

Note: You would need a web server to host your website.

David Chelliah
  • 1,319
  • 1
  • 13
  • 24
0

Have you considered how you will deal with different screen sizes? How about phones? Will your images and format resize?

Would it be helpful to have a system that takes care of this for you?

It's called Bootstrap - perhaps you've heard some of the hubbub.

Take a look at these tutorials for building a single-page, multiple-section, Bootstrap website (currently the hottest type of site) and if one of them will work for you, follow that tutorial. It should take less than an hour. Then, update the information/images with your own and you're a long way down the road.

Personal - Demo here - Tutorial here

Artsy/Creative - Demo here - Tutorial here

Company - Demo here - Tutorial here

Basic Template Layouts

Then, if you want more, search YouTube for additional Bootstrap video tutorials.

cssyphus
  • 37,875
  • 18
  • 96
  • 111