Written Sunday 15th of December 2024
Project contact: Johan Ronsse [email protected]
My goal is to launch a new Obra Studio website in January (latest launch date: January 20th)
I am looking for a freelance web developer or small agency to work closely together and launch the new website.
I am a designer myself and will supply a Figma-based design of the website.
You would be invited to an Obra-owned Github repository to work together on the website. Technology TBD (see below).
Please write me an intro mail, linking to your own personal website or agency website.
In this e-mail, please link to at least 2 live websites that you or your team have developed.
Timezone requirements to work together: GMT +2 to GMT -8.
- Performant: the website needs to be blazingly fast, work in light and dark mode. I am aiming for a > 500ms load time or less for every page.
- Accessible: the website needs to be entirely accessible and accord to WCAG guidelines
- Responsive: The website needs to be fully responsive and work on all devices. Any interactive elements such as sliders need to be optimized for their respective platforms.
- Branded: it's important to use the Obra brand, meaning the Obra Studio logo and the Atlas Grotesk fonts
- Subtly animated: the site should have subtle animations. When visiting the website, a visitor should perceive quality and simplicity
- Complete: the website should have a favicon that changes for both dark and light mode, Apple touch icon, Android theme manifest, social covers
- Editable: Ability to create new pages at will without having to touch code. Ability to edit content by non-coders. Multiple editors
- Analytics: The website needs to have analytics behind it in which it's easy to see top blog posts and top referrers (who linked to which blog post)
- Home
- Contains general info about the company, links to services
- Blog
- Contains a list of blog posts, with the newest posts first
- Option for a “Continue reading...” (excerpt) type of functionality
- Has a full RSS feed
- About
- Contains information about the company, mostly static
- Work
- Contains case studies (see: Case studies below)
- Contact
- Contains an e-mail address to contact us
- Privacy and disclaimer
- Contains a text with cookie information, accessibility statement
- Footer contains a link to social networks: Instagram and X
I write a lot of blog posts, it's helpful to have a CMS with a draft feature and publishing logic.
- Date-based URL system with URL permanence
- Categories for blog posts, where you can view other posts within that category
- Possibility for a custom call to action (from a set of pre-determined call to actions). Underneath every blog post.
- Automatic social cover should be generated for sharing on social networks with a more interesting visual.
I love the Wordpress editor but would consider other CMSes. Currently I am leaning towards either using Wordpress directly with a caching plugin or SvelteKit with the Wordpress API. My fear with option 2 is that there would be a lot of basic functionality of a Wordpress theme that would have to be re-done.
I have a shared hosting account on Opalstack (for a PHP type stack) and also work with Cloudflare for some projects.
The “Work” section containing case studies is one of the most important parts of the website, and the one clients will use to evaluate our work.
Case studies have a combination of images and text and need to be easily manageable through a “block” type system.
There needs to be a modern logic to optimize the images used. Ideally blog post images are automatically optimized and case images have a combination of manual optimization and automatic optimization to get to the best results.
There needs to be a listing page for all case studies and a next/previous navigation within the case studies.
Within the case studies “blocks”, there should be the option to have several types of media blocks to add project images.
In the past I have used ACF for Wordpress, it worked fairly well. Case could be composed of different blocks: client quote, rich content, slideshow, wide image...