From the very first week, we concentrated on the development and deployment of our website and blog. By leveraging modern web technologies and performance-driven methodologies, we built a platform that not only effectively communicates our value proposition but also upholds exceptional technical standards.
Landing Page Development
The landing page was designed with a strong focus on information architecture and user engagement psychology. Our primary goal is to introduce visitors to our project's concept, encourage them to connect with us, and follow our journey through the blog. The page serves as a gateway to raise awareness and build a community around our mission.
To enhance its effectiveness, we implemented the following technical elements:
- CTA (Call-to-Action): Our CTA button, "Discover Our Project", is strategically positioned on the right side of the home page for optimal visibility. Directly below, the message "Join us in revolutionizing emergency care" reinforces our mission, creating a compelling invitation for engagement.
- Clear objective: Applying the "one page, one goal" principle, we ensure a seamless user experience by eliminating distractions and structuring the content to guide visitors toward learning about our project and connecting with us.
-
Optimized layout: The design follows a responsive grid
system utilizing Tailwind CSS breakpoints
(
sm (640px),md (768px),lg (1024px),xl (1280px),2xl (1536px)), ensuring smooth adaptability across all devices.
Blog Development
A well-structured blog is essential for sharing news, insights, and updates. For the DEMS project, we developed a blog focused on usability, modern design, and an enhanced user experience.
To make it easier to find relevant content, we implemented a category filter system, including Research, Development, Healthcare, Software, and Hardware. Each category displays a post counter, and a "Clear Filters" button allows users to reset their selections quickly.
How We Calculate Reading Time
The reading time of a text is usually estimated based on the number of words it contains. An average reader reads about 170 words per minute.
To calculate the reading time, we follow a simple process:
- We count all the words in the text, ignoring elements like code, scripts, and styles.
- We divide that total by the average words read per minute (170 words/min).
- We round up the value to ensure a comfortable reading estimate.
If a short paragraph contains 85 words, the estimated reading time will be 1 minute. An article with 340 words will have an estimated reading time of about 2 minutes.
This calculation helps readers manage their time better and decide which content to consume quickly.
Design Development and Adaptation
The process began with the creation of a high-fidelity mockup in Figma, which allowed us to visualize the site's structure and visual identity before development. This approach also enabled us to establish a documented design system, ensuring consistency across future iterations of the project. The initial version of the mockup was later refined through usability testing, resulting in a redesign that optimized information architecture and improved key metrics, such as time to first meaningful action (TTFB).
Domain Registration and Hosting
To establish a professional online presence that aligns with the project's identity, we registered the domain dems.pt through the registrar amen.pt. We configured the necessary DNS records (A, CNAME, MX) to optimize content delivery and prepare for future transactional email implementations, including contact@dems.pt. For hosting, we utilized GitHub Pages, taking advantage of its serverless architecture and continuous integration via GitHub Actions. This setup ensures code integrity through automated testing, while significantly reducing the time between development and deployment.
The complete source code for our website and blog is available in our public repository: https://github.com/gustavozacarias04/sitepic . We encourage collaboration, feedback, and contributions from the community.
Technologies Used
The technology stack was carefully selected to meet performance, accessibility, and long-term maintainability goals. Each of the following technologies plays a specific role in the application ecosystem:
-
HTML5: We utilized semantic elements such as
<article>,<section>,<nav>, and<figure>to enhance accessibility and improve SEO. - Tailwind CSS: A utility-first framework enabled rapid and consistent development through atomic classes. By implementing CSS purging, we reduced the final bundle size by approximately 85%, resulting in a significantly smaller CSS file. Custom CSS variables were integrated with Tailwind to maintain visual consistency across the design system.
-
JavaScript: We employed modern development practices,
such as using
async/awaitfor handling asynchronous operations and DOM manipulation viaquerySelectorandeventListeners. To optimize performance, we implemented lazy loading for images and used theIntersectionObserverfor scroll-based animations. Additionally, the code was minified to ensure smooth cross-browser compatibility.
Website Performance
To ensure optimal performance, we conducted thorough analyses using Lighthouse across various devices (mobile and desktop) and browsers (Chrome, Firefox, Safari, Edge). This testing confirmed that the website maintains consistent accessibility and responsiveness across platforms. The results in key performance metrics are as follows:
- Performance: 93
- Accessibility: 96
- Best Practices: 100
- SEO: 100
Additionally, Core Web Vitals were optimized with remarkable results:
- CLS (Cumulative Layout Shift): 0
- Largest Contentful Paint (LCP): 1.0s
- Total Blocking Time: 40ms
These results significantly surpass the benchmarks set by Google, ensuring a fast and smooth user experience.
