Making a website for my mother's small business! Here is the progress so far

[raytracer]

So, I may have been a bit too much of the better half of a week messing around with HTML making a website for my mother's   small business. At first it was very messy code wise, but I have just finished rewriting most of the site, so I figured I'd share my progress with you guys if that's alright! Maybe I can learn a thing or two from you guys.

[Website itself]
https://mysticmagnolia.neocities.org/

[futurearcana]

That's a pretty old school website... I don't know if that's necessarily your intention but for a website for an actual business I'd orbit more towards a more modern style. That's what the vast majority of potential customers would expect, and that's likely gonna attract more people. Think mobile first, big "book appointment" button, a map showing where the business is located and big bold fullscreen pictures up front.

Or just keep doing what you're doing, it really depends on what you're trying to accomplish with the website 

[raytracer]

it is intended to be a more retro style site design; however, I still will work on making it more mobile friendly so that most customers who view it will end up having a better experience, ie text being larger and more readable, and dedicated ui elements for site navigation rather than just plain text. Though I have been stumped on how to make the site respond to being on a mobile device. I might just create two pages and have the site detect if someone is on a mobile device and load the mobile friendly page, rather than make the main page a responsive page with scaling elements

[Melooon]

That's what the vast majority of potential customers would expect, and that's likely gonna attract more people.

I think there's a real possibility this is a misconception that's been sold to us by web design agencies

While I've never seen anyone do a study into the business effects of a so-called "modern" site directly verses a more unique site (I would love to see this done as an actual academic study and if it has been done please tell me! I'm aware "modern" sites do have a lot of evolutionary study behind them, but a lot of it is also just designer trends) - However I have done my own small testing in past job applications ~ sometimes using a very modern site, sometimes using a Melonking style site. I've also directly asked multiple managers if they would consider hiring a person with very quirky site like Melonking.net. (I'm aware this is from a hiring angle and Id also note this was largely managers in programming and games industries).

The answer I got was consistent; they did not care if the site looked old or new, nor did they care if it had a lot of fun stuff or was super serious. The main thing they were interested in was if it had the core information they needed to find about me. After that, extra quirky features were something they would either ignore, or they would consider them a plus if they had extra time to explore them - particularly if those quirky features showed that I'd fit into their team better (e.g. if the team was into retro gaming, then having retro game stuff was a plus)

Sooo in this case; does raytracers site do that! I can see opening times, I can see what the business does, I can see contact info and an appointment booking system. It's all mostly clear and consistent and I personally find the retro design inviting! (Is the retro look something that the customers would relate to? Maybe! Older-customers might remember it, and younger ones might find it "aesthetic"  )

I would make these notes:

• The Find Us page should have a map and more description for finding the business, plus a picture of the front of the building would be helpful for people!
• When you click on nav links, the UI should stay consistent, it should not pop out of its frame UI.
• I think the contact details should be bigger and more inviting, the phone number is the most important bit of info for many people.
• The webmaster contact should be in the footer - right now it's confusing because there is no contact e-mail for the business itself so I would accidentally e-mail the webmaster with hair questions.
• I do agree with futurearcana that improving mobile support would be important (particularly for a business like this with Instagram using customers); I think you can do it without too much fuss with this design.
• There is a chance that the retro design could make people think this is a real retro website (and maybe not active?) - I would just make sure to include a modern date or something to dispel that feeling.

Overall though I think this is a really nice design, and I personally find it refreshing and easy to use ~ however Im not your customer! So I think the best thing you can do is ask customers if they used the site and if they enjoyed it or had any issues ~ that will quickly give you some tips.

Good work though and well done so far! And I hope your business and site go well

[futurearcana]

Definitely a valuable insight, also I didn't mean to criticize, the website is really cool and all, and besides here I am on a 2000s style forum posting about 90s style websites 

It'd be interesting to do a proper case study on the efficacy of old vs modern web design trends for businesses... I might actually try and do that at some point.

[raytracer]

Thank you so much for the feedback, and I will gladly implement the proposed changes/additions, and as to why the other pages are inconsistent is more due to the fact the entire site is being rewritten to use flexboxes rather than the experimental spaghetti I was using before, so for now I am working on the main homepage, and then I will just copy and paste the code to the other pages and make adjustments to content required for each page.

I am really happy to see the site be well received, as it is being made more as a gift for my mother's small business. I will off course make progress updates to this thread if you would like to see how the site evolves and if you would like to continue giving feedback!

Lastly the design of the site is meant to invoke a nostalgic feeling to my mother's more older customer base, ranging from 30y to 60y of age, while also being fast and easy to navigate with none of the extra "modern" corporate bullshit lol.

Eventually I hope to make a site for myself to post some of the stuff I make, especially the stuff I make on my older IBM ThinkCentre Windows XP machine as I find it really cool to use it for creating as it imposes limitations that force me to be more creative other than asking an AI "hey make me a 3D render of a house or something".
 

I think there's a real possibility this is a misconception that's been sold to us by web design agencies

While I've never seen anyone do a study into the business effects of a so-called "modern" site directly verses a more unique site (I would love to see this done as an actual academic study and if it has been done please tell me! I'm aware "modern" sites do have a lot of evolutionary study behind them, but a lot of it is also just designer trends) - However I have done my own small testing in past job applications ~ sometimes using a very modern site, sometimes using a Melonking style site. I've also directly asked multiple managers if they would consider hiring a person with very quirky site like Melonking.net. (I'm aware this is from a hiring angle and Id also note this was largely managers in programming and games industries).

The answer I got was consistent; they did not care if the site looked old or new, nor did they care if it had a lot of fun stuff or was super serious. The main thing they were interested in was if it had the core information they needed to find about me. After that, extra quirky features were something they would either ignore, or they would consider them a plus if they had extra time to explore them - particularly if those quirky features showed that I'd fit into their team better (e.g. if the team was into retro gaming, then having retro game stuff was a plus)

Sooo in this case; does raytracers site do that! I can see opening times, I can see what the business does, I can see contact info and an appointment booking system. It's all mostly clear and consistent and I personally find the retro design inviting! (Is the retro look something that the customers would relate to? Maybe! Older-customers might remember it, and younger ones might find it "aesthetic"  )

I would make these notes:

• The Find Us page should have a map and more description for finding the business, plus a picture of the front of the building would be helpful for people!
• When you click on nav links, the UI should stay consistent, it should not pop out of its frame UI.
• I think the contact details should be bigger and more inviting, the phone number is the most important bit of info for many people.
• The webmaster contact should be in the footer - right now it's confusing because there is no contact e-mail for the business itself so I would accidentally e-mail the webmaster with hair questions.
• I do agree with futurearcana that improving mobile support would be important (particularly for a business like this with Instagram using customers); I think you can do it without too much fuss with this design.
• There is a chance that the retro design could make people think this is a real retro website (and maybe not active?) - I would just make sure to include a modern date or something to dispel that feeling.

Overall though I think this is a really nice design, and I personally find it refreshing and easy to use ~ however Im not your customer! So I think the best thing you can do is ask customers if they used the site and if they enjoyed it or had any issues ~ that will quickly give you some tips.

Good work though and well done so far! And I hope your business and site go well

[larvapuppy]

A site like this will make her business stand out from the crowd! As long as you keep it user friendly I think a little 90s flair is a good thing. 

If you have a bit of cash to throw around, buying a domain name for the site would make it a bit more professional.

I hope you'll update us when the site is finished so we can see! 

[raytracer]

I definitely do want to try and get a domain for the site and off course become a supporter on Neocities to use said domain. Luckily domains are available for the name of the site and fairly cheap as well, and don't worry! I'll make sure to keep you guys updated!

A site like this will make her business stand out from the crowd! As long as you keep it user friendly I think a little 90s flair is a good thing. 

If you have a bit of cash to throw around, buying a domain name for the site would make it a bit more professional.

I hope you'll update us when the site is finished so we can see! 

[raytracer]

Made an update to the site using Melooon's webmaster link location suggestion along with setting different text sizes for different elements to improve universal readability of main content on any display, as well as moving under construction gif to the bottom of the site so it is not in the way.

Edit: I am brainstorming methods of adding site scaling for varying desktop resolutions and have settling on having a dedicated set of pages with adjusted elements for mobile devices instead of trying to shoehorn in mobile scaling into the existing page with my limited skillset, though I may consolidate the desktop version and mobile version of the page at a later date.

https://mysticmagnolia.neocities.org/

[raytracer]

New big progress update! I had finally figured out a solution for having a mobile friendly version of the site available!

I decided to have the main website check the userAgent of the device viewing the site, and if it matched Android/iPhone, it would redirect to https://mysticmagnolia.neocities.org/mobilehome! After that was figured out all I had to do was figure how to make the site elements responsive which mainly involved replacing px with % and VW depending on the element and it has proven to have satisfactory results!

Also, some backend tweaks were done to the main page to slightly decrapify it. If you have any feedback and/or suggestions, please let me know!

Mobile: https://mysticmagnolia.neocities.org/mobilehome
Desktop: https://mysticmagnolia.neocities.org

[cmdr_nova]

New big progress update! I had finally figured out a solution for having a mobile friendly version of the site available!

I decided to have the main website check the userAgent of the device viewing the site, and if it matched Android/iPhone, it would redirect to https://mysticmagnolia.neocities.org/mobilehome! After that was figured out all I had to do was figure how to make the site elements responsive which mainly involved replacing px with % and VW depending on the element and it has proven to have satisfactory results!

Also, some backend tweaks were done to the main page to slightly decrapify it. If you have any feedback and/or suggestions, please let me know!

Mobile: https://mysticmagnolia.neocities.org/mobilehome
Desktop: https://mysticmagnolia.neocities.org

I was just about to post and say that, a lot, and I mean a lot of people are using their phones to view websites nowadays. I use goatcounter to track anonymous stats, and a majority of people viewing my site are on a smartphone. But, I see you've already went ahead and made a mobile version.

What you could do, in order to unify the experience, is have the mobile and desktop versions be on the same page, and use media aware CSS to switch the site's appearance depending on what a viewer is using to browse it. For example, on my site, on desktop, you'll see the full entire page and all of the content that comes with it, which you can also see if you turn your phone sideways. But, if you view it with your phone facing vertical, it switches to a feed content-only view, with the vanishing menu at the top of the page.

This is all possible with a little, or a lot of CSS.

Other than that, I would definitely say, put the "book apointment" link right on the front of the mobile version of the page.

Looks good!

[Melooon]

I spent a few minutes re-working your index page because I think it would be helpful for you to see how certain things could be improved! Please don't just use this as a drop in replacement for your code, but study it and compare it to your code, because thats the best way to learn ~ try to figure out why I made the changes I did and where!

The main thing I did was enable dynamic width so you don't need to have two separate sites for mobile and desktop  and it's not dependent on JavaScript.

The other changes I made were:

• Fixed HTML errors and formatted the code
• Removed a lot of redundant align="centre" tags
• Simplified the HTML and removed unnecessary tags
• Grouped the CSS so that it cascades instead of repeats
• Reduced the number of id's when native HTML elements exist for those id's

Overall I will say your code was very nice to work on and you are very close to getting pretty good! You made a lot of novice mistakes, but thats fine and thats why I thought it was a good opportunity to show you how you could fix them!

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Mystic Magnolia Hair</title>

        <style>
            @font-face {
                font-family: "newdefault";
                src: url("fonts/time.ttf") format("truetype");
            }

            /* Swapped to body to avoid themeing html tag */
            body {
                background-image: url("images/stars2.gif");
            }

            /* Main Wrapper */
            #wrapper {
                font-family: newdefault;
                font-size: 16px;
                text-align: center;
                margin: auto;
                max-width: 850px;
            }

            /* Added cascading styles for common features */
            nav,
            footer,
            header,
            #leftcontent,
            #rightcontent,
            #buttoncontent {
                border: pink 5px ridge;
                background-color: beige;
            }

            header {
                height: fit-content;
                margin-bottom: 10px;
                background-image: url(images/mysticbricks.png);
            }

            nav,
            footer,
            #buttoncontent {
                margin-bottom: 10px;
                padding: 5px;
            }

            nav a {
                font-size: 19px;
                margin: auto;
                margin-top: -15px;
            }

            main {
                display: flex;
                flex-flow: row;
                gap: 10px;
                margin-bottom: 10px;
            }
            /* The flex value makes it wider, more flex = wider! */
            #leftcontent {
                flex: 1;
                padding-left: 15px;
                padding-right: 15px;
                font-size: 18px;
            }

            #rightcontent {
                flex: 3;
                font-size: 14px;
            }

            #rightcontent p {
                font-size: 18px;
            }

            #buttoncontent {
                border-color: lightgray;
                background-color: gray;
                margin: auto;
                margin-top: 10px;
            }

            #buttoncontent img {
                max-width: 88px;
            }

            #bottomconstruction {
                margin-top: 15px;
            }

            /* This is mobile mode, it tells the flex to switch into a column mode when the page is under 950px wide */
            @media (max-width: 950px) {
                main {
                    flex-flow: column;
                }
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header>
                <img src="images/mysticmag.png" alt="" />
            </header>

            <nav>
                <a href="index.html">[ Home! ]</a>
                <a href="findus.html">[ Find Us! ]</a>
                <a href="services.html">[ Services! ]</a>
                <a href="reviews.html">[ Reviews! ]</a>
            </nav>

            <main>
                <div id="leftcontent">
                    <h2>Welcome to Mystic Magnolia Hair!</h2>
                    <p align="left" id="welcomemessage">Thank you for vising my website for my independently owned and operated buisness Mystic Magnolia Hair! Here you will find pages and links for Bookings, Services, Availability, Reviews, and More! So feel free to take a look around and consider getting your hair done with me!</p>

                    <p>
                        Here are a few examples of some of the work I have done for past clients!
                        <img src="images/example1small.png" width="540" height="225" />
                    </p>

                    <p>This website is still a work in progress so dont worry if it appears incomplete.</p>
                </div>

                <div id="rightcontent">
                    <h2>Important Info!</h2>
                    <p>
                        <b>
                            <a href="https://www.vagaro.com/mysticmagnolia/book-now"> Book Appointment Now!</a><br />
                            or<br />
                            Call! (336)-710-8102
                        </b>
                    </p>
                    <h2>Business Hours</h2>
                    <p>
                        Sun - Closed <br />
                        Mon - Closed <br />
                        Tue - 9AM to 5PM <br />
                        Wed - 9AM to 5PM <br />
                        Thu - 9AM to 5PM <br />
                        Fri - 9AM to 5PM <br />
                        Sat - 10AM to 5PM
                    </p>
                </div>
            </main>

            <footer>
                Having issues/problems with the site? Report them to the sites webmaster at
                <a href="mailto:timmoo5253@outlook.com">timmoo5253@outlook.com</a>
            </footer>

            <div id="buttoncontent">
                <img src="frontpag.gif" />
                <img src="images/neocities.gif" />
                <img src="images/bestchrome.gif" />
                <img src="images/facebook.gif" />
            </div>

            <div id="bottomconstruction">
                <img src="images/underconstruction.gif" />
            </div>
        </div>
    </body>
</html>

[raytracer]

Thank you so much for the code rework! I know my code isn't the best so having an "improved" version to reference and learn from is amazing! I'll see about implementing most changed though I may keep the separate mobile pages due to how I want content to be structured differently for the mobile site rather than just having it wrap. Like cmdr_nova said I could use CSS to achieve it but id prefer to not have to mess with the amount of CSS required to restructure the original page.

I'll also work on implementing the dynamic width to the main page as I think that still would be useful, though write it to ensure compatibility with media as so far, the dynamic width isn't scaling photos and text. Especially with as some phones have screen resolutions greater than 1080p with some up to 1440p in width, which my current implementation on the homemobile.html file supports scaling text after unwrapping it to a certain point, now how I can dictate when it starts scaling after unwrapping as resolutions increase I don't know how, but I don't think it would be hard right?

Lastly, I will happily clean up the code in a way I like that resembles the way you have its setup, it might not be exact (as I have my own weird coding habits that I prefer to maintain as it just makes it easier for my brain to digest) but it will be cleaner overall!

I can't thank you guys enough for the help and feedback you have given me these short few days! Makes me happy to have stumbled across this website, and I hope I can receive more feedback as I continue to work on the site and improve it! I may also start creating version numbers for the site to keep track of updates along with making proper logs. Perhaps even creating copies of each version with dedicated text docs containing that versions changes over the previous version.
 

I spent a few minutes re-working your index page because I think it would be helpful for you to see how certain things could be improved! Please don't just use this as a drop in replacement for your code, but study it and compare it to your code, because thats the best way to learn ~ try to figure out why I made the changes I did and where!

The main thing I did was enable dynamic width so you don't need to have two separate sites for mobile and desktop  and it's not dependent on JavaScript.

The other changes I made were:

• Fixed HTML errors and formatted the code
• Removed a lot of redundant align="centre" tags
• Simplified the HTML and removed unnecessary tags
• Grouped the CSS so that it cascades instead of repeats
• Reduced the number of id's when native HTML elements exist for those id's

Overall I will say your code was very nice to work on and you are very close to getting pretty good! You made a lot of novice mistakes, but thats fine and thats why I thought it was a good opportunity to show you how you could fix them!

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Mystic Magnolia Hair</title>

        <style>
            @font-face {
                font-family: "newdefault";
                src: url("fonts/time.ttf") format("truetype");
            }

            /* Swapped to body to avoid themeing html tag */
            body {
                background-image: url("images/stars2.gif");
            }

            /* Main Wrapper */
            #wrapper {
                font-family: newdefault;
                font-size: 16px;
                text-align: center;
                margin: auto;
                max-width: 850px;
            }

            /* Added cascading styles for common features */
            nav,
            footer,
            header,
            #leftcontent,
            #rightcontent,
            #buttoncontent {
                border: pink 5px ridge;
                background-color: beige;
            }

            header {
                height: fit-content;
                margin-bottom: 10px;
                background-image: url(images/mysticbricks.png);
            }

            nav,
            footer,
            #buttoncontent {
                margin-bottom: 10px;
                padding: 5px;
            }

            nav a {
                font-size: 19px;
                margin: auto;
                margin-top: -15px;
            }

            main {
                display: flex;
                flex-flow: row;
                gap: 10px;
                margin-bottom: 10px;
            }
            /* The flex value makes it wider, more flex = wider! */
            #leftcontent {
                flex: 1;
                padding-left: 15px;
                padding-right: 15px;
                font-size: 18px;
            }

            #rightcontent {
                flex: 3;
                font-size: 14px;
            }

            #rightcontent p {
                font-size: 18px;
            }

            #buttoncontent {
                border-color: lightgray;
                background-color: gray;
                margin: auto;
                margin-top: 10px;
            }

            #buttoncontent img {
                max-width: 88px;
            }

            #bottomconstruction {
                margin-top: 15px;
            }

            /* This is mobile mode, it tells the flex to switch into a column mode when the page is under 950px wide */
            @media (max-width: 950px) {
                main {
                    flex-flow: column;
                }
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header>
                <img src="images/mysticmag.png" alt="" />
            </header>

            <nav>
                <a href="index.html">[ Home! ]</a>
                <a href="findus.html">[ Find Us! ]</a>
                <a href="services.html">[ Services! ]</a>
                <a href="reviews.html">[ Reviews! ]</a>
            </nav>

            <main>
                <div id="leftcontent">
                    <h2>Welcome to Mystic Magnolia Hair!</h2>
                    <p align="left" id="welcomemessage">Thank you for vising my website for my independently owned and operated buisness Mystic Magnolia Hair! Here you will find pages and links for Bookings, Services, Availability, Reviews, and More! So feel free to take a look around and consider getting your hair done with me!</p>

                    <p>
                        Here are a few examples of some of the work I have done for past clients!
                        <img src="images/example1small.png" width="540" height="225" />
                    </p>

                    <p>This website is still a work in progress so dont worry if it appears incomplete.</p>
                </div>

                <div id="rightcontent">
                    <h2>Important Info!</h2>
                    <p>
                        <b>
                            <a href="https://www.vagaro.com/mysticmagnolia/book-now"> Book Appointment Now!</a>
                            or
                            Call! (336)-710-8102
                        </b>
                    </p>
                    <h2>Business Hours</h2>
                    <p>
                        Sun - Closed 
                        Mon - Closed 
                        Tue - 9AM to 5PM 
                        Wed - 9AM to 5PM 
                        Thu - 9AM to 5PM 
                        Fri - 9AM to 5PM 
                        Sat - 10AM to 5PM
                    </p>
                </div>
            </main>

            <footer>
                Having issues/problems with the site? Report them to the sites webmaster at
                <a href="mailto:timmoo5253@outlook.com">timmoo5253@outlook.com</a>
            </footer>

            <div id="buttoncontent">
                <img src="frontpag.gif" />
                <img src="images/neocities.gif" />
                <img src="images/bestchrome.gif" />
                <img src="images/facebook.gif" />
            </div>

            <div id="bottomconstruction">
                <img src="images/underconstruction.gif" />
            </div>
        </div>
    </body>
</html>

[Melooon]

it starts scaling after unwrapping as resolutions increase I don't know how, but I don't think it would be hard right?

This is actually already implemented in my re-worked version

Take a look at line 4 and line 96, one is the scale method and the other is the wrap!

Good luck!

[purblepale]

soo cool, ive always wanted to do this but everybody i talk to wants wix modern sites :(

looks great!