Introduction
It has been two years since The Readable was launched, and two months since its new site was redesigned. Specializing in cybersecurity journalism, The Readable is powered by a small, highly skilled team rather than a large workforce. Reducing operational costs and streamlining the process of creating and distributing content are ongoing challenges for The Readable. This recent redesign posed the challenge of effectively revamping the website within these constraints. This article aims to outline the process of The Readable’s redesign, offering insights and considerations for those interested in developing a specialized cybersecurity news platform.
Previous situation
The Readable’s initial site was developed swiftly using Ghost CMS (Content Management System). As a platform, Ghost CMS enabled The Readable’s web designers to create a highly functional site quickly and easily. Crucially, it fulfilled the publication’s primary goal of minimizing technical issues in the writing and publishing process while offering maximum flexibility. However, despite these advantages, something was still lacking.
As time progressed and the site expanded, new challenges arose. We aimed to broaden the reach of our high-quality articles to a wider audience. Additionally, as the site’s purpose and direction became clearer, design issues surfaced. The existing structure struggled to accommodate the increased range of services and features, highlighting scalability limitations.
Eventually, it became clear that we needed to accelerate our growth. To achieve our ambitious goals, we began preparing for the redesign of the Readable site by the end of 2023.
Improvement Goals
Our initial improvement goals included:
- Establishing a more structured newsroom system: Enhancing the organization and efficiency beyond basic functions.
- Adding commerce support features: Introducing functionality to offer a variety of products and enhance reader services.
- Improving SEO (Search Engine Optimization): Enhancing visibility on search engines to increase content discoverability.
- Enhancing community-related features: Strengthening community functions to foster reader engagement and communication.
- Improving design and UI (User Interface) for a more intuitive and visually appealing interface.
- Providing diverse methods for news publishing: Making content accessible through various formats and platforms.
Design
As the purpose and direction of the site evolved, so did the need to update its design. Our initial priority was to uphold the concept of an easy-to-read medium. We selected established fonts known for their readability, paying close attention to font size and spacing. Initially, we implemented Roboto after the redesign and continue to explore other font options as part of our ongoing redesign efforts.
Efforts were also necessary to continuously optimize the site for SEO, data analysis, and various other tasks. While managing everything internally seemed feasible initially, considering the time required for service operation and development, it proved impractical in the long run.
To enhance the reading experience across different devices, we structured the site using EM (element) and REM (root element) units instead of traditional pixels and points. These units offer flexibility in adjusting font sizes and layouts based on user environments, thereby greatly improving readability.
To define the site’s identity, we opted for the Roboto Slab font as our display typeface. Slab fonts are distinguished by their thick serifs, which combine a traditional feel with a modern aesthetic. We chose slab fonts because they preserve the traditional essence of a news outlet while presenting a contemporary design. Roboto Slab was selected for its compatibility with Roboto and its excellent readability on mobile devices.
After establishing our site’s character with font changes, updating the logo became essential. With the complete site redesign, we had to part ways with our previous logo. Despite our attachment to it, aligning with the new design direction was necessary. We preserved the logo’s basic wordmark form, incorporating elements that evoke a sense of speed through italics, and transitioned to using the Roboto-Slab font.
By adding an underscore after “Readable,” our aim was to create a dynamic design that suggests ongoing content creation and a forward-looking vision.
Our objective was to present articles with different priorities using multiple columns. Acknowledging that the value of articles varies depending on the user and timing, we displayed diverse lists on a single page effectively. Although the layout is now finalized, our next steps involve optimizing each list to prominently feature the most valuable articles for users.
Development Direction
Initially, our goal was to minimize reliance on excessive code. In scenarios where establishing a dedicated development team or ensuring stable development is challenging, excessive code can accumulate as technical debt. During the early stages of redesign, this technical debt could potentially hinder future updates. Therefore, it was crucial to define a manageable scope based on our current capabilities and set development boundaries within that technical framework.
We aimed to empower non-developers to participate in site editing and maintenance in the future. Therefore, minimizing direct code usage and encapsulating it when necessary to prevent direct handling were essential. Additionally, we needed a structure that facilitated the easy addition of new features. Recognizing that many media outlets rely on WordPress for its extensive plugin ecosystem catering to various functions, we chose a WordPress-based platform. This decision also aligned with our goal of reducing reliance on extensive custom code.
We needed to establish a newsroom system for journalists and editors, along with other essential systems for a professional media outlet. Developing these systems from scratch would have been time-prohibitive, leading us to choose WordPress instead. Additionally, to integrate universal design principles, we employed units such as REM and EM as intended by the design. Our aim was to provide tailored experiences on mobile and tablet devices by adjusting the design accordingly.
Development Process
Handling planning, design, and development alone posed a significant challenge. Balancing these roles simultaneously made it difficult to maintain focus and increased the cost of switching between tasks. However, we were able to progress faster than our targeted timeline with a divided labor approach. This method resulted in lower communication costs, and The Readable team fully supported our development efforts. Moreover, our initial approach, aimed at minimizing workload, proved beneficial.
First, I summarized the goals and content in a physical notebook, then organized them into units using a note-taking application. Before delving into detailed development, I created low-fidelity prototypes through hand sketches. If these prototypes met expectations, I progressed to developing high-fidelity versions using tools like Figma. Upon confirming there were no issues, I proceeded with the development phase.
Experimentation across various displays was essential, and I addressed any specific issues that arose with each display. Consequently, there were occasions when I needed to adjust EM and REM units similar to how adjustments are made with PX and PT units. Due to time constraints limiting extensive redesign, my primary focus was on initial implementation.
We constructed the service by integrating various plugins from WordPress and Elementor. This approach facilitated internal article management and yielded benefits in SEO and site optimization. While we achieved many of our initial goals in development direction and design, there are also areas where we have some regrets.
No-code development proved to be more challenging than anticipated. For complex tasks, no-code editors often encountered errors and slowed down. In these instances, we had to resort to writing some code directly, which turned out to be more difficult than using code from the outset would have been.
Furthermore, unsupported features necessitated manual coding, and integrating code into a complex structure was challenging. While most plugins were beneficial, certain features required custom development. We faced difficulties in integrating plugins using PHP and managing the database directly, which resulted in delays and made it challenging to estimate development timelines.
Unexpected issues emerged during plugin updates, which posed challenges for a live service, unlike hobby or simpler sites. While cache plugins were beneficial, managing the heaviness of WordPress became significant. For lighter sites, no-code tools such as Notion or the Ghost CMS might present better alternatives.
Handling planning, design, development, and management alone led to challenges in time management and oversight of critical aspects. As the project neared completion, pressure mounted, and while the outcome isn’t entirely perfect, we are satisfied with its launch. The initially systematized design underwent multiple revisions towards the end, and certain elements had to be abandoned due to limitations with plugins or the editor. Ultimately, we had to work within the constraints imposed by the CMS, editor, and plugins. Despite these challenges, essential components were implemented through custom coding, allowing us to make necessary adjustments swiftly.
Data and SEO
Currently, our focus is on managing metrics such as search engine impressions and various forms of influence, rather than daily active users (DAU). However, expanding our subscriber base remains a top priority. We deeply appreciate our newsletter subscribers, who consistently engage with and provide feedback on our content, which is reflected in our metrics.
Currently, we are harnessing the benefits of our new platform and plugins to conduct proactive SEO (Search Engine Optimization), achieving improved results across various search engines. However, SEO is a long-term endeavor, and fundamentally, most active sites engage in it. It’s crucial to differentiate SEO from marketing and avoid over-optimization that could be seen as manipulative. Our goal is to disseminate high-quality content to those seeking it.
A significant portion of our traffic originates from social amplification, especially when industry experts or influencers reference our content. However, we recognize that this type of traffic is not always sustainable. Our primary focus remains on consistently producing high-quality content and maintaining a robust platform to deliver it. While traffic is important, it is not our primary objective. In niche areas such as cybersecurity, generating large volumes of traffic can be challenging. Therefore, our business model and direction are not solely focused on traffic volume.
Future Plans
1. Data
The trends in cybersecurity-related keywords are evolving rapidly, necessitating agility in the activities of journalists and staff. Tools to support this ongoing need are essential, prompting our plan to develop a dashboard for facilitation. Presently, we are gathering data and analyzing cybersecurity-related keywords, links, and metadata from news and various media sources. We are currently configuring and testing ETL (Extract, Transform, Load) processes for this purpose. While being developed as a professional tool using code, it will also integrate with BI (Business Intelligence) tools like Looker Studio for the user interface.
In the long term, our goal is for the insights from the dashboard to evolve into a standalone service within The Readable, delivering added value to a broader audience of readers.
2. Community
While WordPress provides basic functionality for community membership and usage, we are exploring a community setup that prioritizes anonymity and security without compromising personal data. Although addressing this issue in the short term is challenging, we recognize its long-term importance and are actively seeking a solution.
3. Design
As aspects like font changes and other experiments remain incomplete, ongoing adjustments are essential, and the site’s design evolution will persist indefinitely. The current unstructured design will be gradually replaced, and we are contemplating developing a separate frontend using a headless architecture connected via API to enhance site speed. If resources permit, initiating this type of development from the outset would be a strategic decision.
Final Thoughts
For small-scale sites, making quick decisions on what can and cannot be implemented is crucial, with the focus being on operational management post-creation rather than the creation process itself. Presently, The Readable is dedicated to maintaining low operational costs while ensuring efficient content delivery.
Building and operating a site often requires more resources than initially anticipated. Promises made by most services, platforms, and plugins should be approached with caution. Even with development that doesn’t directly handle the framework, various considerations and expertise are always necessary.
There is still much to do, including enhancing the data platform, updating the front-end, and implementing commerce features. Some parts still rely on the default UI of plugins. Surprisingly, there are numerous backend issues to address, as well as tasks related to managing copyrights of documents and illustrations that may not be immediately apparent.
However, resolving these issues may not always require substantial resources. By accurately listing the tasks that need attention, we can approach solutions efficiently. The key lies not just in knowing how to tackle them, but also in having the determination and commitment to see them through.
