Sep 06 2018
Sep 06

Drupal 8.6 was released yesterday and is being touted as the most significant update to Drupal 8 so far.  Browsing initiatives being undertaken by the Drupal community always gave an indicator towards the direction and future of Drupal. It’s easy to understand why the ever-growing community of Drupal users were eagerly anticipating this latest version which promises to focus on enhancing the user experience as a priority.

So, beyond the usual fixes and improvements typical of any update; Vardot decided to highlight the new features and capabilities included in the latest release.

 

1. Media Editing and Management

A new media library has now become a core feature of Drupal 8.6. This upgrade significantly enhances the experience of content publishers and content marketing teams’ performance in particular.

As an integrated feature of Drupal 8.6; the new media library can be customized based on your needs as a content editor and publisher. Upgrading your CMS to the latest update will enable you as a content marketer to easily edit, publish and manage your content:

  • High efficiency – The mundane task of re-uploading existing media content is a thing of the past now as all media content can be saved and browsed in the new media library available in Drupal 8.6.

  • Embedding made easy – the latest Drupal version features built-in stable support for embedding remote media. In particular; YouTube and Vimeo video content.

 

 

 

2. Workspaces

Since the Workflow module has become stable back in version 8.4; staging of multiple content changes at the same time (Workspaces) has been one of the Drupal community’s most requested improvements.

This has been duly delivered as an experimental Workspaces module in Drupal 8.6. A simple and intuitive user interface enables users to define workspaces, deploy multiple content items between them in a smooth manner.

The Workspaces module is steadily evolving but even at this experimental stage; it will prove to be a major upgrade especially for website who prefer or need to publish various changes at once.

 

3. Layout Builder

A much-anticipated tool that enhances the site-building experience and authoring capabilities.

Provide a drag and drop interface for creating layouts, which can apply both to overall site sections, as well as overridden on individual landing pages.

Web pages can be more dynamic, personalized and purpose-driven now that site builders can take advantage of the Layout Builder module in Drupal 8.6. The flexibility that users are provided to create unique layouts for unique content formats is an exciting feature which will undoubtedly continue to develop and become a stable key feature of the updates to come.

If you still need help enabling the layout features, OS Training made a clear and simple guide.

 

4. Meeting Evaluators Needs

Drupal has introduced a smoother installation out-of-the-box experience in the form of a demo profile dubbed ‘Umami Food Magazine’ which showcases the most powerful capabilities of Drupal and an overview of a variety of sample views and field types.

Recognizing the importance of a positive evaluator experience; Acquia CTO Dries Buytaert has outlined the Drupal 8.6 installation process in response to challenges that faced evaluators of early Drupal version experiences.

Importantly, the latest update includes major improvements to the download experience and documentation. Users can now download and install fully functional Drupal demo applications in under 2 minutes, whilst new users in particular can benefit from the revamped documentation found on Drupal.org.

 

5. Migration

According to the official release announcement; migrating your website from Drupal 6 and 7 to Drupal 8 has never been easier as almost all migration modules are stable.

Drupal Association’s Marketing Communications Manager writes: “Drupal 8.6 sees both Migrate Drupal (migrations from previous major Drupal versions) as well as Migrate Drupal UI (upgrade user interface) modules provide a solution to update older sites. This means that if you have a monolingual Drupal 6 or 7 site, you can now use a supported and built-in user interface to migrate your site to Drupal 8. Multilingual migrations are still experimental and now wrapped in the Migrate Drupal Multilingual module.”

This update has been anticipated by content editors and developers alike and we are sure that Drupal 8.6 will afford users and the community as a whole to pursue opportunities to innovate and improve upon the great advances made so far.

Did the latest update address your priority issues? If not, what are they?

Let us know what you think of the new update.

Jun 20 2018
Jun 20

SharePoint is Microsoft’s entry in the crowded Content Management Systems (CMS) market. As a Microsoft product, SharePoint is tightly integrated with Windows and the .NET framework. It has enjoyed considerable success in the intranet world, but as a public-facing enterprise website builder, not so much.

The first part of this post discusses the migration of corporate websites from SharePoint to Drupal 8. The second part addresses the role that SharePoint can play post-migration, in a co-existing relationship between SharePoint and Drupal.

 

Migration Benefits

Moving from Sharepoint to Drupal 8 | Benefits

 

For organizations that currently deploy SharePoint as a CMS over a public-facing enterprise website, migrating to Drupal have the following benefits.

  1. Improved Customizations.
    While SharePoint is bloated with out-of-the-box features, customizing it to satisfy unique enterprise requirements has proven to be difficult. In particular, the customization of the look-and-feel of the website for corporate branding purposes (“theming”) takes considerable effort.

    Drupal, on the other hand, provides a core out-of-the-box framework which you can enhance with the help of its many contributed modules in order to satisfy your specific functional and branding requirements.

  1. Cost Effectiveness.

SharePoint has 2 broad-based pricing options: Online and Server. SharePoint Online is the cloud-based version which targets intranet or portal use only. SharePoint Server is the on-premises version for hosting your enterprise website. A SharePoint Server solution requires that you pay software license fees, not just for SharePoint itself, but also for the Microsoft technology stack including Windows Server, SQL Server, as well as Visual Studio which you use for coding.

In contrast, Drupal is open-source with no license fee for the core as well as contributed modules. In addition, Drupal can be deployed on the free and open-source technology stack, highlighted by the Linux operating system and mySQL database. You can also develop PHP-based Drupal solutions using free PHP Integrated Development Environments (IDEs) such as Eclipse.

  1. Fast-to-market Innovation.
    One of Drupal’s competitive advantages over proprietary CMS vendors is its vibrant and diverse user community. The community functions as an excellent brain trust and source of both feature and technology innovation. In addition to regional meetups, social media, and online forums, Drupal marketers and developers alike come together annually in DrupalCon, the main event for product planning, networking, collaboration, and training. To bring innovative features to market quicker, Drupal 8 delivers minor feature releases every six months in addition to the monthly bug fixes.

Migration Challenges

Moving from Sharepoint to Drupal 8 | Challenges

Drupal’s strength is its flexibility, power, and scalability. The challenges of migrating to Drupal usually revolve around the transfer of existing web assets from the old to the new system. The challenge is exacerbated when the website is big, with thousands or even tens of thousands of pages comprised of various content types, media, and users. More specifically, the migration challenges from SharePoint to Drupal are as follows:

  1. The export of HTML-formatted body contents.
    SharePoint allows you to export web pages to CSV or XML files. The problem with the  SharePoint export is that the output body sections are of plain text format: all HTML tags, as well as embedded image and URL links, are stripped. For a website of any meaningful size, manually re-inserting the formatting tags and links is simply not an option.

    The good news is that there is a program solution to extract the SharePoint contents with HTML intact. A programming script can be written to retrieve the body content from each web page via the SharePoint web service API. This requires coding skill but is very much feasible.
     

  2. The retention of SEO page ranking.
    The SEO ranking of existing web pages is a valuable enterprise asset that must be protected in the migration process. Failure to protect SEO assets may likely result in the decrease of internet traffic to the new website. Because the URL structure in Drupal and SharePoint are different, the migration process must include the setup of redirects from old URLs to new URLs, hence protecting their SEO value. Drupal handles redirects very well if the old URLs were migrated properly to Drupal.

 

AUC Website Case Study

 

  1. New skill sets required.
    Both SharePoint and Drupal are complex systems that require extensive product knowledge to reap full benefits. Migrating from SharePoint to Drupal entails that a whole new skill set must be acquired for the site-building team. If Drupal expertise is not readily available in-house, external professional help is needed. The challenge then becomes how to select qualified Drupal professionals to make the migration project a success.

    The fact that Drupal is built on the PHP open-source platform can be a double-edged sword. While the absence of license fee is undeniably a positive, the general availability of the technology makes it much harder to differentiate true professionals from mere PHP hackers. In seeking outside help, it is recommended to look for an organization that has full-cycle Drupal implementation experience from planning, design to development.
     Middle East #1 Drupal Agency

 

Migration Steps

Moving from Sharepoint to Drupal 8 | Steps

The following is a high-level description of the steps needed to migrate your enterprise website from SharePoint to Drupal.

  1. Take inventory of current web content assets.
    Moving to a new CMS offers the organization the perfect opportunity to take stock of their current web contents, filter contents that are outdated or least viewed, and include only those assets that are worth moving to the new website.

  2. Design the structure of the new Drupal website.
    Drupal 8 offers a powerful content modeling and structuring modules and tools, which allows you to build flexible content types, host structured media from various sources, and organize web contents using organization-specific vocabularies. Now that you have taken inventory of your existing web pages, it is time to decide how the contents should be re-structured and re-categorized in the new website.

  3. Write SharePoint web services script to export legacy web pages to XML files.
    Automation is the key to extracting contents from SharePoint while keeping existing formatting information intact.

  4. Prepare Drupal test website.
    Set up Drupal 8 on a test machine, and configure Drupal as designed earlier. In addition, prepare the HTTP redirect module that will map the old SharePoint URLs to the new Drupal URLs.

  5. Import SharePoint XML files into your new Drupal website.
    Drupal 8 has a core module named Migrate which is a framework for importing web contents from another CMS. Migrate provides the underlying API for migrating configuration and content from any source to Drupal. You may need to extend the module to import content types that are not automatically imported. Make sure to import old URLs into their redirect rules to retain SEO page ranking.

  6. Review the new Drupal website and make the adjustment.
    Transferring data from a legacy website to a new website is a complicated and error-prone process. Now is the time to review the results, and make the adjustment to the export and the import scripts to eliminate any errors.

 

Drupal Coexisting with SharePoint

Drupal Coexisting with SharePoint

Many organizations are deeply entrenched in the Microsoft ecosystem, particularly in the areas of document management and collaboration. SharePoint is tightly integrated with Microsoft Office Suite with which internal users are typically well trained. For organizations that have invested heavily in SharePoint in both financial and social capital, simply discarding it for another (albeit more suitable) CMS for their enterprise CMS may be a difficult choice. The good news is that SharePoint can still play an important role in the enterprise’s IT infrastructure post-migration to Drupal.


Organizations can still leverage their prior investment by continuing to deploy its intranet portal using SharePoint. In this way, internal users can still use their existing Office tools and a familiar workflow for internal collaboration, communication, and document management. At the same time, the public-facing enterprise website is powered by Drupal with its broad range of powerful functionalities. By having the two systems working hand-in-hand, the organization reaps the maximum return on investment from SharePoint, while empowering the enterprise website with greater Drupal-based functionalities.

The challenges for the coexistence of Drupal and SharePoint are twofold. First, organizations must define a content strategy to avoid duplication of contents and maintenance efforts. Second, content feeds must be established from Drupal to SharePoint and vice versa.


 Migrate Sharepoint to Drupal 8

 

 

Conclusion

Drupal 8 is a top-notch enterprise site building software platform. Organizations that have outgrown their existing non-Drupal CMS should consider migrating to Drupal 8. Migrating to Drupal 8 has its own unique challenges, including data migration and SEO retention. Vardot is an award-winning Drupal web solutions provider that can help you navigate through the process of migrating to Drupal. For more information, please contact Vardot.

Nov 06 2017
Nov 06

Drupal continues to grow in popularity every day. Many users opt to adopt a Drupal distribution: a full copy of Drupal along with additional software. In general, you will see two types of Drupal distributions. Complete solutions, otherwise known as full-featured distributions, and quick-start tools.

A Drupal distribution is collection of Drupal and other software components built, assembled and configured so that it can be used essentially "as is" for its intended purpose.

Software Distribution

Software distribution gets software from the manufacturer to the end user. It is extremely familiar to those who utilize open-source software because a software distribution is as close as most of us can get to free, "finished" software. Software distributions often refer to software made up of open-source components, ready or nearly ready for use.

Let’s talk about some of the most famous examples of Drupal distributions, beginning with Commerce Kickstart. It is an "out-of-the-box" iteration of Drupal Commerce that is a way to skip weeks of configuration, as are the rest of our distribution examples. It's packed with features and supported by an active developer community.

Working solutions can be built on Drupal using the Lightning Drupal distribution. Editorial teams love its functionality and ease of use. Higher education is elevated with OpenEDU, a sub-profile of Lightning. It is a popular composer-based project. There is also Thunder, which makes it possible for publishers to connect and put great work out into the world.

Varbase is another Drupal distribution example you need to know about. Adaptive functionalities and essential modules are packed into this distribution powerhouse. Development can be sped up by leaps and bounds, and hours that could be spent on customization can be spent in the trenches, utilizing the program. Take advantage of Drupal core modules. Use pre-installed and preconfigured tools. Leaders in industries across the globe take advantage of Varbase to create work backed by Vardot, an award-winning enterprise web solution provider.

Read more: Essential Things To Know About Varbase

What is a Drupal Distribution, and Why Do You Need It

 

Starting with a Drupal Distribution

You may still be wondering why a distribution is a way to go. The biggest advantage is the amount of time you save, and we all know time = money.

Normally, you would need to download and configure Drupal core, and then select your modules. There are tens of thousands of them, so as you can imagine, this can take weeks to get right and explore properly.  

Or, you can jump straight ahead to a preconfigured site. Each option is already packed with the essentials, contained in a single download. In addition to the famous examples, we listed above, Vardot also contributed its own modules to Varbase SEO and Varbase Media.

Launch time goes from days or weeks to hours with the help of a Drupal distribution. Enterprise leaders love the time-to-value ratio and the customization options for industries including higher education, media, publishing, commerce and more.

Read more: Need Better Website Performance? It Starts with a Drupal Site Audit

 

Starting a Drupal Project on a Distribution vs. Without

What is a Drupal Distribution, and Why Do You Need It

Let’s look at the differences in time-to-market when you are using a Drupal distribution versus building your website from scratch. Perhaps you are new at this, or you are eager to go live and establish an online presence. Drupal is a powerful content management system (CMS), and you will need to educate yourself on it to use it to its full potential. Once Drupal is downloaded, you have access to core modules. Anything beyond that will require an additional download.

Then there is the Drupal distribution, which will include both core and peripheral modules in a single download. Social collaboration applications come with all the social modules needed. University and college teams can locate and download higher education distributions that create turnkey educational resource websites. The list goes on and on. Where there is a need, a Drupal distribution exists to fill it.

In other words, utilizing a Drupal distribution consists of three steps:

  1. Selecting the correct Drupal distribution.
  2. Installing the distribution.
  3. Configuring and enabling it.

The advantages of working with a Drupal distribution continue well past initial installation. Maintenance is also a breeze. When you create a website born out of a distribution, all modules and features are integrated and tested together. When updates are required, it is a single update, as opposed to hundreds.  

Here at Vardot, we specialize in open source solutions. Along with comprehensive Drupal consulting and training services, we can assist with launching your Drupal Project. Get started by clicking below.

Aug 02 2017
Aug 02

The cobbler's children always go barefoot! Is a saying we no longer want to be associated with. As a Drupal-specialized development house, it's no longer an excuse to keep a Drupal 7 website.

You're currently reading this post from our new Drupal 8 website, built using the ultimate Bootstrap distribution available for Drupal 8; Varbase (see project page on drupal.org). We've built Varbase with the basic concept of DRY (Don’t Repeat Yourself), so that we relieve ourselves from repeating all the modules, features, configurations, best-practices that are included in every Drupal website we built.

Did you know that Varbase is available for free to install and build websites on it yourself? You can test-drive it now on Simplytest.me. Or contact us to build one for you.

New Website Sections

Our new website features our Products in a new section where you can learn more about each product we build.

We also highlight how we deliver business solutions for various industries and verticals, including Higher-ed and SchoolsCorporates and Enterprises, Non-profits and NGOs, and News, Media and Entertainment.

Paragraphs to Build Nice Pages

The new website (and Varbase) uses the famous Paragraphs module, and suite of other modules that we have specifically built for Varbase, such as Varbase Bootstrap Paragraphs.

You can now leverage this functionality with an intuitive page building experience when you use Varbase.

Advanced Page Building Using Paragraphs in Varbase

It's worth noting that it took us 2 weeks to build the new website! Amazing, right? Let us know what you think.

And contact us to discuss your next project.

Nov 10 2016
Nov 10

TLDR;

  1. Add "Reverse order in admin view" option: https://www.drupal.org/node/2478685
  2. Fix a problem that causes the queue to be always required when using "Limit to a specific entity queue": https://www.drupal.org/node/2821631
  3. Add a tab for Entityqueue on content types: https://www.drupal.org/node/2145441
  4. Make "Contextual links" work for views using Entityqueue: https://www.drupal.org/node/2825773

When using the Entityqueue module in Drupal 8 as a tool for editors and site admins to order content, you will end up working on the following use cases:

  • Use case 1: Use Entityqueue as a filter: shows only the items chosen in the queue.
  • Use case 2: Use Entityqueue as a loose sorting tool: does NOT limit the items based on queue, but prioritizes the items chosen in the queue to be displayed first, then shows the rest, perhaps in a reverse chronological order.

These are the most common use cases we use at Vardot for our clients when we build a site.

Use case 1 works perfectly if you use Entityqueue as is.

However, use case 2 does not work properly. Therefore, we have contributed (or contributed to), two patches that would make life easier to build a solid experience using the Entityqueue module in Drupal 8.

Added to that, we also patched two missing features that existed in Nodequeue, and should now exist in Entityqueue for Drupal 8.

Note: this post was written in November 10, 2016, which until this date, these patches are not yet committed to Entityqueue. Please review the patches, we hope that they get committed and become part of the next Entityqueue release.

1. Queue is always required when using "Limit to a specific entity queue"

Issue link: https://www.drupal.org/node/2821631

Needed for use case 2, you will most likely need your view to limit results to only items in the entity queue your joining in.

 

2. Get the good old "Reverse order in admin view" option

Issue link: https://www.drupal.org/node/2478685

For use case 2, this option will come in handy, since you will be sorting in reverse chronological order after the items in the queue are shown first.
Therefore, this nice workaround allows you check "Reverse order in admin view" to ensure the items in queue appear first in view when you sort.

 

3. Get the good old Nodequeue tab to appear along with content tabs

Issue link: https://www.drupal.org/node/2145441

If I'm an editor or a site admin, it wouldn't make sense to me to see the queues that I can add a piece of content to.

This tab has been missed from Entityqueue, now it comes back.

4. Get Contextual Links to send you directly to the queue edit page

Issue link: https://www.drupal.org/node/2825773

Plans for this is to integrate with the new outside-in approach of Drupal 8.2 using the Settings Tray module.

This patch provides you as an editor or site admin, to go directly to the queue from the front end using the contextual links, instead of searching for the queue by its name from the admin view.

Let's hope these patches get committed and pushed to Entityqueue module.

This tab has been missed from Entityqueue, now it comes back.

Nov 10 2016
Nov 10

TLDR;

  1. Add "Reverse order in admin view" option: https://www.drupal.org/node/2478685
  2. Fix a problem that causes the queue to be always required when using "Limit to a specific entity queue": https://www.drupal.org/node/2821631
  3. Add a tab for Entityqueue on content types: https://www.drupal.org/node/2145441
  4. Make "Contextual links" work for views using Entityqueue: https://www.drupal.org/node/2825773
UPDATE July 30, 2017
3 of the 4 patches are already committed and included in the dev version of the module. The only left patch #3, Add a tab for Entityqueue on content types.
You might as well check the Entityqueue Form Widget for better user experience when adding content to queues.

When using the Entityqueue module in Drupal 8 as a tool for editors and site admins to order content, you will end up working on the following use cases:

  • Use case 1: Use Entityqueue as a filter: shows only the items chosen in the queue.
  • Use case 2: Use Entityqueue as a loose sorting tool: does NOT limit the items based on queue, but prioritizes the items chosen in the queue to be displayed first, then shows the rest, perhaps in a reverse chronological order.

These are the most common use cases we use at Vardot for our clients when we build a site.

Use case 1 works perfectly if you use Entityqueue as is.

However, use case 2 does not work properly. Therefore, we have contributed (or contributed to), two patches that would make life easier to build a solid experience using the Entityqueue module in Drupal 8.

Added to that, we also patched two missing features that existed in Nodequeue, and should now exist in Entityqueue for Drupal 8.

Note: this post was written in November 10, 2016, which until this date, these patches are not yet committed to Entityqueue. Please review the patches, we hope that they get committed and become part of the next Entityqueue release.

1. Queue is always required when using "Limit to a specific entity queue"

Issue link: https://www.drupal.org/node/2821631

Needed for use case 2, you will most likely need your view to limit results to only items in the entity queue your joining in.

 

2. Get the good old "Reverse order in admin view" option

Issue link: https://www.drupal.org/node/2478685

For use case 2, this option will come in handy, since you will be sorting in reverse chronological order after the items in the queue are shown first.
Therefore, this nice workaround allows you check "Reverse order in admin view" to ensure the items in queue appear first in view when you sort.

 

3. Get the good old Nodequeue tab to appear along with content tabs

Issue link: https://www.drupal.org/node/2145441

If I'm an editor or a site admin, it wouldn't make sense to me to see the queues that I can add a piece of content to.

This tab has been missed from Entityqueue, now it comes back.

4. Get Contextual Links to send you directly to the queue edit page

Issue link: https://www.drupal.org/node/2825773

Plans for this is to integrate with the new outside-in approach of Drupal 8.2 using the Settings Tray module.

This patch provides you as an editor or site admin, to go directly to the queue from the front end using the contextual links, instead of searching for the queue by its name from the admin view.

Let's hope these patches get committed and pushed to Entityqueue module.

This tab has been missed from Entityqueue, now it comes back.

Oct 31 2016
Oct 31

IP geolocation detection works through well-known databases that map IP ranges to countries. For example:

  • an IP range of 5.83.240.0 to 5.83.255.255, means that it came from Ireland.
  • an IP range of 46.23.112.0 to 46.23.127.255 means that it came from Jordan.
  • an IP range of 86.36.0.0 to 86.37.255.255  means that it came from Qatar.

and so on.

Major and credible IP mapping databases are MaxMindip2c.org, and IP2Location.

The problem with using a database lies in performance. Each request to view your website, will generate a request to the IP database, to determine the country.
If you get 5 requests per second, this means 5 queries to your IP database, to determine the country.

Therefore, you will need to rely on a very fast, highly optimized, database engine to carry the load of IP-to-country queries.
This database must not be your website's database.

And therefore, for faster performance, and to not overwhelm the site's servers with IP-to-countries queries for each page view, we can have the following implementation options:

Through a Third-party

Having the detection from a third-party is easier to setup, and requires you to pay for the service of the third-party only. No extra setup or maintenance is required from you.

  1. CloudFlare IP Geolocation: CloudFlare applies a layer between the visitor and the servers of your website. CloudFlare supports GeoIP location detection, and is embedded in that layer without any extra effort. Your website must be using CloudFlare CDN and "IP Geolocation" option must be enabled at your CloudFlare settings.
    CloudFlare's Pro subscription requires your DNS zone file to be managed from CloudFlare which is not a good option for some organizations.
    See pricing here: https://www.cloudflare. com/plans
  1. MaxMind GeoIP2 Precision Web Services: MaxMind provides reliable GeoIP detection. By using the paid service (not the database), the load is managed by MaxMind's servers and not your site. A user ID and license key is required here. You will need to buy one of their services and they will provide you the login details. You can view your user ID and license key inside your MaxMind account.
    See pricing here: https://www.maxmind.com/ en/geoip2-precision-services
    If you opt-in for Country-level detection (costs $0.0001 per query), and your site gets 200,000 visits per month, you'll need to pay $20/month.

Through Homegrown Solution (Using Databases)

You can use the available databases (MaxMindip2c.org, or IP2Location) to build your own detection. However, a high-performance setup is required here to handle high traffic. Also you should consider the maintenance costs, and manual database updating (which usually needs to be updated every week).

Assuming that you have access to your servers (a.k.a hosting  with a VPS or Dedicated Servers), this setup can be done through:

  1. Using Same Servers or Reverse Proxy: You can install MaxMind DB Apache Module, which allows for IP-to-location queries to MaxMind database from Apache, thus getting the information faster from querying your site's database or application.
  2. Setup a Node.js Server with MaxMind Database: You can install a pure JavaScript module for Geo IP lookup using MaxMind binary databases. This provides very fast look up using Node.js. Remember you'll need to maintain this setup, and keep updating the database manually.

 

Recommendation

If you're looking for faster time to market, and less maintenance overheads, go with one of the third-party implementations. You'll get more reliable and accurate service.

The homegrown solution will provide cheaper solution, but will be on the expense of maintaining it. That is of course of you have the ability to perform this setup.

Apr 21 2016
Apr 21
Project Manager’s Guide into Breaking Down a Drupal Site for Incremental Delivery

TL;DR. Jump to the free template: Standard Drupal Work Breakdown Structure Template.

Building a new site on a content management system has always been a tricky project to manage for a project manager, when compared to building a site on a framework or from scratch. That is because you are dealing with building blocks that are provided as a standard from the CMS. A project manager should have the necessary knowledge of the CMS’s building blocks to be able to manage a successful project.

Put this in context of today’s Scrum management approach (an agile way to manage a project, usually software development) and you’ll end up with a puzzled project manager with several questions such as:

  1. What can my team deliver in the first sprint?

  2. How can I breakdown the project’s deliveries into sprints?

  3. What expectations of deliverables should I set with my project’s stakeholders (product owner, business owner, client)

  4. When do I deliver the homepage for my stakeholder to look at?

  5. Are we supposed to deliver on page by page basis?

 

Drupal disrupts the “page” methodology that we are used to thinking of. One naturally tends to think of a website as a folder, with sub-folders, and pages (.html) inside those folders. That’s the 90s. We’re in 2016. Drupal is a database-driven CMS that takes a content-first (or content-out) approach of building rich web experiences, instead of a page-first approach. See “Drupal is content first, and that's good” and “A Richer Canvas”.

Drupal is Content-First or Content Out

Due to this approach of how Drupal works, we at Vardot have came up with a framework of planning the phases of building a Drupal site, to lead to an incremental development that can be broken down and fit into Scrum sprints. This will apply to almost all Drupal projects.

This standard way we'll call: The Standard Drupal Work Breakdown Structure

Why Do I Need a Breakdown of Work for Planning My Drupal Site?

Because this what project managers do. I have seen in the many Drupal projects that I was part of, that project managers (and/or coordinators) must understand how Drupal works, how the development process goes, and how do we get 80% of the site done in 20% of the time.

A work breakdown structure will help you (as a project manager) to understand how a Drupal site is built. It will also ease the process for getting high quality incremental deliveries to fit in your sprints. In this post, I will walk you through the high-level breakdown for any Drupal site.

Most importantly, the goals and outcomes of a breakdown are for you to understand and communicate to your project’s stakeholders your timeline of deliveries, and to be able to fit these deliveries into sprints.

To summarize, these goals are:

  1. Breakdown of deliverables. Define needed outcomes of initial sprints

  2. Provide a holistic view and analysis of the site’s functionality and its building blocks

  3. Remember, we are building a CMS, not a website. Therefore you need to architect your “CMS solution”, and not your “website solution”

Let’s Start With The How

Now we enforce these goals by implementing the The Standard Drupal Work Breakdown Structure, that will fit for almost all of the Drupal projects you will work with.

These phases will be divided into:

  1. Initialization Work Breakdown Structure: This phase is the cornerstone phase for starting right, it’s most probably a typical standard way that you should do in every project.

  2. Project’s Epics Work Breakdown Structure: Careful analysis of the site’s components and how it will be developed in the CMS will be implemented here.

  3. Finalization Work Breakdown Structure: This is the ending phase, where you make sure your site is ready for launch. Final preparations, tuning, and tweaks are carried out in this phase to prepare for your big day.

Note that you will be able to deliver something for your stakeholders to look at, in the “Initialization” phase.

This breakdown must happen after high-fidelity wireframes are done, or if you have the full visual mockups of a Drupal site done for your key pages.

It’s important to note that the visual mockups should use and adhere to Drupal’s design language and patterns. But what is Drupal’s design language and patterns? That’s for another article to discuss.

Standard Drupal Work Breakdown Structure - DesignNow that we have designs handed to us with a clear communication of how the new website will look like. We are ready to breakdown our Drupal site for a successful delivery.

The Work Breakdown

Disclaimer: the terminology that I’m using below to name some components that make up your site is not an official Drupal language”. No worries if you stick with the same terminology or use your own names, what really matters is just the breakdown structure.

So I’m categorizing what makes a (Drupal) site into six components:

  1. Wrapping components: Header and Footer.
    These are the components that provide your site with a wrapper for all your next components. Start with these as soon as you install Drupal; it will help you get through the easy stuff that makes up your site.
     
  2. Global components: Page title, Breadcrumbs, Tabs (a.k.a menu local tasks), System messages ...etc.
    These are the components that make up the uniformity of a CMS. These are your next target.
     
  3. Site-unified components: Ad blocks, Newsletter subscribe block, Social media feeds or “follow us” blocks, Static “about us” block ..etc.
    These are the components that most likely appear in the same style across multiple pages in the site.
     
  4. Full nodes and entities: Your “Full content” node/user/entity pages.
    Getting back to “content-out” approach, always start with the full-node or entities completion.
     
  5. Views, view modes, and other content: Views of recent content, Featured content, Node pages, Feeds integration, CRM integration, Single Sign On integration, ...etc.
    This is the major work; components that define your site.
     
  6. The annoying 20% of the site: This is where the built 80% of your site gets the final hidden work, iterative tweaking and enhancements to your site, whether it is requested by your QA team, the client, or the product owner.

In light of this breakdown of CMS’s categories, here’s an animated illustration of how a site can be made possible when following the flow of development based on the components above:

The Standard Drupal Work Breakdown Structure - Animated

In this order, you can now think of a Drupal site to be developed according the following steps:

Initialization Work Breakdown Structure

  1. Delivering “1. Wrapping components”

    1. Install Drupal (or the distribution you want to use), setup the development environment ..etc.

    2. Populate the things that make up the “Wrapping components”: Menus, logo, search ..etc.

    3. Create your theme, and theme the “Wrapping components”

  2. Delivering “2. Global components”

    1. Just populate then and theme them.

  3. Delivering “3. Site-unified components”

    1. Create and populate the things that make up your “site-unified components”

    2. Theme them

Project’s Epics Work Breakdown Structure

  1. Outline your content types starting from the “Full node” view modes. Identify other view modes for your content types. Start creating those into “Tasks”

  2. Do the same for other Drupal entities: Entities, Files, Comments ..etc.

  3. Deliver “4. Full nodes and entities”

  4. Deliver “5. Views, view modes, and other content”

  5. Deliver “6. The annoying 20% of the site”

Finalization Work Breakdown Structure

  1. Final overall testing

  2. SEO, Printability, Performance, Security, and Accessibility tuning and configuration

  3. Your pre-launch checklists

  4. Go live!

FREEBIE: The Standard Drupal Work Breakdown Structure Template

Our Standard Drupal Work Breakdown Structure Template provides an outline of these phases and detailed tasks to be done that we use for every Drupal project. This template is made to be easily imported to JIRA. It contains:

  • a master sheet that aggregates the standard epics, tasks and stories to be easily imported to JIRA.

  • a sheet for defining the project’s own epics and stories

  • the standard Initialization and Finalization work breakdown structure that must not be missed for any project

All of this helps to reduce discrepancies in developing each project, not to miss important tasks and also allows our team to deliver a project fast, and incrementally (delivering in the first week of development).

Using The Template

The template is a Google Spreadsheet that you can easily clone and customize. To do so:

  1. Open the sheet and copy it to make it yours.

  2. Feel free to edit the sheet to make it your own. There are some instructions on how to use the sheet to make it yours.

  3. Follow the instructions on what to edit. We recommend that the “Initialization WBS” and the “Finalization WBS” stay intact (you can edit them once to your standard flow, then replicate for all projects).

  4. For each project, you will want to copy your template to customize the “Project’s Epics WBS” as per the project. The template has some samples for you to consider.

  5. Once done, export the “Master WBS” sheet to CSV. So you can import to your JIRA project.

  6. Map fields to your JIRA. See sample [image to illustrate mapping]

  7. That’s it!

Conclusion

Two things have helped us to standardize our work process when developing a Drupal site, and insure consistency and quality:

  1. Starting a project by finishing up components-first approach, not page-first approach.

  2. Documenting our recurring tasks and processes in a Template that uses this approach. This template makes applying this process easier for you.

Next time you start a Drupal project, consider this approach and let us know how this would help you in the comments section below.

Note: This does not depend on a specific Drupal version, this methodology works with Drupal 6, 7 or 8. It depends on Drupal’s conceptual building approach.

Mar 20 2016
Mar 20
Recommendations How to Make Drupal Editor Friendly. Uber Publisher for Editor-Friendly Drupal Experience How to Make Drupal Editor Friendly?

Designing and developing a website, one can focus a lot on its front-end to build a smooth experience for site visitors; but this is just a tip of the iceberg. When someone is reading or watching the content, there should be someone who uploads and edits it. So what about the smooth experience of these guys? The most potent reason why sometimes an easy CMS like WordPress wins over Drupal is probably because it is more friendly and less intimidating to the content editors. And Drupal as a CMS that is manned by a dedicated community of developers is undoubtedly a ‘Developer Oriented’ platform. A quick conclusion: for a Drupal developer, it is vital to ensure that Drupal is convenient to use. But during the entire process of site development, somewhere down the line, the editor experience is missed.

Fortunately you can ensure to make a Drupal website editor friendly. In this article you'll find some tips that can help you with this.

1.     Choosing an Editor Friendly Admin Theme

The ‘much-desired’ Seven Admin Theme, used out of the box in Drupal 7, was introduced a long time ago. But as the time proceeded, the smartphone industry witnessed a phenomenal growth, directly influencing a huge share of the web traffic. Needless to say - this is the reason webmasters today want to administer their Drupal sites through different screens (be it a tablet, smartphone or an iPad). A responsive admin theme is the need of the hour.

The ability to edit and administer the site over the web from any location and device is indeed great. Therefore, choosing an editor friendly admin tool is a valid decision. One of the most popular Administration themes available for Drupal is Adminimal. Adminimal provides a responsive layout, easy-to-use modern design, has neat form UI elements, streamlines the arrangement of content through detailed columns and blocks and improves navigation with the help of Adminimal Menu submodule.

Adminimal - Responsive Administration Theme (Drupal 8 ready!)

One of the coolest features that we like about using Adminimal is that it's neat, has good contrast and colors, and renders the elements of Drupal's backend in a legible and convenient manner, which editors love.

2.     Choosing a (Mobile) Friendly Admin Bar

Along with an editor friendly admin theme, your Drupal website also needs a ‘mobile-friendly’ admin bar. I would recommend something as versatile and powerful as Navbar admin bar. Earlier regarded as ‘Mobile Friendly Navigation Toolbar’, Navbar brings a very simple navigation toolbar to practice. Way back in the year 2012, when Navbar was first developed as a part of the Spark Project, it came in rescue to counter some mobile editing problems with the Drupal 7 toolbar. At that time, the shipped toolbar with Drupal 7 was not very convenient and friendly to the small screen devices.

A simple mobile friendly navigation toolbar that solves mobile editing problems

With the Navbar Admin bar, you can see a bar containing all the top-level administrative components on the top of the screen. The bar also displays the links provided by other modules, such as the links of core Shortcut modules, Responsive Preview Module and so on. Apart from providing the required responsive solutions, the vertical orientation of Navbar is highly regarded for helping the deep-level access to the administrative functions. For this, you don’t even have to refresh the page!

The Navbar module is also available in Drupal 8 core.

3.     Using The ‘Shortcuts’ Wisely

For all the content editors, using the Shortcut menu is nothing but a great option. The dynamic toolbar on the top of the page that is provided by the Shortcut module helps the editors to add links. A site-wide toolbar, Shortcut module can add the most used links to the bar (making it visible to the users who are permitted to access Shortcut toolbar). If an editor is using Shortcuts wisely, then they can easily create links to the most commonly used pages of the site. Organizing multiple links with the help of shortcuts is quite convenient with this module.

You can also use the Shortcut bar along with the 'Shortcut per Role' module for a dynamic experience. The module works on a simple functionality, as it assigns different shortcut-sets on the basis of some roles. For using this module, having core shortcut module is mandatory. Using something like this with proper shortcuts, is surely going to help editors experience a friendly Drupal.

 

4.       Consider Field Groups for Keeping Forms in Structure

It is unusable to use long undocumented forms for the content editor. So what are the ways in which you can fix this? Well, while building a website with Drupal, make sure to use the 'Field Group' module. The purpose of this module is to group different fields together. For instance, if you have an event, you can separate from each other venue fields, date (starting and end dates) and basic information (title, description, and main image) in different groups . The categorization of fields has to be considered for what makes sense to the types of data and information your editors will be using.

Field Group groups fields together in Drupal

The module comes with a default HTML wrapper to group fields together. The HTML wrappers are vertical tabs, horizontal tabs, accordions, fieldsets and div wrappers. Use Field Group module for node entry forms to make the forms well-structured with the right amount of information displayed.

5.       Use an Enhanced Dashboard That Gives The End User: Total Control

By creating a default panel page with useful administration tools, the Total Control Admin Dashboard provides a much better aggregation of site’s function in friendly and customizable dashboard. Using Views and Panels, the dashboard works for the purpose of creating a ‘central location unit’ of the entire site. The dashboard also includes several panes for site stats and quick references. Each view panel pane in The Total Control is customizable through the pane settings. Don’t forget to edit the dashboard to provide tailored experience for your site editors.
 

6.       Use Strings Overrides to Make Drupalized Terminology Become More Familiar

Sometimes, Drupal uses unfamiliar jargon that makes things confusing to the editor - if you’ve never worked with Drupal before, you probably don’t know terms like Nodequeue, Taxonomy, Fieldable Panel Panes, etc. So what to do? Switch to String Overrides that provides the easiest and quickest way to replace any text that passes through t() on the site. String Overrides allows the editor to override strings in any language, providing locale support in a convenient way.

Drupal module that provides a quick and easy way to replace any text on the site

As site builders, we must think about the editors of the website as somebody non-tech savvy people, thus, rewording these terms in a layman approach. For instance, you can use the module “String Overrides” to change Drupal jargon to more universal terms such as:

Example 1: Nodequeue to Content queue and Nodequeues to Content queues

Example 2: Taxonomy to Categories and Vocabulary to Category.

Vardot Conclusion

There are several necessary steps that a Drupal developer must consider to make the site friendly for the content editors, and as I explained in the beginning of the blog post, do think about the content editors as one of the most important users to your site. As a site builder, the content editor’s experience is entirely dependent on you.

While this is just the beginning of the discussion, I will surely get back to you with more tips and suggestions to make Drupal friendlier. And as always I'd appreciate your ideas! Meanwhile, have a look at this distribution 'Uber Publisher' to witness for yourself our takes on an optimized and editor-friendly Drupal experience. Now this is something that can certainly change the way content is curated with Drupal. Uber Publisher is a distribution built by Vardot on Drupal. It’s built through a tight-knit set of modules and configurations to provide powerful content management solution. It also helps different content functions like layout management, custom workflow, content featuring, and others.

Jan 11 2016
Jan 11

The mission was to build an SEO-optimized, high-performance university portal that could handle a large number of pages and a high volume of traffic. In addition, the site needed to be mobile enhanced with a responsive layout, integrated with an external authentication system, provide advanced search capabilities to help structure and organize over 800 publications within the website, and finally to have a flexible layout manager to help manage the website easily and place events and news content on different pages of the website.

Vardot built a university portal that was user friendly and accessible for all web audiences, including current students, faculty, prospective students, alumni, parents, employees and researchers. After conducting an extensive audit of the old website, Vardot traveled to the Qatar campus to meet and interview various members of the GU-Q community including teaching faculty, administrative staff, students and other website users. While in Qatar, workshops were conducted during the week to better understand the needs of each audience segment. Afterwards an information architecture strategy was developed for the design of the new website, which enabled Vardot to provide a better experience for the different user segments of the website. Students and parents were provided a far quicker way to find relevant information on the website through dedicated pages for their needs, and an extensive mega-menu that was created to help users navigate through a broad range of content quickly.

An employee microsite was created for the internal audience which can be accessed using a Single Sign-On ID integrated with an external identity solution through the Shibboleth Drupal Login Handler which allows users to securely sign-in with their GU-Q ID, from any device.

The Biblio module was integrated for managing publications on the website, and GU-Q social media and YouTube channels were integrated into the website to pull the latest videos and social posts to the front page and other sections. News and calendar events were aggregated from the website and embedded into the Georgetown Mobile app. Both public events and academic calendars on the website were equipped with the ability to be added and synchronized with the user’s personal calendar through iCal feeds.

A flexible drag-and-drop layout manager was also built into this project, making the process of updating and adding content a simple task that can be completed by people with minimal technical background in minutes. In addition to that, more than 20 pre-loaded page layouts are also available and can be applied to pages and for all content types. The site is also optimized for all screen sizes, all modern-browsers, and all mobile operating systems.

GU-Q Faculty and Current Students

Site wide search functions make all content easily discoverable. In the publication section you can look up any paper by name, type, conference, year, or tag. Similarly, expert profiles in the website can be searched by language, expertise, country, and name. News can be filtered by category or easily embedded on the homepage with a single click.

Performance for the site was tremendously improved on Drupal 7. Varnish was integrated for better caching, and the university home page with a lot of images and content loads extremely fast. SEO optimizations helped with the discoverability of the site and the user experience for viewers: both the time-on-site and page view count have increased significantly with the new site. All of this helped rank the new GU-Q website higher, helping the campus in Qatar attract new students and employee talents while better serving their existing community of students, faculty and the general public.

Users may visit the completed sites at:
English: http://qatar.sfs.georgetown.edu/
Arabic: http://qatar.sfs.georgetown.edu/ar
Center Microsite English: http://cirs.georgetown.edu/
Center Microsite Arabic: http://cirs.georgetown.edu/ar

Contact Vardot

Aug 15 2013
Aug 15
Views Grid Style Format with Bootstrap: Photo sizes Photo sizes used in web design

You probably used the Views' famous Grid Style Format to easily output items in a grid. You also probably noted that the Grid Style Format uses tables, which is not responsive, and is does not play well with Twitter's Bootstrap UI library.

Here's a quick hack override to make your favorite Grid Style Format, responsive and play well without any need for extra CSS.


What is the trick?

Easy! The whole purpose is to replace the html tags in views-view-grid.tpl.php to us <div> instead of <table>, and Bootstrap's grid instead of <tr> and <td>.


How this is done?

  1. Override views-view-grid.tpl.php in your theme with the code below.
  2. Make sure you choose the Grid Style Format from your view format settings.
<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print $class; ?>"<?php print $attributes; ?>>
  <?php if (!empty($caption)) : ?>
    <caption><?php print $caption; ?></caption>
  <?php endif; ?>

  <div>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $columns_count = count($columns);
        $span_number = round(12 / $columns_count);
       ?>
      <div <?php if ($row_classes[$row_number]) { print 'class="row-fluid ' . $row_classes[$row_number] .'"';  } ?>>
        <?php foreach ($columns as $column_number => $item): ?>
          <div <?php if ($column_classes[$row_number][$column_number]) { print 'class="span' . $span_number . ' ' . $column_classes[$row_number][$column_number] .'"';  } ?>>
            <?php print $item; ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
  </div>
</div>

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web