Our blog

Page 1 of 2

  • Modular Architecture for Building Content Websites

    Souvik Das Gupta
    Dot All 2018
    Location & Date
    ·Berlin, Germany

    Back in 2014 we were looking for a Content Management System (CMS) that could fit our concept of a website constructed from a collection of atomic pieces of content. Our search led us to Craft CMS – it was still a fairly new CMS back then but it looked promising. We initially adopted Craft for a project where the website was moved from WordPress. In the next project the move was from Drupal. Both implementations were a learning experience but the outcomes reinforced that we made a good choice. The latter has now grown to be our largest Craft implementation.

    Craft CMS makes no assumption about the content. It frees our thinking from the shackles of the WordPress content model (Posts and Pages) while at the same time does not weigh us down under Drupal-like technical baggage. Being able to model content from scratch (almost treating the content model as data) and not being held back by any starter theme helps unlock creative freedom. As a result, we can hand-craft a website’s information architecture, user interface and user experience without the CMS acting a hurdle (or barrier).

    Our relationship with Craft strengthened over time and 3 years since our discovery, in 2017, I found myself attending two conferences in the US: Peers (Craft CMS was a sponsor) and Dot All – the first official Craft CMS conference. Little did I know that the very next year I’d be taking the stage at the Craft CMS conference.

    Any system that offers high flexibility, in turn, demands a disciplined approach – and that applies to Craft as well. With each passing project executed in Craft, we inched towards a disciplined approach for content modelling and developed a modular templating architecture that can be used in a large number of use cases, especially sites that contain a lot of information. I presented this architecture at Dot All 2018, in Berlin.

    The talk walks through how our imagination of a website has evolved over the years and goes on to outline our current approach and utilises these fundamental principles—

    • modelling content and giving them a structure (objects)
    • separating content (objects) from presentation (views)
    • defining presentations (views) based on a clear purpose
    • ensuring presentations (views) are evolvable in order to serve a different (or greater) purpose

    I further go on to explain the implementation that uses a Routers-Views-Components-Layouts paradigm. It’s amazing how we’ve been able to simplify large and complex websites using this approach – making our work more flexible, scalable and maintainable.

    Here’s a video of the full talk —

    Architecting a Content Website with Souvik Das Gupta from Craft CMS on Vimeo.

    It’s always great to meet the Pixel and Tonic team, and the Craft CMS community who we mostly know through Slack Discord. I got great feedback on the talk, and based on Andrews recommendation went on to convert Craft’s Happy Lager demo site into our templating approach. It’s called Happier Lager and should be a good resource to observe the contrast.

    Photographs courtesy Dot All.

    It was my first time in Berlin (and Germany) and after the conference, I took some time out to visit a few other cities, which included Munich and the popular Oktoberfest 🍺.

    If you use Craft and have any feedback or questions, email hidden; JavaScript is required. I’d also be keen to hear from you if you’re tackling similar challenges and the techniques you’ve adopted.

  • On 2017

    Souvik Das Gupta

    For the first six years of Miranj, Prateek and I were responsible for every activity under the sun. Whether it was designing and writing code, or responding to opportunities, or basic housekeeping (and everything in between) — the responsibility was always shared. The lack of separation of concern, and in turn a lack of ownership, meant that some aspects received disproportionately less attention than others. A business runs smoothly when things are fixed before they break, and this is as true for our core craft as it is for other facets such as generating opportunities, or general housekeeping.

    2016 was a tough year overall. And it provoked some profound changes. In no other year have we evolved and achieved as much as in the year that just went by. This is the first time I felt like writing a year in review.

    Segregated Responsibilities

    We took cues from the year before, and made a bold move. Prateek and I split our responsibilities and took charge of different aspects of work. We both have different priorities now, which means fewer hurdles, more encouragement, and more motivation. As a result our progress last year has been more well-rounded than in any preceding year — be it clarity in objectives, leaner processes, generating new opportunities, better collaborations, and most of all, our work.

    With a Clear Purpose

    We had laid down our purpose back in 2016. Last year we had the opportunity to invest time and mind-space in reflecting on our values, strengths, and strategies, and to audit our performance. This self-analysis drove us to align our mindset and tactics to move closer to our purpose. We’ve made subtle changes in our conduct. To take an example, we’ve identified longevity as a core value in our work. We now consciously look ahead, well into the future, and take considered decisions at each step of planning and executing a project. We’re exploring questions like how long should a website last and even evaluate our client’s commitment towards this value. For a while we’d been posing four simple questions to understand new enquiries, but recently we’ve added a fifth question that seeks to understand the potential life-span of the website that we’re being asked to work on.

    Project Workshops

    We’ve started investing more in understanding a project, guiding clients and aligning expectations. For any typical project we now conduct a week-long project discovery workshop with our clients. We follow a methodical approach towards understanding the audience, content, and goals of the project, along with recognising the client’s taste in aesthetics. Further, we facilitate prioritisation, recommend a strategy, brainstorm a solution and mutually agree on the scope, and a plan of work.

    This week-long intensive exercise has given tremendous clarity to our clients, helped us speed up alignment, and discover problems that are often overlooked by initial project briefs. It also serves as an opportunity to guide them — from design and technology to feedback and project management.

    Raising the Quality of Work

    We usually cringe when we look at our past work. But that’s also something that makes us proud. There’s probably no better evidence to indicate that we’re improving all the time. This year we’ve made some measurable improvements in our work. Our projects are faster, more secure, and implement better technical SEO. Some noteworthy changes that we’ve introduced are:

    • hosting on VPS (such as Digital Ocean or Linode)
    • ditching Apache and opting for an Nginx-only architecture
    • deploying CloudFlare CDN to serve static assets
    • inlining critical CSS
    • micro-caching dynamic content using FastCGI Cache
    • automating image optimisation
    • serving all websites over HTTPs (including our own!), and
    • delivering the most up to date technical SEO — from checking off all social media meta-tags to JSON-LD Struc­tured Data, using SEOmatic.

    These qualitative improvements are now our minimum deliverable” for every project we tackle.

    Support Offerings

    We finally got around to formalising our support offering. This includes essential housekeeping like monitoring server health, fixing issues, regular backups and timely updates (and renewals). Further, we now offer retainers which embrace the fact that websites are a living thing. We can help sites evolve over time and not let our client’s ideas (or needs) remain parked indefinitely.

    New Geographies and Communities

    We met more people from different parts of the globe than ever before. Our year started with a Singapore-based project, followed by attending Peers Conference in Seattle, and concluded with Dot All in Portland (the first Craft CMS conference). It’s been great to interact with these communities and learn from peers. It also helped us evaluate our own standing against the international web community in terms of skills, processes and quality of output.

    Projects of Note

    A year in review cannot be complete without touching upon some of the work we shipped. Here are three notable ones —

    • Buuuk — Powerful page builder website for a bespoke mobile app design and development studio based in Singapore.
    • Design Fabric — Lightning fast experience for a new publication on the art & design culture in India.
    • Tiffinbox — #May1Reboot for a communication and illustration studio in New Delhi.

    Our work page has more details on all three projects — Buuuk, Design Fabric and Tiffinbox. We can’t wait to announce some other projects that are yet to be launched publicly.

    We’re super excited about 2018!

    There are some interesting (and challenging) projects in the pipeline that will go live in the coming weeks and months. We’re gearing up to celebrate World IA Day 2018 next month. And we’re looking for an experienced web developer to join our team. We’ve laid out the offer very thoughtfully, and have meticulously put together a few rounds of evaluation to establish a good match. We’d really appreciate your help in recommending a suitable web developer to us. If the endorsed candidate is successfully hired we’ll be happy to share a referral fee of ₹10,000/- for your gesture.

    If you’re facing any challenge in information architecture or content management, want to learn about our project workshops, would like us to speak at an event, or simply want to grab a coffee, email hidden; JavaScript is required.

    Happy New Year!

  • Responsive Web Design

    Prateek Rungta

    We often like to look back at points which caused paradigm shifts in our practise. The introduction of responsive design by Ethan Marcotte was one of the big ones.

    We’d long known that the web was about embracing flexibility and about a dynamic, infinite canvas rather than fixed paper sizes. There were a fair share of designers practising this too by designing fluid, scalable websites. To the mainstream however, embracing flexibility meant little beyond supporting a few different browsers and two different screen resolutions.

    That was then. It’d been three years since the iPhone’s release. Tablets had made their debut, but smartphones were about to reach critical mass. Diversity in the shape, size and form factor of devices accessing the web was now a ripe reality. And Ethan struck on hot metal with the idea to design for an optimal viewing experience” by querying for and adapting to the user’s environment.

    While responsive design might’ve initially arrived as a primer on using media queries, it feels more like a philosophy than a specific technique. The philosophy being, to recognise and build for web design’s known unknowns, to secede certain control to the user, meet them in their environment of choice rather than dictate one particular context on to them via your design choices.

    The responsive web design philosophy fits so well with the principles of the web that it is now as ingrained in our processes as using CSS instead of <table>s for layout.

  • How long should your website last?

    Souvik Das Gupta

    If you’re getting a new site made, or getting one revamped, go read How Long Should Your Website Last” by Mike Swartz. Few are clear in their heads if their website is an investment or an expense. This article does a great job at setting the right direction.

    Your website has got three core layers: content storage, content management interface, and forward-facing user experience.

    The forward facing experience is what most people think of as their website”. It’s the layer that goes out of fashion merely in 18 months. Another other important take away from that article is that the choice of CMS becomes very critical to determine longevity of investment.

    A typical content management system controls all three layers together, and they move in lock-step. Not ideal, but that is how things are. Through the life of a website the content types & storage probably won’t change much. Big perceivable changes happen in other two layers. Therefore the content storage layer must be very well considered. A CMS switch later is expensive, especially the data migration effort.

    Hopefully this will be discussed in the upcoming CMS Conference.

  • The Wheel Does Indeed Turn

    Prateek Rungta

    Our friend and interface designer Abhishek Nandakumar writes about the value of designing with prototypes instead of static mockups. He uses the example of Google Maps to demonstrate how working prototypes can often reveal counter-intuitive improvements in an interface, like increasing the number of clicks:

    Most time is spent navigating and scanning through the interface, but if the interface and the path to your eventual goal are both clear, clicks might not matter, because you’ve reduced a majority of the cognitive load associated with scanning.

    We’ve felt the same for a long time, and hence prefer designing our sites in the browser as often as we can.

  • Web is Flux

    Souvik Das Gupta
    Meta Refresh 2014
    Location & Date
    ·Bangalore, India

    There are known knowns. These are things we know that we know. There are known unknowns. That is to say, there are things that we know we don’t know. But there are also unknown unknowns. There are things we don’t know we don’t know.

    — Donald Rumsfeld

    Earlier this year, in the month of February, I attended Meta Refresh in Bangalore where I emphasised the importance of progressive enhancement through a workshop and a talk at the conference. It is quite unfortunate that many web designers and developers continue to carry forth the old approach of designing websites for a known system configuration. Only later do they test their websites on alternate browsers / devices and patch issues that are detected. This practise is known as graceful degradation.

    This site is best viewed in IE6, 800×600.

    About a decade back there was very little variation in hardware and software and one could have got away with making assumptions about client systems – though that doesn’t really justify this practice even at that time. Over the years, the devices (and software) connected to the web have come a long way. New waves have swept across the ecosystem – frequently and unpredictably – bringing in newer hardware, device capabilities, screens, browsers and other software. Today it is hard to keep up with the speed at which things are changing. We don’t know what will storm the ecosystem next but something surely will. Assumptions about a system configuration, today, are far from safe.

    At a time when technology is changing faster than what we can keep up with, it’s worth noting that the fundamental principles of the web have remained unchanged since its inception about 25 years ago. These principles have stood the test of time and can perhaps be described as strictly liberal. In many ways they have been responsible for letting the web evolve and improve over time without any major impediments. Even today the very first website on the internet works flawlessly across all standards compliant web browsers on every device.

    The onus of embracing these principles lies on us. If we look closely, there are only a handful of knowns in a traditional web communication — the presence of a client and a server that talk over HTTP, and the fact that client is running a web browser that will understand a hypertext document. Everything else is either a known unknown or an unknown unknown.

    Progressive enhancement is a fundamentally opposite approach to the widely adopted method of graceful degradation. It was introduced in the year 2003, by Steve Champeon and Nick Finck in a talk titled Inclusive Web Design for the Future. In short, start with healthy markup, add the styles around it, and finally layer the interactivity around it. How does that help? The outer layers do not interfere with the inner ones, and therefore basic systems can access the content in the markup layer and deliver a base experience to the user. More powerful systems can further take advantage of the outer layers to enhance the user experience. No one’s excluded.

    The idea of starting with the most basic system was expectedly rebutted by many in the audience. After all, hardly anyone uses a vanilla HTML browser today. Pretty much everyone has the bells and whistles of CSS and JavaScript. But as the Principle of Least Power suggests, the less powerful a language the more widely it can be adopted. And further, if I may add, less powerful languages have low chances of failure. The fact that a system can continue working even if one of the technology fails is a huge benefit derived from adopting progressive enhancement. Christian Heilmann’s elevator vs escalator analogy perhaps best exposes the elephant in the room.

    Last year, all of a sudden, there was a revival of the progressive enhancement debate on the internet. Since then, it’s been regularly discussed at many reputed conferences around the world. Having to defend the values of the web (such as inclusiveness) 25 years after we began this journey by letting go of control, and becoming flexible is a tad disheartening. I wish the community rests this debate and upholds the spirit of the web. This talk is an effort to urge everyone to do just that.

  • Preview: Embracing Progressive Enhancement

    Prateek Rungta

    We had a great time attending and speaking at Meta Refresh last year. Souvik has been given another opportunity and will be presenting once again at HasGeek’s annual web design conference. This year he is conducting a workshop that will revisit the spirit of the web to demonstrate what makes the web special, and show how to embrace the principle of progressive enhancement to build robust websites.

    Here’s a short introduction:

    If you design or build for the web, you should definitely try and attend. Come to the workshop and learn why and how to adopt this foundational philosophy of developing for the web, or participate in some of the other great workshops and talks on the roster. The most compelling reason to attend though is the chance to meet fellow peers in person — a rare privilege for us digital workers.

    Meta Refresh 2014 takes place from the 11th to 15th of February. Souvik’s workshop is on the 13th (Thursday) at The Energy And Research Institute (TERI) in Bangalore, and tickets are still on sale.