Make Honest Design Work For Digital Business, With “Ethical Design Handbook”
Vitaly Friedman
Many business models thrive on ingeniously deceptive and manipulative digital products. Not because they have to; mostly because dark patterns have become such an accepted norm. But what happens when ad-blockers, cross-browser tracking protection and data regulation (e.g. GDPR & CCPA) become a norm, too? That’s when an honest, ethical design could be a competitive advantage.
To grow a sustainable business, we need to learn how to leave dark patterns behind. We also need to figure out how to make honest digital products financially viable. Products that enable and respect customer choices and are built and designed with ethics in mind. That’s exactly why we created a new book. Jump to the table of contents ↓
Meet Ethical Design Handbook, our new book with practical techniques and blueprints on how companies ridden with questionable practices can shift towards better, sustainable design. Download a free PDF excerpt (5 MB).
When we set out to write this book, we wanted to develop a new type of working framework to empower people to practice ethical design in their business, in their teams, and with their products. The reason was simple: too many products we use today have become machines for tricking customers into decisions they never intended to make. That’s not quite the web we want to see around us.
It’s not just the poor state of the web that brings us here though. It’s the lack of alternatives that companies can rely on. In light of new data regulation and tracking protection, there are some critical questions that only few companies have addressed yet:
What happens if you can’t get access to personal data that’s been feeding the machine all this time?
What if your competitors discover an alternative business model way before you do?
What if you can’t track and target customers wandering from one website to another?
What happens when ad-blocking becomes mainstream and your advertising scripts are dismissed by crafty blockers?
How should the work of marketing teams change with new regulations, such as GDPR and CCPA?
What competitive advantages can your business gain by focusing on privacy and transparency?
Ethical Design Handbook explores alternative, sustainable business models and shows how businesses can move towards ethical design and become more profitable as a result. It’s a very practical and tactical guide for designers, developers and management, with case studies and techniques applicable to every digital product.
The book features interface design examples that take ethical design principles into the account. Large preview.
Table Of Contents
Introduction
+
The chapter describes the necessity of incorporating ethical design in the way digital businesses run. It also defines some key terms used throughout the book.
1. The need for ethics in design
+
This section outlines some core consequences of unethical design, and it also explores some of the existing ethical design frameworks and introduces the notion of ethical transformation.
We dive into dark patterns, GDPR and existing ethical solutions. You will understand the challenges we are bound to face when embarking onto an ethical transformation.
This chapter explores how a positive change can be introduced in companies, teams and processes, including how to challenge decisions, ethical team governance and bridging ethics with risk assessment.
We’ll explore how to use a risk matrix to discover ethical design opportunities and what questions to ask to challenge decisions. We’ll explore the ethical governance model and how to develop one.
#culturalchange #ethicalgovernance #decisions
3. Respect-driven design
+
This chapter discusses and challenges how to involve users in projects, and it includes guidelines on how to design for the must vulnerable. Finally, it highlights some business perspectives of human-centered design.
You will learn how to integrate human-centered approach into your workflow, and how to involve users more in your work process, core accessibility techniques, and how to design with ethics for children.
#hcd #accessibility #children
4. The business of ethical design
+
Let’s dive into business. We establish why ethical design works as a business concept, and how we can use the traditional ways of measuring success to measure the impact of ethical design.
We’ll learn to use road-map planning, what Key Performance Indicators to use for ethical design, and we introduce The Ethical Design Scorecard, a tool to assessing the ethical level of products, business and practices.
#roadmap #KPI #ROIofethics
5. Ethical design best practices
+
This chapter provides a set of practical guidelines on how to design good cookie disclaimers, and terms and conditions and how to handle data collection ethically. It also provides a set of specific examples of how to design user interfaces with ethical design in mind.
You’ll learn how to move towarads trustworthy design, how to design ethical user interfaces, and the book also provides an extensive amount of blueprints as data models for digital products.
#ethicalUI #cookies #data #datamodels
6. Getting started
+
We wrap up the content of the book by offering a set of practical tips and specific blueprints to help you get started on your first ethical design project.
In the book, you’ll learn how to:
Help companies understand ethical design,
Justify and prove a business case,
Grow a sustainable business based on transparency and honesty,
Balance data collection and privacy,
Work within new legislation (GDPR/CCPA),
Evaluate and improve design decisions,
Embed ethical design into your workflow,
Gradually transform your organization.
368 pages. Free shipping worldwide. The eBook is available as PDF, ePUB, and Amazon Kindle. Written by Trine Falbe, Martin Michael Frederiksen and Kim Andersen. Get the book now.
Trine Falbe is a human-centered UX strategist, designer and teacher who works in the intersection between people and business. Trine is deeply passionate about ethical design and designing for children, and she is also a keynote speaker at conferences and a UX advisor in strategic projects.
As a serial entrepreneur since the very first browser, Martin Michael Frederiksen was born with a practical appreciation for the crossroads between business and digital development. He has published the books Cross Channel and the CEO’s Guide to IT Projects That Cannot Fail. He works as an independent consultant for businesses that need a devil’s advocate when trying out new strategies and ideas.
After training at an international advertising agency, Kim Andersen quickly left print media for digital design. Owing to his amazing memory he always leaves design meetings with an empty notebook, only to attend the following meeting armed with drawings where nothing has been forgotten and everything is drawn in great detail. He owns the digital design studio Onkel Kim, and he prefers difficult and complex design tasks where the brain is working overtime.
The book features scorecards and blueprints (Excel spreadsheets), applicable to your work right away. Large view.
Testimonials
“This is the book designers have all been missing: A practical reference book on how to work ethically in design. Starting with the why - what does “Ethical Design” mean, and why is this book even necessary or important, the book easily morphs into the business value of ethical design, best practices in ethical design, and how you can influence positive change.”
“It’s easy to feel like we’ve lost the web we used to love. The Ethical Design Handbook is an essential guide to reclaiming it. Packed with practical resources and guidance for designers, developers, and project managers, it will help you to integrate a higher standard of professionalism into your work on the web. Refreshingly, this book contains no inspirational waffle, public shaming, or lectures on morality. What it does contain is proven techniques, standards, and strategies for getting the job done while protecting your users.
That matters more than you think. As policymakers seek to crack down on the tech giants who have diminished the web for us all, adopting the techniques in this book can be an essential way of defending our craft from heavy-handed regulation.”
“I’ve just finished reading The Ethical Design Handbook and am both brimming with new ideas and am more hopeful about the future. The authors bring new tools to the table, and also do a good job of reminding designers how many of our current tools already help us contribute to positive impact. The trick is that we have to make sure to actually put in the effort, and have some cake to keep us going.”
“The Ethical Design Handbook is exactly what its title implies: a gentle, persuasive, perspective-giving guide to how you can become a better designer without selling your soul.”
With The Ethical Design Handbook, we’ve tried to create a very focused handbook with applicable, long-living solutions to introduce a positive change in companies ridden with dark patterns and questionable practices.
There is quite a bit of work to do on the web, but our hope is that with this book, you will be equipped with enough tooling to slowly move a company towards a more sustainable and healthy digital footprint.
Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.
Stay smashing, and thank you for your ongoing support, everyone!
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Alla, Adam and Heydon are some of these people. Have you checked out their books already?
Smashing Podcast Episode 11 With Eduardo Bouças: What Is Sourcebit?
Drew McLellan
In this episode of the Smashing Podcast, we’re talking about an interesting open-source tool called Sourcebit. How can it help our content workflow with JAMstack sites? I spoke to developer Eduardo Bouças to find out.
Drew McLellan: He’s a web developer, technologist, writer and occasional public speaker with a strong track record of working on open source projects. He works as a software engineer on the JAMstack site management platform, Stackbit, and develops open source tools such as Staticman, Speedtracker, and Sourcebit. So we know he’s an expert in the modern web platform. But did you know he’s deathly allergic to Wednesday? My Smashing friends please welcome Eduardo Boucas. Hi, Eduardo, how are you?
Eduardo Bouças: I’m Smashing.
Drew: I wanted to talk to you today about a tool that I know you’ve been working on called Sourcebit. I know you do a lot of work both at the day job Stackbit, and personally in your own time, around sort of tooling with sort of what we now call JAMstack sites. So before we talk about what Sourcebit does itself, perhaps you can tell us a bit about the sort of scenario with the JAMstack site that might lead to somebody needing a tool like Sourcebit.
Eduardo: Sure. So to go back in time a little bit when I started using a static site generator. My first encounter with a JAMstack was with Jekyll, as I’m sure many people are as well. And when I started using Jekyll for my site, the authoring experience was a bit cumbersome. So it involved manually editing Markdown files on my local machine and then pushing them to get repo and then the thing would get integrated and built. And that’s still a workflow that exists today and that many people use and it makes sense for a lot of people in a lot of organizations. But, first of all, it doesn’t scale very well if you have like a larger team and especially if you have people from less technical backgrounds who may not be comfortable with Markdown or with using Git or with that whole pushing to a GitHub repo workflow.
Eduardo: And so it makes a lot of sense, in my opinion to couple a static site generator with what is now these days called a headless or a decoupled CMS. So if you come from a more traditional web development background where you might use something like WordPress, a headless CMS is something that behaves in a very similar way. So you still have this interface where you can author your content, and you have a nice WYSIWYG editor and media management and everything.
Eduardo: But the output of such a platform is not a fully formatted HTML page. And instead, the content is exported in a way in a format that is agnostic of any technology or any tech stack. And so that content is, it’s possible to integrate that content with your static site generator. And that’s why I think it makes a lot of sense to couple a headless CMS with a static site generator because you kind of get the best of both worlds in the sense that you get the performance, the security and the simplicity of using a static site generator, but at the same time, you still get kind of a rich authoring experience by using a nice editorial interface.
Eduardo: And even though it makes a lot of sense to couple those two tools together, it’s not particularly straightforward to integrate them. Especially if you’re using a more traditional file based static site generator, such as Jekyll or Hugo, where everything has to live as a file. So how do you take that content that lives in this headless CMS? And how do you translate that into files that your static site generator can understand and process?
Eduardo: As you said, I’m super passionate about creating tools for developers and particularly creating tools that allows developers to use the JAMstack paradigm with as little friction as possible. And that’s where source that comes in. That’s why I’m super passionate about this project in particular. So the idea is, that Sourcebit allows you to connect to any API based data source such as a headless CMS, you sort of tell it where your content lives, you help it make some sense of the structure of your content. And then Sourcebit takes care of sucking all that content down and writing it into the files with the formats into location static site generator is expecting. So that’s kind of the idea behind Sourcebit.
Drew: So rather than having authors work directly with markdown files, that your static site generator turns to a site, you’ve got your authors working with another tool, a headless CMS, maybe something like Contentful or even WordPress, and then Sourcebit is the bit in between that gets that content from where it’s been authored, and translates it in a way into a format that the static site generator can turn into a static site?
Eduardo: Exactly, yeah. And the way that it could, kind of see two different ways of using the tool that can help developers. One is making Sourcebit part of your deployment routine. So if you’re using a hosting platform like Netlify, for example, and you configure your deploy commands to be a Hugo build, is it the build command for Hugo or something said, so the command that generates the static files for Hugo, you would also have another command as part of that routine. That would be something like Sourcebit fetch. And so at build time, Sourcebit will go pull all the other data, generate all the files that Hugo needs. And then the whole deployment will already use those files and deploy all the content that is coming from the CMS. So that’s kind of one possible use case for Sourcebit.
Eduardo: The other one is to use Sourcebit in a local development workflow. So you can run Sourcebit with something that we call the watch mode. And so Sourcebit keeps looking for changes in the remote data source, so in this case, headless CMS. And so whenever you publish an article or you change an entry into CMS Sourcebit will acknowledge that and it will regenerate all the files for you locally. And so what that means for a developer working locally is that you can have your CMS window next to your Jekyll or Hugo site, running locally, and then you can see changes happening in real time. You change something on the CMS and then you can see that change being reflected on the local side, which I find super useful. So those are kind of the two ways that you could get use Sourcebit.
Drew: So I guess for all that to work Sourcebit has to know about both the system that the content’s stored in and the way that the static site generator needs the files organized in the file system. How do those two things work?
Eduardo: Sourcebit is a plugin-based architecture. So the idea is that you’re going to have different types of plugins that will accomplish different tasks. We have something that we call the source plugins, which are solely responsible for connecting to a data source like Contentful, for example, and they will connect to that data source, they will pull content and they will normalize that content into a format that is kind of agnostic of data source such that if you want to connect multiple data sources, so you’re using WordPress and Contentful, and Sanity, for example, all the content from those data sources will be normalized into a format that is kind of standardized across the board. So the responsibility of the source plugins will be to just that, to connect to a data source, normalize the content and put them into a bucket of data.
Eduardo: And then you have another type of plugin which we call a target plugin. And the target plugin has no knowledge whatsoever about where the data is coming from, but it knows about a particular piece of software that is expecting that data for example, you might have a target plugin for Hugo a target plugin for Jekyll. So the target plug in will be responsible for writing that data into specific format and the specific locations that the static site generated is expecting.
Eduardo: And then you might have other types of plugins that don’t know about the source and don’t know about destination. They’re just responsible for kind of massaging the data and doing all sorts of transformations in between. So that’s kind of the way that the tool is organized. And I think the benefit of that approach is that each plugin is only concerned about a specific area. So if you are, let’s say that you’re maintaining the source plugin for Contentful, you don’t ever need to worry about what static site generators will be supported. You just worry about maintaining that specific plugin that we take care of making sure that it can be plugged in into any combination of static site generators or different outputs that you want to use.
Drew: So is it possible to have multiple sources running at once and use a Sourcebit more like a content aggregator to pull them from lots of different sources at once?
Eduardo: Yes, yes, it’s totally possible. And that’s why we kind of use that principle of normalizing the data, because you might have as many data sources as you want. And then when a plugin comes in to kind of transform that data, it doesn’t really care where the data comes from, everything is treated the same. So it’s totally possible to do that. You can configure as many source plugins as you want. And so it’ll pull data from as many places as you want.
Drew: Yeah, that could be quite interesting. Could you think of a corporate website might have a blog in there, it might have copy from marketing, it might have job openings coming from an HR system. And you could potentially configure Sourcebit to pull that into one location before generating the site, which is quite an exciting prospect, I think.
Eduardo: Yeah, yeah. And CMS is are just one possible data source that you might use this tool with. For example, one of my colleagues that started was creating a source plugin that pulls data from Reddit, for example. And that’s just one very simple example of one possible data source. So as you say, it could get quite interesting because you might be pulling data from a CMS, might be pulling data from Reddit, Twitter or an HR platform and it just all comes down together nicely. So, yeah, it’s a possible use case for it for sure.
Drew: What sort of plugins exist at the moment for different sources?
Eduardo: So we launched the first kind of public version of the tool last week. And we launched with a two source plugins and two target plugins. So the source plugins are for Contentful and Sanity. And the target plugins are for Jacqueline and Hugo. We will keep working on your plugins internally at Stackbit. But our goal is for the community to eventually take ownership of the tool as well like this is a fully open source MIT license project. And so we would love to see people creating their plugins and building stuff with Sourcebit that we haven’t even thought of. So, that’s the ultimate goal. We’ve been in touch with people from different CMS companies who are interested in building their plugins as well. So we’re in constant contact with them. So hopefully we’ll see a nice ecosystem of plugins somewhat soon.
Drew: How complex is it to develop a plugin if you’ve got a completely custom system that you know that you need to integrate with? Is it a very involved difficult task to develop plugin or is it easier than that?
Eduardo: I’m a bit biased to answer that. I like to think that it’s simple and I’ve tried my best to make the process simple and also very well documented. So we have one of the repositories that we make available is kind of a sample plugin, where we have a fully annotated source code for a plugin. So we have comments on every possible function that you might implement outlining the arguments that it receives, how you can use this function to get data from this etc. So hopefully that’ll be a very useful resource. We also have documentation pages where we kind of outline the anatomy of a plugin, like how it pulls data where it’s supposed to push that into. So hopefully, it’s a fairly straightforward process.
Eduardo: But different systems will present different challenges. So I’m sure there will be suggestions and feature requests from someone in the community saying, “I want to integrate with this system. So I kind of need a way of doing this.” And we’ll be more than happy to kind of accommodate those requests and kind of work with the community to make the plugin architecture better over time.
Drew: And it’s all written in, I presume is JavaScript node?
Eduardo: It is. It is.
Drew: I noticed that you mentioned earlier briefly that you can run Sourcebit with a watch flag, and it will help you to have a sort of live updating workflow. Is that something that needs to be implemented by the source plugin, or is that general system? Is it a polling mechanism or are you listening for sort of hooks and things from the source system?
Eduardo: The core application is very lean, and it’s not opinionated at all. So it’s up to each Source plugin to kind of implement that functionality. All the core application does on that front is it tells the plugin what are the kind of the options that the user asked for. So in the two plugins that we launched with, so we have one for Contentful, and one for Sanity, the way that the watch mode is implemented in each of them is very different. For example, in Contentful we have, as I mentioned, a polling mechanism in a regular interval of time, like poll for changes whereas for Sanity, we have like a running web socket that is constantly listening for changes and respond to the changes. But basically, the idea is that the source plugin implements its own listening mechanism and it’s responsible for telling the core application that I have new content please update yourself. That’s kind of the domain idea.
Drew: That sounds like quite a flexible system then that should cope with lots of different sources and different types of system.
Eduardo: Yes. I was just going to say like still on that topic of flexibility, one thing that I wanted to mention as well is Sourcebit is configured using a JavaScript file. So if something similar to what you would do with some like web pack, for example, although a bit simpler. And so you have the option to configure each of the plugins on that file manually. But we also offer this commandline interface, where basically each plugin is able to tell the core application the set of questions that it needs to ask the user in order to configure itself. So basically, when you run npx create-sourcebit, it can create everything from scratch for you.
Eduardo: So it pulls a list of all the available plugins to have the option to sit on a source plugin for Contentful and the target plugin for Jekyll, for example. And then based on the plugins that you choose, it then asks you a series of questions that will ultimately lead to a fully configured JavaScript file. So for example, for Contentful it’ll ask you for your credentials, like how do I access your Contentful account? And then it will actually pull all the content types from Contentful. And it’ll ask you okay, I found this content type called blog posts. What is this? Is this like a page? Is this a data object? And if it’s a page, where should I store this? What kind of fields should I use for the layout for the content?
Eduardo: I think it’s a very user friendly way of configuring the whole project. So hopefully, by the end of this configuration process, you can just run a command and you can pull the content straight away without having to mess around with JavaScript files.
Drew: So that configuration process answering those questions, then writes the JavaScript configuration file for you, which you can then presumably just commit into your source control and distribute to other developers on your project or into your build process for running live. You mentioned a third type of plugin distinct from the source and the target that works on data in this agnostic format in the middle. What sort of scenarios do you imagine that being used for?
Eduardo: We created a plugin that is responsible for transforming assets. So to give you an example, let’s say that I’m using Contentful, and you have images embedded as part of a blog post. And by default, if you just pull that data from Contentful, the images will be using a live URL from like Contentful CDN which is a totally viable option if that’s what you want to use. But you might want to instead, serve the images alongside the content. So have them in your repo and served from whatever service you’re using to serve to site as well. And so that plugin in specific, it will look for any assets that are using, it will pull those assets down, download them basically to your repo or to your local file system which it can then push.
Eduardo: And it will replace any URLs in your files that reference that remote URL, it’ll replace those with references to the local files instead. So basically, when you push the site, you push the content and the assets and everything will just work seamlessly. So, that’s one example of kind of a transformation plugin that is not pulling. It’s not specific to a data source and it’s not specific to a static site generator. It just transforms things in between.
Drew: You mentioned that there are target plugins for Jekyll and Hugo, are there any that you’re expecting to see in the near future?
Eduardo: Well, I’m a big fan of Eleventy. So I’m really hoping to see an Eleventy plugin coming out fairly soon. And then I guess there are some static site generators that already have their own kind of plugin ecosystem. So I’m curious to see if people will still find a need to have a source plugin for those types of static site generators. Like another possible way that you can use Sourcebit by the way, is if you’re using something like Next.js, so like any node based static site generator. You don’t necessarily need a target plugin, you can just require Sourcebit as an NPM module, and you can run the all the mechanisms for fetching data. You can just run those as in memory functions and get your content available as part of your Next.js pages. To answer your question, I guess for those we won’t see target plugins specifically, but we can already use Sourcebit in that way. In terms of next source plugins, I would expect to see Eleventy and maybe a few other kind of file based static site generators in the near future.
Drew: This is all quite exciting stuff, I think. Is it just you working on it in terms of development or is there a bigger team?
Eduardo: I’ve been kind of the main developer working on it, but it’s a team effort. So it’s something that a bunch of people at Stackbit identified as a problem. And we’ve been working together on kind of specification and the right way to approach this. I just happen to be the guy pressing the keys to make it happen.
Drew: And I guess Sourcebit actually can be very useful for Stackbit customers, which is Stackbits motivation for developing and contributing this but obviously, it’s going to be useful to a much wider audience than just Stackbit customers.
Eduardo: Yeah, we have big plans for Sourcebit internally. It’ll really help us achieve our mission in terms of making JAMstack, accessible to as many people as possible, but we wanted to make sure that we share this particular project with the community because we feel that it’ll help a lot of people regardless of whether they’re interested in using Stackbit or not. So that’s why it’s a fully open source project.
Drew: That’s great. Is there anything else you’d like to tell us about Sourcebit?
Eduardo: No. I would just love people to try it out. I’m sure we can share links to like the repo and stuff like that. There’s a YouTube video in the main repository, that shows how the experience is like when using Sourcebit with a headless CMS and a static site generator. So it kind of gives you an idea of what it’s like to use the CLI and the whole interactive setup process, and I would just love people to try it out. And get in touch if they think it could be improved or it’s terrible, or it’s great, or it’s helping them. So yeah, I would love to hear from people.
Drew: That’s great. We’ll link that all from the show notes, but also Sourcebit be found at github.com/stackbithq/sourcebit. So I’ve been learning all about Sourcebit today, what have you been learning about lately?
Eduardo: I’ve been super interested in learning about Serverless. And I’ve actually been trying to learn as much as possible about it for the past few months. It’s a concept that I’m super interested in. It’s one of those seismic changes in how you approach development. And I’m super interested in kind of the use cases that it has and kind of the different ways of rethinking how you build an application for Serverless. So that’s something that I’ve been trying to read about as much as possible and just playing around and trying, like side projects. Yeah, it’s an area I’m super passionate about.
Drew: It’s very interesting, isn’t it? Quite a shift in how you have to think about projects?
Eduardo: Definitely, definitely. There’s a metaphor, and I don’t want to ramble about Serverless here, which is that a metaphor that I think is really helpful is to think about Serverless as kind of using Uber as opposed to owning a car, like it forces you to, you still have a car, like the term Serverless maybe is a bit misleading because you still have a server, but if you have a car, you might just leave your stuff in the car because you know it’s going to be there the next day, whereas if you’re using at Uber, it forces you to rethink and to acknowledge that every day you’re going to get a new car with different people driving it, and it just have to adapt your way around that fact. So, that metaphor really helped me wrap my head around the whole Serverless paradigm.
Drew: Yes, I had not heard that before, that’s quite an interesting way of looking at it. If you, dear listener, would like to hear more from Eduardo, you can follow him on Twitter, where he’s @Eduardoboucas. And you can find his web development periodical build times at Eduardoboucas.com. Thanks for joining us today. Eduardo. Do you have any parting words?
Eduardo: No, not really. Just first of all, thank you so much for having me. It’s been a pleasure. And by the way that weird pronunciation for my last name, maybe I should say that it’s, if you want to find my Twitter handle and website the surname is B-O-U-C-A-S. Boucas is another weird Portuguese pronunciation if you want to find, it’s Eduardoboucas. So, yeah, thank you so much for having me. It’s been a pleasure.
Building An E-Commerce Site With October CMS And Shopaholic
Leonardo Losoviz
October CMS is flourishing: With over 9000 stars in its GitHub repo, 2000 forks and 300 contributors, it is becoming a major force in the CMS space. It won the popular vote as the Best Flat-File CMS from 2018, new plugins are published on its marketplace almost daily (covering most of the developer needs), and its network of partners is expanding worldwide. Let’s see what it is all about.
Built in PHP and powered by Laravel (one of the most powerful and developer-friendly PHP frameworks), October CMS is a free open-source Content Management System (CMS). It benefits from Laravel’s clean code and sound architecture to provide a great developer experience, over which it adds simple and flexible CMS functionality to provide a great user experience. This combination makes it possible to launch new projects in a matter of minutes, without having to build the project from scratch. Due to all these features, October can minimize the costs of developing and maintaining websites, making it particularly valuable to businesses and digital agencies.
Yet, in spite of its power, October CMS is very easy to use. Since its inception, October has strived to be “as simple as possible, but not simpler”. For this reason, it is based on one of the simplest stacks for the web: PHP to render HTML, plus CSS and JS assets. In the words of its creators, October’s mission is to prove that “web development is not rocket science”.
In this article, we will do a tour around October CMS: We will first see how to install it, then check some of its coding and usability features in a bit more detail, and finally get our hands dirty implementing an e-commerce website through one of its most popular plugins, Shopaholic.
Recommended YouTube Channel
Are you looking to learn more about e-commerce development? You can do so with the help of live streams that explain the main aspects of the development process based on the Shopaholic platform for October CMS. Watch →
Installing October CMS
Since October CMS runs on PHP, it requires to have a web server running on the computer (if we don’t have one yet, MAMP can provide one for free, allowing to choose between Apache and Nginx, and it works for both Windows and macOS) and a MySQL server to store the database (which can also be provided by MAMP).
The installation through October’s wizard doesn’t take more than a few minutes: We create a new MySQL database, download and unpack the installer files to our target directory for the website (which must be granted writing permission, and which must be set as document root in the web server for the chosen domain, such as localhost), and then invoke the script file from the web browser. From that moment on the wizard takes over, guiding us through the installation process. The wizard will:
Validate if the web server satisfies all the requirements (at least PHP 7.0, and others): System check (Large preview)
Ask for database and site configuration values, and user credentials: Configuration (Large preview)
Ask how to set-up the site: From scratch, already installing a specific theme, or using our own existing project (from which our chosen theme and plugins can be automatically installed): Initial setup (Large preview)
Next, we click on “Install!”, and in a few seconds (depending on our Internet connection speed) the website will be installed and ready to use: Site installed (Large preview)
In this case, I chose to install it from scratch, under http://localhost. Browsing to this URL on the browser, we can encounter the October starter demo theme: Browsing the starter demo theme (Large preview)
Navigating to http://localhost/backend (unless we changed this URL during the installation process) we can log into the administration panel: Browsing the admin panel (Large preview)
Finally, we delete the installer files from the folder. And voilà , in just a few minutes we have a fully functioning site (well, we still need to enhance it with plugins… we will do that in a while).
This method is faster (it can take as little as 10 seconds to install) because it doesn’t require to input the database configuration. Hence, it is particularly useful for setting-up October CMS as a flat-file system, i.e. a CMS fully set-up through files stored in the local disk, and without a database.
Installing October CMS through the CLI takes no time. (Large preview)
Templating System
October CMS has a robust templating system to implement layouts, re-use chunks of code and enable dynamic functionality. Its most important elements are the following ones:
Pages are the most basic structure for storing content. These are readily available, since they are shipped as part of the core (blog posts, on the other hand, must be installed through a plugin). Pages are based on Twig, which is a modern template engine for PHP (devised by the creators of Symfony), and compiled to plain optimized PHP code, so they execute very fast.
Partials contain reusable chunks of code that can be used all throughout the website, as to avoid duplicating code on the different pages or layouts. They are particularly useful for navigation menus, testimonials, calls to action, and other common elements.
Layouts define the scaffolding, or structure, of the page. They define the <html> and <body> HTML elements, and are useful for creating the frame of the site, including the header, footer and sidebars. The actual content in the body is injected by the page.
Components are the mechanism to extend functionality in October CMS. Any page, partial or layout can have attached any number of components, which are most commonly provided through plugins, and which are fully configurable. In addition to rendering HTML code on the page, components can also provide services, such as form validation, security check-up, control of user permissions, or others.
Configuring a component attached to a page. (Large preview)
These elements are all implemented through files living in the website’s folder in the local hard drive. As such, it is possible to edit them not only through October CMS’ built-in editor, but also from the developer’s preferred text editor (Sublime, VS Code, PHPStorm, etc).
We can edit elements either through the October CMS’ built-in editor or in an external text editor. (Large preview)
Similarly, the October CMS project can be perfectly managed through any version control system, and it can be easily adapted to any existing workflows. For instance, a project can be set-up through continuous integration, deploying it automatically to the server after new code is pushed to the Git repo.
October can be easily managed with Git. (Large preview)
October CMS Marketplace
October CMS has a marketplace for themes (which allow to change the site’s look and feel) and plugins (which allow to extend the site’s functionalities), providing both free and paid offerings. By providing themes which can be used to quickly establish and then configure the design of the site, and plugins each of which implements some required functionality for the site, the marketplace ultimately leads to lower costs for creating our projects and reduced time to launch them.
The marketplace has been getting bigger! Following October’s growing popularity, its marketplace has received a constant stream of new offerings: It currently boasts 915 plugins, comprising most of the functionalities required for our websites (blogging, SEO, e-commerce, analytics, email, galleries, maps, security, social, user management, and others), and 150+ themes. Both themes and plugins can be submitted to the marketplace by any independent 3rd party developer, company or agency, and they must adhere to quality guidelines, which ensures that they are performant and secure.
Creating An E-Commerce Site Through Shopaholic
Let’s get our hands dirty and implement a real-life use case: An e-commerce website! For this, we will install Shopaholic, the most popular plugin to add e-commerce functionality to October CMS, and the free theme Bootstrap theme for Shopaholic to quickly bootstrap the site (which will be made to look like this demo site). Shopaholic is ideal for our needs because it provides a comprehensive e-commerce solution, which includes an ecosystem of extensions (both free and paid ones) to further enhance it. In addition, we can install the core experience for free and only make a one-time payment for the extensions that we need, which will be cheaper than using cloud solutions which have a recurring fee to use. And finally, because we are the full owners of our own on-premise e-commerce website, we can customize it as much as we need to and we own all the data, which is not possible with cloud solutions.
Because of the October marketplace dependency management system, we need only install the theme (the Shopaholic plugin is added as a dependency). Let’s proceed to install the theme then: Inside the October CMS admin, we click in the “Front-end theme” section in the Settings, and then click on “Find more themes”:
Then, we search for theme “Bootstrap theme for Shopaholic” and, upon clicking on the result in the dropdown, it will install the theme and all its dependencies. Once installed, we go back to the Front-end theme manager page and click on the Activate button on the new theme:
After installing the theme and plugins, we will notice a new element “Catalog” on the top menu bar. Clicking on it, we can manage the items in our e-commerce catalog, namely products, categories and brands (these are the core elements; other elements, such as coupons, can be added through extensions). Initially, our catalog will be empty:
Catalog comprising products, categories and brands. (Large preview)
Let’s fill it up with some data. We can either create the items one by one or, quite conveniently, import data through CSV and XML files (which allows us to manage a large set of records with Excel or other tools). In our case, since we are creating a demo site for testing purposes, let’s install plugin Fake Data for Shopaholic which provides large sets of mock data and an easy way to import these records to the system. To do this, follow these steps:
Head to Settings => Updates & Plugins in October CMS backend, and install plugin “Fake Data for Shopaholic”.
Head to Dashboard, and click on Manage widgets and then Add widget.
Select widget “Fake data for Shopaholic”, and click on Add.
In the newly added widget, clicking on Generate under section “Generate fake data ” will run the process to import the fake data.
The last step will ask how many times should the insertion be repeated (as to create bulk and be able to test the performance of the site when loading many records) and which data set (clothes or sneakers):
Generating fake data through Laravel’s artisan command. (Large preview)
After running this process, our catalog will look better stocked:
The next step is to create some promotions. To do this, we click on Promotions on the top menu, then on the Create button, and fill the required information. Once each promotion is created, we must edit it again to add products to it. After creating a few of them, our promotion list will look like this:
Now that we have some data, we can finish customizing how our front page will look like. For that, we go to section Settings => Front-end theme => Customize and we complete the information for all tabs (Header, Footer, Social, Main slider, Index page). Once this is ready, our e-commerce site will now be ready:
Auditing The Speed And Reliability Of The E-Commerce Solution
Because we want to sell our products, speed and a good SEO are mandatory, so let’s make an audit using Google Chrome’s Lighthouse on the product page to make sure it runs fast and that it will score high with search engines. Running the audit against the live demo site, it returns the following report:
Lighthouse report of the product page. (Large preview)
Equally important is that the site can withstand heavy load, so that if our product becomes successful and attracts plenty of traffic the server doesn’t crash. For this, we can use the Load Impact tool to run a load test. Running the test using 50 virtual users for 12 minutes against the live demo site (which is hosted on DigitalOcean with a droplet configuration of Standard 2CPU/4 GB RAM) produced the following results:
LoadImpact report of a test load using 50 virtual users during 12 minutes. (Large preview)
As can be seen, the website was able to sustain an acceptable response time throughout the load test, giving us the confidence that we can trust the e-commerce plugin when we need it the most: When it’s time to sell the product.
Finally, we can also feel confident of the reliability of the software, since it is covered by unit tests.
Adding Extensions To Shopaholic
So far so good. However, as it can be seen on the screenshots from our website, there is still no way for the visitor to buy a product. Let’s add this functionality by installing the following free extensions for Shopaholic: Orders, to allow to add products to a cart and make orders, and Omnipay, to process the payment. (For the other Shopaholic extensions, if they are not free and authored by LOVATA, you can use coupon “WELCOME” to get a 50% discount the first time you buy them.) To install these extensions, we head to Settings => Updates & Plugins, search for the plugin names, and click on the results to have them installed.
Searching for ‘Shopaholic’ displays its plugins. (Large preview)
Once installed, we will see a new item Orders in the top navigation, where all orders will be stored, and items Payment methods and Shipping types in the Settings page, to configure the payment gateways (card, cash, etc) and how to deliver the product (by post, etc). We configure these and load again the product page. Now it shows an “Add to cart” button, allowing the user to place an order:
Once the user submits the order, the inventory will be automatically taken care of, updating the number of items for each product in stock, and we will receive an email informing us of the new order (if configured to do so). In section Orders on the admin panel, we can find all the information for the order (products sold, buyer information, method of payment and total, and others), and we can complete the transaction.
All the information from the order is here. (Large preview)
The basic work is done: In barely a few hours we managed to have a fully functional e-commerce sith with October CMS and Shopaholic.
Creating Our Own Extension
If none of the several extensions to Shopaholic on the October marketplace provides the functionality needed, we can also create our own extensions.
To do this, if you are comfortable with Object-Oriented Programming and PHP and, more specifically, with Laravel, then you are ready to do it. The documentation explains how to add an extension, step by step. For instance, following this tutorial, with barely a few lines of code we can add a custom field “rating” to our products:
Adding a custom field to the product. (Large preview)
We can then retrieve the new “rating” field from the product and display it in the product template:
Displaying a custom field in the product page. (Large preview)
Extending Shopaholic is not difficult and enables us to fully implement our own e-commerce requirements, and personalize the site to suit our brand.
Conclusion
October CMS is a great candidate for building powerful sites in a very simple manner (showing that “web development is not rocket science”). It delivers the great developer experience granted by Laravel, and its marketplace (which is growing daily) provides a large number of ready-to-use themes and plugins, allowing us to build websites very quickly. One such plugin is Shopaholic, which converts the site into a full-fledged e-commerce platform.
Because of these reasons, building a site with October can be very cost-effective. As a result, it has gained some reputation (by winning the popular vote as best flat-file CMS from 2018) and has increasingly become a tool of choice for businesses and digital agencies crafting sites for their clients.
To find out more from the October community, be welcome to join the October CMS Slack workspace, which is where the creators of themes and plugins published in the marketplace hang out, so you can conveniently chat with them to get their help and advice.
Trine Falbe is a human-centered UX strategist, designer and teacher who works in the intersection between people and business. Trine is deeply passionate about ethical design and designing for children, and she is also a keynote speaker at conferences and a UX advisor in strategic projects.
As a serial entrepreneur since the very first browser, Martin Michael Frederiksen was born with a practical appreciation for the crossroads between business and digital development. He has published the books Cross Channel and the CEO’s Guide to IT Projects That Cannot Fail. He works as an independent consultant for businesses that need a devil’s advocate when trying out new strategies and ideas.
After training at an international advertising agency, Kim Andersen quickly left print media for digital design. Owing to his amazing memory he always leaves design meetings with an empty notebook, only to attend the following meeting armed with drawings where nothing has been forgotten and everything is drawn in great detail. He owns the digital design studio Onkel Kim, and he prefers difficult and complex design tasks where the brain is working overtime.
“This is the book designers have all been missing: A practical reference book on how to work ethically in design. Starting with the why - what does “Ethical Design” mean, and why is this book even necessary or important, the book easily morphs into the business value of ethical design, best practices in ethical design, and how you can influence positive change.”
“It’s easy to feel like we’ve lost the web we used to love. The Ethical Design Handbook is an essential guide to reclaiming it. Packed with practical resources and guidance for designers, developers, and project managers, it will help you to integrate a higher standard of professionalism into your work on the web. Refreshingly, this book contains no inspirational waffle, public shaming, or lectures on morality. What it does contain is proven techniques, standards, and strategies for getting the job done while protecting your users.
“I’ve just finished reading The Ethical Design Handbook and am both brimming with new ideas and am more hopeful about the future. The authors bring new tools to the table, and also do a good job of reminding designers how many of our current tools already help us contribute to positive impact. The trick is that we have to make sure to actually put in the effort, and have some cake to keep us going.”
“The Ethical Design Handbook is exactly what its title implies: a gentle, persuasive, perspective-giving guide to how you can become a better designer without selling your soul.”
“The Ethical Design Handbook should probably be compulsory reading for all tech workers.”
(ra, yk, il)