DYNAMIC LAYOUTS

CUSTOM WEB DESIGN WITHOUT THEMES & WITH OR WITHOUT CODE

For years in website design, agencies and businesses were faced with a decision:

  • Design a website on a shoestring budget using a theme; or
  • Go all in with a custom, hand-coded solution.

You’re probably well versed in the nuances of both scenarios. In this episode, we'll quickly brush over the pros and cons of each, then move on to the MOBLE method of dynamic layouts.

From the outset MOBLE aimed to take the best bits of themes and the best bits of custom, encouraging a design economy that rewards time spent in quality creative production, over the completion of repetitive, low-skilled tasks."

 


Why we call it Dynamic Layouts

After we developed dynamic layouts as a fundamental part of MOBLE's design methodology, we still didn't have a name for the practice internally, which got a little troublesome, as we were using it every day.

We wanted a name that could quickly identify to our community that we weren’t just another theme-based website builder. We wanted to inform people about our approach to bringing speed, efficiency and quality control to the custom website design process, while providing ease of use for ongoing client management.

After much discussion, we shortlisted two front-runners: Dynamic Layouts, which refers to the product, or Dynamic Publishing, which refers to the process.

Dynamic publishing is a long-standing technique adopted in the print and ad publishing world, bringing efficiencies to repetitive processes. The Wikipedia definition for dynamic publishing has remarkable parallels with the MOBLE solution for dynamic layouts on the web. Let's take a look:

The Wikipedia definition for Dynamic Publishing

Dynamic page publishing is a method of designing publications in which layout templates are created which can contain different content in different publications. Using this method, page designers do not work on finished pages, but rather on various layout templates and pieces of content, which can then be combined to create a number of finished pages. In cases where the same content is being used in multiple layouts, the same layout is being used for several different sets of content, or both, dynamic page publishing can offer significant advantages of efficiency over a traditional system of page-by-page design.

This technology is often leveraged in web-to-print solutions for corporate intranets to enable customization and ordering of printed materials, advertising automation workflows inside of advertising agencies, catalog generation solutions for retailers and variable digital print on demand solutions for highly personalized one to one marketing. The output from these solutions is often printed by a digital printing press.


Ditto. That's exactly what we do at MOBLE, yet for website design.

In the end, however, we opted for 'Dynamic Layouts', and we hope this definition of 'Dynamic Publishing' serves as a nice introductory definition alluding to our methods to building custom websites.

Interestingly, I should note, purely for those of you who can still remember the early days of content management, dynamic publishing was a term we used to describe how we would save and publish single pages on the fly.

This has now considered commonplace and best practice, rather than the early alternative method of publishing pages in batches, which took up a great deal of time.

Frankly, it sucked. Thankfully, we keep moving forward.


So what are Dynamic Layouts?

Similar to the definition of dynamic publishing above, rather than design full pages, we design layouts. On MOBLE, you can drag and drop hundreds of pre-made layouts on the page in any combination.

The layouts automatically pull the CSS ‒ a brand’s unique style sheet made up of colours, fonts and elements ‒ so the layouts instantly take on the brand’s unique look and feel. The layout can then be customised by the designer to enhance its appearance for its particular goals and objectives on that page.

In this episode, you’ll discover why this solution saves both time and resources, allowing you more time to create inspiring things.

Premium website and graphic designers will look at how this enables you to modify your pricing according to quality, rather than time alone.

We’ll also announce how we’re going to release new layouts on a monthly basis, keeping the very best design trends at your fingertips.
Before we do all this, let's have a quick recap as to where we’ve come from and the state of the market today, by highlighting the benefits and drawbacks of theme vs. custom website design. If you know this discussion all too well, click here to jump ahead to read how MOBLE use dynamic layouts to design websites.

"MOBLE is a private company without investment. We built our business developing hundreds of custom business website designs. Our core staff has been building bespoke website solutions since 2002. This experience has ensured that we’re always learning about what businesses need to succeed. We then apply this knowledge to MOBLE software to ensure that we can build better websites, more efficiently. We’re therefore biased towards custom website design, though paradoxically we’re developers of a website building tool. Our aim is to replace themes and use the best parts of both solutions. A low-cost way to build websites quickly and a platform to develop flexible high-quality custom solutions. A website builder for custom design."

Themes


Who uses themes to build websites?

Themes, or templates, are already designed and coded. They don't require a website designer. They’re popular with business owners building their own websites, or with digital producers responsible for configuring and modifying the theme.

Digital producers are tasked with modifying the theme fonts and colours, adjusting elements and styling a plugin. They often require HTML and CSS to transform the theme and plugins to match as closely as possible to the client’s brand.


The Pros
  • Cost
    • Themes are bought for under $100 and are ready to plug and play.
    • The digital producer charges for theme customisations and content loading.
  • Time
    • The time frame is rapid.
    • Since the client is happy with the theme selection, there is a known task list to follow and production time is easy to forecast.
  • Diversity
    • Theme library websites have thousands of themes to choose from. Though themes are inflexible compared with the custom approach, there is a good chance you can find something close to what you require.
  • Future Proofing & Maintenance
    • This is the big drawback of themes. But find the right theme with little requirements for modifications, and you’ll find maintenance can sometimes not be too stressful.
    • To avoid the pitfalls of bugs and costly maintenance, typically you’d require an experienced agency team to have learned the nuances of various themes, allowing them to utilise the maintenance of trusted theme providers. Regular updates with the theme will then have a lower chance of going wrong.
 

The Cons
  • Limitations
    • Themes have a UI with limited control for the client, creating limitations with ongoing customisations.
    • Themes tend to have limited number of page templates to choose from, with restricted modification for each, limiting the client in ongoing content management.
  • Common
    • The best themes are popular so you’ll tend to see your website design used by other companies.
    • Main themes use the same framework such as bootstrap and end up looking very 'samey'.
  • Plugins/Apps/Add-ons
    • Plugins are made by developers who offer limited UI tools, and limited access to modify them.
    • Plugin developers might not do updates and therefore they frequently become buggy.
    • Plugins on platforms like WordPress in php, offer an easy way in for viruses and hackers.
  • Clunky
    • Themes try to cater to generic outcomes and often have too many features that can be hard to strip out and become clunky.
  • Maintenance
    • In open-source systems like WordPress, maintenance can be an issue since WordPress, plugins and browsers all need to do updates that invariably cause conflict and bugs.
    • Maintenance becomes reactive, rather than proactive. Things get fixed after they break.
    • While it’s possible to find a well-maintained theme, these are popular and used by many, though there are thousands of poorly maintained themes or ones that are obsolete. Navigating the minefield can be difficult even for pro users.
  • Performance Iterations
    • A website should be fluid; the design should never be 'finished'. Changes should be made as you learn about your users and how to improve conversion rates.
    • You might learn you need to change core functionality like the structure of a website header. This could lead to expensive changes or a complete rebuild down the track.
  • Learning Curve
    • Often there is a learning curve, as with any software. Though when you consider adding on new plugins and add-ons, the additional learning curve is often not just for the client; it can be for the producer as well.

Custom


Who uses the custom design approach to build websites

A website design team is required to build a custom website. Serious businesses undertaking lead generation and marketing automation activities will invariably require a custom design by a professional website designer.

We typically find the businesses owners who approach MOBLE for custom development have tried themes in either the open source or via closed source DIY website builders. Often they’ve either been burned by the experience, or have outgrown them. They now require the power and flexibility of a website to iterate changes quickly and improve ROI. The downside to all of this is simply the time and money it takes to build.

 The Pros
  • Workshops
    • To develop a custom website, you must understand the business’s values, objective, products and services, promotions, customers, marketing goals, sales targets, KPIs ROI and, of, course SEO.
    • We find that a good workshop process is the most fundamental aspect of the creative process, inspiring new ideas and bringing all constituents together.
  • Unique
    • Following a sound workshop, you can design a tailored approach unique to the company requirements, purpose-built to help achieve KPIs and objectives.
  • Custom elements
    • Custom front-end development can help bring in animation to enhance the page performance.
    • Inversely, you may strip our elements that are no longer required. This is important in key converting areas of your website as when only one possible action is visible, it guides the visitor take your desired action.
  • Easier Content Management
    • As well as unlimited design revisions for custom clients, MOBLE provides unlimited training too. We might design things in a certain way because we know they’ll be easier for clients to manage it in the CMS, such as the degree of parallax or access to code blocks.
    • If we know clients have low experiences or confidence, we might even reduce access to editing the header or styles design tool. We can also set CMS permissions for certain staff based on their level of skill and requirements.
  • It's best for Branding
    • A professional graphic designer for branding, both visual and cultural. A professional graphic designer understands branding, both visual and cultural.This is more than colours schemes: it infiltrates through every element of the design. At MOBLE, we often say when you’re on the last 10% of the build, you are only 40% of the way there.
    • We often charge clients based on the design level required for the last 10%. This helps set customer expectations and lets our team know we can go all in, putting our heart and soul into all aspects of the design.

The Cons
  • Cost
    • A custom website will cost into the thousands. With a team of highly skilled people and in economies like Australia, US and UK, this has to be accounted for.
  • Time
    • Custom builds should take longer, though the timeframes are often predicted accurately and driven along by a project manager. And because you’re working with a professional team, they tend to work much quicker. So items that take longer in the theme-based world, such as loading content, are a breeze in the custom world.
    • Wireframes have to be created, redrawn and iterated.
    • HTML has to be coded once the prototype is confirmed.
    • Coding layouts from scratch takes time, though this is compounded by the time it takes for testing. Often bugs are not found or are later introduced into the live environment. If you’re the only business using that code base, bugs have a risk of going unnoticed. Often it might be a client that finds it first. So sometimes frustrations experienced in the theme-based world are also true of the custom world.
The Old Conclusion

There has perhaps never been an absolute answer.

The answer really is what’s right for the business and both do have benefits. If your website is low-touch and only serves to be a web presence, the theme approach is perhaps a good option.

If you’re serious about conversions rates and site performance, you should consider paying more for a custom design that is more likely to bring strong ROI.

The New Method: Dynamic Layouts - Custom website design, without themes

We’re advocates for custom design. So when when designing for clients in our own business, we sought to speed up areas of website development that were repetitive and time-consuming. We wanted more time spent in creative areas, or so we could produce a custom design for clients at a much more attainable price point.

In Episode 3, Disrupting the age old web design process, we talked about how MOBLE tends not to go through the wireframe and prototype phase in programs like Photoshop or Sketch.

In the past, we used to mock up base frameworks in Sketch so that we could have a base of layouts and grids to start from and save time. If you and your client decided to revise an initial design mock and wanted to change things like padding, line spacing or button height across many design screens, this could be an arduous task.

When Sketch entered the market we embraced it because of the use of 'Symbols' which meant you could update elements, like buttons, once as a Symbol and it would update across all of your design screens at once.

However, it wasn’t so easy using symbols for certain things, like padding. We’d spend a lot of time in the wireframes and visual design modifying things when all this could be done in code.

It felt like we were charging the client more, just so we could get their approval before we could start coding. It just made no sense when it was quicker to do this in code from the outset.

This was really a legacy issue, paved into the process before designers knew HTML and CSS. These days if you’re a designer who knows code, you might have found yourself convincing your clients that the sign of such nuances was not so important, and you would address the touch-ups later in the coding phase. It really all seems a bit mixed up: old processes with new technology.

At MOBLE, we were also conscious that there were still many great graphic designers who didn’t code. Sometimes great designers have a limited understanding of what can and cannot be coded, and this should be absolutely fine. People should do what they are great at. We should need a solution that accounts for everybody.

We wanted to create something that complemented all designer skills sets, at all levels, but also something could be used by all businesses at all price points.


As business owners, we didn't want a divide in processes, with some staff working in one way, and other staff in another. We wanted to have a process that united all skillsets in the team, with people working in a uniform way across different projects. This way, project times could be forecasted and priced accurately.

In essence, we wanted to create something that complemented all skillsets at all levels, but also that could be used by all businesses at all price points. With this objective in mind, we knew that wireframing had to be brought into the CMS, so there was no distinction between wireframe, visual design layout, and code. This is what we refer to as a Dynamic Layout.

We then evolved this concept further and set about creating hundreds of design layouts that could be dragged and dropped onto a canvas, much like what we had done earlier in Sketch. As you dropped the layout onto a page, it would adopt the CSS of the website, presenting the client’s branding as a base to work from.

We define a Dynamic Layout 'as a page layout where there is no distinction between wireframe, visual design layout, and code'.


A MOBLE website comes loaded with hundreds of layouts catalogued by column ratio. These can be dropped on to the page with your unique website branding. You can then toggle between design mode and wireframe mode: these are one and the same thing on MOBLE. You can even view both in the browser and send links to your clients and colleagues.

In the MOBLE styles builder even a beginner can control the CSS in the designer tools, without code. We have colour pickers and font pickers; you can even pick and choose from a huge range of pre-built headers.

Notably, buttons and animations are coming in a forthcoming sprint. Essentially, there is no need for a theme, as you have all the tools to create your own theme from scratch in an effortlessly quick timeframe.


Get Inspired

We’ve just launched a section on our website called Inspire, where we look back through the month and present the best layouts that have been released. We add these to the CMS so everyone can drag these onto a page. The best bit is that all the layouts work together. It's not like a theme where you hit a limitation and can't go any further, or you have to install an entirely new theme and start again. All of the building blocks just work together!

Check out the Inspire section on our website to see some of the tasty layouts on offer.

And check out our new Inspiration series, coming soon, where we’ll be inviting all designers to create their own layouts for release in the Inspire section.

If you want to get involved and show your talent to our community, we’d love to hear from you. Contact us at www.moble.com/lets-talk

The benefits of dynamic layouts seem to unfold naturally in ways that we never initially intended and now run deep into both how we work, and what we work on.


The Pros of Dynamic Layouts
  •  Time
    • Less time spent in repetitive tasks like padding alignment.
    • More time spent in creative design.
  • Cost
    • Charge less $ - win lower budget jobs and still be profitable.
    • Charge more $ - showcase your true design talents without restriction.
  • Workshop
    • Present design inspiration from the MOBLE inspiration section.
    • Even create design interpretations on the fly during the workshop.
  •  Wireframe
    • Don't lose time wireframing in design tools like Photoshop or Sketch have you Wireframe instantly coded.
    • Toggle into wireframe mode and share your wireframes with your team.
  • Mobile
    • All of your mocks are fully responsive so your clients and team can preview on their devices.
    • Don't lose time coding mocks for multiple devices.
  •  Design
    • Offer unlimited design revisions:
      • Drag and drop Layouts at any time, during the build or ongoing when live.
      • Sit with your client to design the page structure for instant sign-off.
    • Design straight into the page and it will be instantly coded.
    • Build your own Layouts from scratch, modify ones that are close to your requirements or just use ones that are just right.
    • Spend more time creating visual assets in design tools like Photoshop or Sketch, then add these to your page.
  • Code
    • Code is not required in the base HTML or CSS.
    • Spend time coding more time coding inspirational things, like interactions and animations.
    • Access code blocks in the editor.
    • Open CMS - access global CSS and JS.
  • Ownership of Design and Code
    • MOBLE is an open CMS if you wondering about ownership, existing and the old open source proprietary approach, jump to the last article of this series. All your questions are answered and you'll be pleasantly surprised.

 


So what do you think?

Do you have a similar process? Could Dynamic Layouts work for your business?


Ready to give it a go?

Jump on to your MOBLE website now and start playing with the hundreds of Layouts on offer.

Get your free to try MOBLE website now


Want to use Layouts, like a Pro?

Head over to our hands-on practical Series 3. Which is full of handy tutorials on how to master content with the MOBLE Visual Editor.