DEV Community

Cover image for How do you deal with content editing after the site has been shipped?
Madza
Madza

Posted on

How do you deal with content editing after the site has been shipped?

#webdev #discuss #cms #productivity

You have most likely experienced a situation where the client asks you to develop a custom static site with general info about the business, services, and contact info.

The client says the content will not change, so you eliminate the need to base it on WordPress, Joomla, Drupal, etc. So you write it from ground-up, deploy it on a server and the client is happy for now.

Half a year later, the client has changed the mind and decided to change some information in it, so he/she asks for some edits.

You might get down with one case, but what if you have like 50 sites? How do you deal with situations like that?

1) Do you always create some CMS that comes along in the beginning, no matter the complexity of the site and what the client assures about the content always being 'static' (as you know, it will be not), and then ship the site with access to CMS so clients can edit it later by themselves?

2) Do you prefer not to implement any CMS at the beginning for simpler sites (believing in the client) and offer to create CMS only if they start to ask for edits and then charge for the creation of CMS?

3) Or do you prefer to make an agreement with the clients on initial shipping about charging them for managing the site for X period of time, guaranteeing yourself the job, and some extra income in the long-term?

Oldest comments (21)

Collapse
 
iammatthewbirch profile image
maffyew burch •

Curious to see peoples responses to this! Good question! Personal experience, I've just gone through the sites html and edited it, not so efficient, but typically when there's a request for content change, there's usually a new feature that they want too..

Collapse
 
iammatthewbirch profile image
maffyew burch •

P.S. Charging for changes is a must..

Collapse
 
madza profile image
Madza •

Exactly, by the end of the day, it's still your work and time 😉
Think of that like working full-time 10 years and getting paid for the first month only, as they already paid you once 😄😄

Collapse
 
madza profile image
Madza •

Yeah, on the contrary to the belief of lesser experienced devs that deployment and shipment are the last two phases of the project, it could actually be the beginning depending on the update strategies you use, thus the question 😉

Collapse
 
iammatthewbirch profile image
maffyew burch •

Certainly! You gotta play the game, because if you don't someone else will!! 🤑🤑

Collapse
 
louislow profile image
Louis Low • • Edited

My favorite solution to this problem is. I always structure the static website payload in several JSON files. And adopting the web components paradigm is easy to manage each group of information. To change the content, I just look into the JSON files, I rarely touch the core. Unless changes to the UI.

I don't use no-code web tools to build a static website.

If the project case has closed. To reopen it even for small changes, I will consider it as a new project.

Collapse
 
magnussjogren profile image
Magnus Sjögren •

Interesting! Please, tell us more about on how to build a static site with JSON payload content.

Collapse
 
louislow profile image
Louis Low • • Edited

This can be achieved by using VueJS, ReactJS, or using simply Vanilla JS to create web components.

Let say I need a section in a static HTML page to display articles in card design, first I create a new web component (HTML+CSS+JS) and UI styling based on the mockup from Framer.

I iterate the data from the JSON file to the card components without duplicating codes.

Example card component to display articles,

<!-- @file: /src/views/components/card/articles.html -->
<card-articles>
  <!-- looping data from article.json -->
  <y each="{ data in articles }">
    <!-- begin CSS styling -->
    { data.title }
    { data.description }
    { data.tags }
    { data.date }
  </y>

  <script>
    // fetch() data from JSON file
    export default {
      onMounted() {

        const self = this
        self.articles = []

        const url = '/path/to/file/articles.json'

        fetch(url)
          .then(res => {
            res.json()
              .then(data => {
                delete self.error
                self.articles = data
                self.update()
                }
              })
              .catch(error => {
                self.error = error
                self.update()
              })
          })

      }
    }
  </script>
 </card-articles>
Enter fullscreen mode Exit fullscreen mode

An example of payload (data) for the card web component in JSON (example: articles.json).

[
  {
    "id": "",
    "title": "",
    "description": "",
    "tags": "",
    "date": ""
  },
  ...
]
Enter fullscreen mode Exit fullscreen mode

If I need to make the component reusable, I can make changes to the component with added API callbacks to use it on any pages I want.

An example to convert a web component with added API callbacks.

<!-- @file: /src/views/components/card/articles.html -->
<card-articles>
  <!-- begin CSS styling -->
  { props.title }
  { props.description }
  { props.tags }
  { props.date }
</card-articles>
Enter fullscreen mode Exit fullscreen mode

And then, mounting and looping the data at another page that need to reuse the same component.

<!-- @file: /src/views/pages/article.html -->
<page-article>
  <!-- looping data from article.json -->
  <y each="{ data in articles }">
    <!-- mount the `card` component -->
    <card-articles
      title="{ data.title }"
      description="{ data.description }"
      tags="{ data.tags }"
      date="{ data.date }">
    </card-articles>
  </y>

  <script>
    // fetch() the data from JSON file showed earlier
  </script>
</page-article>
Enter fullscreen mode Exit fullscreen mode

For me, it doesn't seem too complicated for a static website. But every component (header, navbar, hero, cta, footer, gallery, etc.) are much easier to manage. I can also be hosting the payload (data) at Firebase, which the website is running as serverless.

Thread Thread
 
shaijut profile image
Shaiju T •

Do you have a example site in your Github repo with Vanilla JS or at least tutorial to learn this ?

Thread Thread
 
louislow profile image
Louis Low • • Edited

Hoho... I do not have any tutorial for that. But you can find a working example repo of My Portfolio Website.

$ git clone --branch 2.x.x https://github.com/loouislow81/loouislow81.github.io.git
Enter fullscreen mode Exit fullscreen mode

The payload (data) path is in,

https://github.com/loouislow81/loouislow81.github.io/tree/2.x.x/src/assets/data`.
Enter fullscreen mode Exit fullscreen mode

I am using the in-house proprietary framework, instead of (Vue.js, React.js, etc.). I am more prefer less, clean and concise programming language design. So that I could spend less time on typing too many codes.

Thread Thread
 
louislow profile image
Louis Low • • Edited

I found an article at CSS Tricks about the topic you are looking for. After you read the articles, you probably wonder why the hell we need React anyway... Lol

Collapse
 
bassochette profile image
Julien Prugne •

New content === new bill

Add extra time to get back in the project and for the discussion with the client.

Collapse
 
vaclavhodek profile image
vaclavhodek •

We use Directus which is a flexible headless CMS, and get content from it using API. It's versatile, and we use it for blog, documentation, products, placeholders, media, etc.

You can get it up and running in minutes with Docker image.

You can even use it to send there content via API. For example, our Github Actions send there new versions of our CLI tool, so once it's built and distributed, the web is immediately and automatically updated too.

It can be theoretically used for user accounts, there are some roles and permissions, etc.

Collapse
 
chrkuhn profile image
Christian Kuhn •

When I was doing websites for customers (rarely do that anymore), I always went the CMS route since some content ALWAYS changes. The most important realization for me was:

Customers tended to say, they want to update site content themselves. Thus I developed a lot of sites using Joomla, since it offers WYSIWYG editing. But creating a good template for Joomla allowing easy extension and editing is tough and time consuming/expensive.
A few months after training them on the CMS they always came back asking me to do the edits. Some even did not have the credentials for the backend anymore or had no idea how to do anything in there.

My conclusion:
I tell/told customers that they will possibly never edit the site themselves and enabling a CMS to do so makes the initial project a lot more expensive. The calculation is that it is cheaper to let me do the edits and charge by the hour.
I then use OctoberCMS, which is easily customizable/themeable to the customers wishes and offers me easy editing (requires some HTML/CSS) and maintenance, when I need to.

Result: Happy customer, happy developer.

Collapse
 
soska profile image
Armando Sosa •

I think this is the kind of use case for which 11ty shines. If the customers asks for a content change, it's just a matter of editing a markdown file somewhere or changing an entry on some random json file.

Collapse
 
cboles profile image
Chris Boles •

No, I do not always create a CMS. I let the customer decide after giving my SOW recommendations which includes some Pros and Cons for using a CMS.
No matter if the scope changes during the build or 6 months later, it is a new project.
As for small changes, it's up to you. Depending on the change, a good customer gets a little more from me than a bad customer.

Collapse
 
jwp profile image
John Peters • • Edited

Following SOLID with lots of reusable functions and models fixes this problem. Keep views simple and for just one concern. Let functions alter the view and data.

But I do not work on CMS systems.

Collapse
 
yoursunny profile image
Junxiao Shi • • Edited

When I'm in college, I built a simple CMS that generates static files, and took up three websites: housing department, student services, and psychology counseling office.
Two of the departments pay me a fixed amount monthly. The other won't, so I made a complex service plan that includes CMS license fee, monthly service fee, per article posting fee, picture editing fee, text editing fee, etc; if I mess up (e.g. typos), there would be deductions. I learned this from telephone companies.
The posting itself is (1) open the Word document received from email (2) copy-paste to the CMS (3) edit typos (4) move pictures around.

If they want me to repair office computers, I charge by the hour and pay my classmate to do that dirty work.
With that, I don't need my parents to give me lunch money anymore, and I frequently take pretty girls to dinner.

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀 •

Usually I give my clients access to change the content themeselves (wordpress/drupal editor access) but if they keep on asking me for changes they can do on their own I will consider billing them when the changes are done (but perhaps I will be clear about the charges before implementing them so they know before hand)

Collapse
 
madza profile image
Madza •

Hahah, yeah, that's the dilemma 😃
Tbh, I feel like updating content for them is boring and you cant charge as much as you would spending your time on coding, working on exciting stuff 😉✨

Collapse
 
slimdestro profile image
D\sTro •

If you developed the app using some CMS like wordpress drupal etc. Then you can just relax on some beach. It's ok 😊

And if you used some custom approach like core or framework then it's also cute if you have created custom module for updating contents.

When I dont use CMS, i create custom modules which is smart too. It lists all part of website in a table and on CMS page, it lists all content with edit option. You can just edit and save it. Doing this, it'll refresh cache and user can see new contents

It's not like wordpress but it's good for what I need to deliver on static side

View full discussion (22 comments)

Read next

stan8086 profile image

Top 12 Mind Mapping Apps for Enhanced Productivity

Jose Rodríguez -

pitops profile image

How to develop a local package and use in a vite app

Petros Kyriakou -

yulin profile image

WSL Error: no space left on device

Yulin -

borysshulyak profile image

High Level requirements and purposes

Boris Shulyak -