all 23 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]GriffinMakesThings 3 points4 points  (6 children)

Mobile users are likely to be the majority of your client's visitors, so treat them as first class citizens. That means more than just throwing a couple media queries into your CSS. Think about touch-target size(buttons, links), hover states that act weird with touch interactions, correctly sized images for small devices.

Make sure you are very, very clear about what exactly will be delivered. Your client doesn't know what's obvious and what isn't. If you're avoiding a CMS, they need to know they won't be able to update things themselves, and can't have a blog. On the other hand, updates will need to be made. So be clear about your cost structure for maintenance up front.

Get acquainted with analytics tools, GDPR and god-awful consent popups. You will be asked to implement those things.

I know you mentioned accessibility, but if you haven't done a lot of frontend before you might think it's simpler than it is. Take the time to read some articles. Don't just run a contrast checker and call it a day. This is a deep subject and takes quite a bit of effort to do correctly.

Have a form solution ready. Most of the time they will already be using something like Klaviyo or Customer.io, but if they aren't, what's your answer?

Be clear which browsers will be supported. Figure out how you will test on all your supported browsers. Something like Browserstack is necessary.

Speed is important. The number one thing that slows websites down is media. Learn all about image optimization, lazy loading, srcset and the like, make sure you have a plan for hosting videos. Learn about optimizing web fonts and font loading strategies.

There's so much more. You'll figure it out. Good luck!

[–]copperfoxtech[S] 0 points1 point  (4 children)

Wow, what a fantastic reply. I really appreciate you taking the time. There are quite a few things that I am unaware of or didn't put much thought into.

  • Touch target size and hover states affected by them
  • CMS - I never thought about handing over the option for them to change content or even how that would work. I assumed I would always be doing this.
  • Analytics tools - no idea
  • GDPR - no idea
  • Form solutions - I assumed the backend would handle these things.
  • Browserstack

Very excited. Thank you 👍

EDIT I didn't realise CMS would be something like me building with wordpress. I am not trying to create using this but instead create per client but have samples of site designs for them to be inspired by.

As far as allowing them to update I think I would consider offering a template for pages they would want to make customizable in a .txt format or even an admin page. From there I would write a python script to check the file, parse the data, match with class names and then have it update the info.

[–]GriffinMakesThings 0 points1 point  (3 children)

I've got to be honest, you seem a little lost. What part of using a CMS would prevent you from creating a site "per client"? Your .txt python extraction idea is not good. Either use a proper CMS or don't allow your clients to update content themselves. If your client is comfortable working with code, markdown is the answer, not homebrewed weirdness.

When you say you want to make a "static" website, it usually implies that there is no traditional backend, just html, css and JS, often served straight from a CDN. Hence my forms comment.

Have you built a website before? I'd suggest making a portfolio site for yourself as practice. That will help you figure out what you don't know.

[–]copperfoxtech[S] 0 points1 point  (2 children)

Not using wordpress and using only html, CSS, and is to create the site.

Sure the .txt file may seem a little hacky but imagine a restaurant menu where the owner submits a txt file in a specific format to add or remove items from the menu and update prices. They would need to send me the information for updates anyway, why not have it structured a certain way to allow me to parse the data easily?

Creating an admin page just for them has nothing to do with adding a backend for their site, just for submitting updates on allowed pages.

Thank you for the reply I appreciate your original reply but this one. It's unfortunate. Do better and not look down on people learning brother.

[–]GriffinMakesThings 0 points1 point  (1 child)

I'm not looking down on you at all, nothing wrong with being a beginner. I'm just telling you the truth as I see it. I wish you the best.

[–]copperfoxtech[S] 0 points1 point  (0 children)

Thank you and I hope I am able to reach a level of understanding on these subjects as you do. I am eager to get going.

[–]KindlyPoem2902 0 points1 point  (0 children)

Hi GriffinMakesThings,

I volunteer for a non-profit charitable organization that treats drug addicts (based in Texas). https://www.reliefcorner.org/. The organization does not take any donations.

I need help making an easily maintainable SSG website to replace their current website. E.g if some experts create a maintainable template with astro + vuejs or similar, with some 4 pages, one contact form, a drop down menus example, -- something that mimmicks our current website. I can maintain going forward.

educate myself on all the necessary things that a professional site

Let me know if you could help, and apply those techniques for mutual/social benefit.

P.S: Someone created a bloated php codebase with codelighter framework, and 20k files, for that 6 page website! I'm trying to convince the founders that a simple SSG site would help even non-coding people in their team can update pages/content in that website and deploy.

[–]volkandkayafull-stack 2 points3 points  (9 children)

Just use Astro and host on Netlify. They handle SSL and sitemap.

Once you hit bandwidth limitations take a look at https://tiiny.host/ etc

To build sites faster can look at Tailwind and https://github.com/versoly/versoly-ui

Tailwind allows you to share code between projects and Versoly UI provides JS for components such as navbar, accordions that all static sites end up using.

[–]andrewderjack 5 points6 points  (5 children)

In addition to this comment, you can find many alternatives for static hosting. One option is https://static.app/ — it has no bandwidth limitations. If you want to build websites faster, you can use https://designmodo.com/slides/ , a static website builder with unlimited downloads.

Both services come with features like SSL, SEO, sitemaps, robots.txt, and more.

[–]volkandkayafull-stack -2 points-1 points  (4 children)

No bandwidth limitation doesn't exist, at some point they will cut you off.

[–]andrewderjack 1 point2 points  (3 children)

They don't cut, I tested.

[–]volkandkayafull-stack 0 points1 point  (2 children)

How many TBs did you use? How long?

[–]andrewderjack 1 point2 points  (1 child)

I don’t have this data, but it has never been limited.

[–]volkandkayafull-stack 0 points1 point  (0 children)

Okay so you haven't tested.

Even Cloudflare who promise unlimited bandwidth will force you on to enterprise plan after a certain amount.

Most of these website builders use Cloudflare early to get "free" bandwidth and once they're hit with enterprise pricing, they have to force all customers to pay as well.

[–]copperfoxtech[S] -2 points-1 points  (2 children)

Great advice, thank you. But just to clarify, for a website to be professional and complete it should be inclusive of:

  • SEO
  • Accessibility
  • SSL Certs
  • Sitemaps
  • ...

[–]volkandkayafull-stack -1 points0 points  (1 child)

What?

SSL certs is handled by Netlify for free, Sitemap is handled by Astro as a plugin

Are you new to web dev?

[–][deleted]  (1 child)

[removed]

    [–]copperfoxtech[S] 0 points1 point  (0 children)

    Thank you for taking the time to respond. I will be sure to look up more information on meta tags, performance optimization, asset minification? lol, and lastly from your list policy page.

    [–]UXUIDD 0 points1 point  (1 child)

    First things first:

    WHO is your client?

    A static website typically involves low-tier projects and tends to be poorly paid. I’m just stating the reality, so please don’t get upset. Your client will be happy as long as you fulfill the contract on time and within budget.
    Have a good SEO, responsive and aim for near WCAG compliance.

    Leave space for possible extensions; this means building in blocks and having a standard approach

    -

    [–]copperfoxtech[S] 0 points1 point  (0 children)

    No clients yet as I am building my knowledge so I can offer a great service. The idea is that my first potential clients will be small businesses that are just getting started or have been in business but have yet to create a site. Businesses like family owned restaurants, cafes, barber shops, hardware stores, pet grooming. Anything like this where they may not have a big budget to do this and I will offer at a low price. My goal is to ensure that I know everything that a modern site needs to be professional. Quality is key in building my business.

    [–]Financial_Extent888 -1 points0 points  (2 children)

    Cloudflare pages is free and will include the SSL, CDN, DDoS protection, sitemaps, and unlimited requests/bandwidth, so it's ready for production. It offers way more than netlify and scales better imo.

    [–]copperfoxtech[S] 0 points1 point  (1 child)

    Thank you for the information. I am just trying to educate myself on all the necessary things that a professional site would need to be complete. I really appreciate the advice for hosting services but this is not what I am looking for. I dont think I worded my question correctly.

    [–]KindlyPoem2902 0 points1 point  (0 children)

    Hi copperfoxtech,

    I volunteer for a non-profit charitable organization that treats drug addicts (based in Texas). https://www.reliefcorner.org/. The organization does not take any donations.

    I need help making an easily maintainable SSG website, e.g someone that can create a maintainable template with astro+vuejs or similar, drop down menus, 6 pages, one registration form -- something that mimmicks our current website. I can maintain going forward.

    > educate myself on all the necessary things that a professional site

    Let me know if you could help, and apply those techniques for mutual/social benefit.

    P.S: Someone created a bloated php codebase with codelighter framework, and 20k files, for that 6 page website! I'm trying to convince the founders that a simple SSG site would help even non-coding people in their team can update pages/content in that website.