Exemplifi
12 reviews
Exemplifi
12 reviews
Read more
WEB DEVELOPMENT
GRAPHIC DESIGN
CREATIVE STRATEGY
EXPERIENTIAL MARKETING
Save to favorites
Dec 22, 2022
Why Do Government Websites Need A Redesign With Modern Standards?
Website is the flag bearer of every brand in the digital world. A website is responsible for representing the brand’s values and ideals and is used to form a connection with the consumer base or visitors. In the modern digital world, you will come across a vibrant range of websites that ooze with creativity, visuals, fun integrations, and layouts. The digital revolution has ushered a new era of website development which wasn’t possible before.But unfortunately, a few websites need to catch up on modern trends, mostly official government websites. It’s fair to say that keeping a constant eye on their website is the least of all concerns for a government wing. Still, when your website is supposed to instill deep reliability among the population, it shouldn’t be overlooked.There are plenty of factors to opt for a government website redesign, with aesthetic appeal and technical performance being the most important. These factors affect the overall user experience and help them positively perceive the government.Problems With Government WebsitesBut before we learn how to design a government website, we must learn WHY a government website needs a redesign. After completing a government website analysis, one would come across numerous issues that negatively affect the user experience. It could be either down to an unimpressive design or technical performance like page speed or website weight.Some of the most common concerns of a government website are such as:Straight off the bat, the most common problem with a government website is that it is too bland to look at. You might notice a need for a more cohesive structure and clean layout by how cluttered the onsite content is aligned. The website doesn’t contain that overall aesthetic appeal that would leave the user having a positive experience while scrolling the website. The lack of aesthetic appeal is down to not using the right colors representing the brand or a confusing layout that might overwhelm any visitor.The biggest complaint about a government website is that the content barely gets regular updates. It’s not surprising to find information uploaded nearly a decade ago still up on the website. This could cause confusion among the public, who are trying to find some vital information, and negatively paint the government office. It is necessary that the website content is updated regularly as it forms an essential trust factor among the users.Another case that arises from the lack of maintenance of government websites is that they start to show technical issues like slow speed, broken links, and miscellaneous errors. Search engines like Google constantly roll out new updates that prompt web developers to follow suit and accordingly make website changes. However, this is not the case with government websites as they rarely go through regular maintenance; thus, they start having technical errors in the long run. These technical issues can be eliminated by opting for SEO-related practices that optimize the website according to the search engine algorithm.One of the primary issues with government websites is that they are more government official-centric than people-centric. They are developed keeping in mind that they are to be used primarily by government officers. By not taking a more public-centric approach to layout and navigation, the website could be more apparent to the general public, where searching for even a tiny amount of information could be time-consuming. It is crucial for websites, especially government websites, to maintain a clean and minimalistic layout to provide easy navigation for the users.Tips To Redesign A Government WebsiteWhile opting for a government website redesign, you might wonder where to start and what to prioritize. Just what exactly needs to be done to modernize a government website to create a positive user experience? Let us elucidate each critical tip to consider while revamping a government website.Colors are the ultimate representation of a brand identity. Government websites make the mistake of keeping their layout with dull and plain colors that don’t necessarily create an aesthetic appeal. For a specific government office or service website, one should represent the appropriate colors that ultimately define the office’s identity. The right colors on the right webpage always make a soothing impression on every visitor who comes across it. Not only that but colors are also the utmost representation of trust & reliability that every government website should yearn for.The technical performance of a website is down to plenty of factors. The main focus of a website’s performance is down to its page load speed. People like fast websites; it positively affects the user experience and could be frustrating. For government websites, slow page speed could jeopardize the process if a user is trying to commute for some official documentation or other kinds of services. Page load speed is down to the website being too heavy on content or documentation that needs to be optimized accordingly. To improve the overall technical performance of a government website, it is recommended to opt for SEO (Search Engine Optimization) practices that help optimize a website to perform best according to the search engine algorithm.A website either contains content or images. One of the worst early mistakes made during a government website development is uploading images in their default file type and size. Images files take longer to load on the browser, and heavy files could affect the page load speed, thus affecting the overall performance. It is crucial that each image is resized to optimal dimensions before they are uploaded on the website. Larger image files should always be compressed to small sizes in formats like JPG or PNG. Compressing is essential as images must always be small enough to improve the technical performance but good enough to retain the quality.The best-looking websites are different from the ones that are overflowing with an unnecessary layout but are those that keep their structure simple and minimalistic. Government websites are usually cluttered with content and design, making navigation extremely confusing and time-consuming for users. Each government website must maintain a simple and clean layout that makes navigation easy and fast for the user. When a user is searching for a particular piece of information, the website must always provide them with easy and quick navigation to the desired location they are looking for.Broken links or 404 errors are hyperlinks that end up dead due to a relocation of address or an invalid URL. Another case of lack of maintenance is broken links are more common on government websites. That is because while updating a piece of information or service on the website, they overlook replacing the previous URL with the new one, thus resulting in a dead hyperlink. Broken links affect the website’s performance and, more importantly, must be clarified for the users. Nowadays, the internet is full of prominent software tools that help detect each broken link on a website and eliminate them permanently.During the earlier stages of a government website development, they are created to only be accessible on a single device or system, like a desktop browser. But the advancement of technology has made the internet accessible to many devices, mainly mobile phones. Mobile phones consist of 59% of overall internet traffic among all devices. Optimizing a website is one of the most widely implemented modern digital trends that each brand makes confident of. Unfortunately, government websites overlook the importance of being mobile optimized; therefore, their performance is significantly degraded on mobile phones or other devices. One of the most people-centric steps for the government office is optimizing its website for an ideal mobile version, as it will likely receive most of its traffic on mobile devices.Revamp Any Government Website To Modern Standards With Exemplifi!The days of boring government websites are long gone; the digital revolution has shown new innovative ways for brand website development, and government websites can be included!At Exemplifi, we offer our clients end-to-end website development and redesign services where we help develop a visually-excellent website with optimal performance that represents the best of our client and help them improve their consumer relationship. We have long-term professional expertise in building websites for brands in different industry sectors.Exemplifi can help paint your government website in a limelight that was never possible before! Our experts will perfectly idealize your requirements and user base to help develop a website that can land the utmost reliability of trust among your users. We will create a website that is fast, accessible, SEO-friendly, mobile-optimized, and cost-effective and that is not only up to date with modern standards but YOUR standards as well.Contact our team today and learn how we can help you design the ideal website for you!Originally published at https://www.exemplifi.io.
Read moreAug 9, 2022
A Step-by-Step Tutorial to Customize Drupal SearchAPI Facets without AJAX
Drupal SearchAPI Facets is a powerful module for Drupal 8 that allows you to create a dynamic, faceted search with just a few clicks. In this tutorial, we will show you how to customize Drupal SearchAPI Facets without AJAX. It’s also going to guide readers through the process of customizing Drupal’s SearchAPI facets and will introduce some new techniques (hacks) for tweaking Facet items through Drupal/Facets API, Twig templating, and JavaScript.We will start by exploring the default Drupal SearchAPI Facets configuration and behavior, then go over how to customize the facets, and finally, we will explore some absorbing ways of customizing it through JavaScript.How to create SearchAPI Facets in 5 MinutesDrupal SearchAPI Facets are used to provide search results in the form of facets. Some of the most common reasons for using faceted search are:It can be used to segment results into different categories, such as price and availability.It can be used to find specific items within a category or subcategory.It can be used for filtering content by date, author, or other criteria.It can also be used for sorting and ranking content based on popularity and relevance.Offering a rich array of options, a Faceted search can enhance the entire user search experience and is a great way to let users narrow down their search results. For the sake of simplicity, we’ve set up our instance to use the default search provider service in Search API. For production sites, Apache Solr is recommended. Beginning with:Hop over to the View tab and manually build the index if it’s still pending. The SearchAPI is now ready to accept Faceted search which we will configure on the Facets configuration page. Before that, there is one more missing piece of the puzzle — A View that works on the SearchAPI Index. A View acts as a proxy between exposed Facets and fetching search results from the SearchAPI index.Customizing the Drupal SearchAPI Facets with JavaScriptInformally this is quite the opposite of what SearchAPI and FacetAPI offer out-of-the-box. A Google search on “AJAX with Facets”, or “Post request with Facet” is sure to surprise you. You’ll find dozens of active discussions among Drupal developers to implement AJAX in Facets.Incidentally, FacetAPI defaults to a URL processor that works over GET requests, which makes a lot of sense when building progressive search results ie. one facet is always dependent on the other. The limitations of “GET” requests (8 KB approx), and the complexity of AJAX POST requests coil up these feature requests ending up with numerous patches which are risky and not production-ready yet.These are a few of the feature implementations that were made possible:Prevent page reload on Facet selection (requires storage on the client-side = sessionStorage)Maintain a stack of selected and removed facets.Allow users to select multiple facets and submit them simultaneously (risky and unpredictable).Clear out storage (sessionStorage) for each Facet, or all of them altogether.Making changes to default Drupal JavaScript behavior is next. This was done with a bit of JavaScript as the Facets module binds a JavaScript event on facet items on click and on change events (depending on which widget type you select).FYI Reynolds is the namespace under which we’re wrapping up all the functions, yeah, there could be another way of putting this using Drupal.behaviors which is the right way to do it. Anyhow, it works, and there’s more explaining of what each of the functions would do. So let’s dive into them:Reynolds.facetStorageSetOrCreate(); creates an empty storage or returns itReynolds.findFacetByKey(facetKey) would find a facet by its key or idReynolds.removeFacetByKey(facetKey); would remove a facet from storage_.set(Reynolds.facetsData, facetKey, facetIdent); will merge storage entries JSON object using underscore.jsFor this to work, you’ll also need a Facet hook function in your .theme file:This additional step just adds some data attributes for our reference in JavaScript.These helper functions control the click behavior with additional checks like does a facet exists or does the sessionStorage exists, and consequently the removal of a facet item based on its key. Now comes the submission part — as we’ve maintained the selections in the sessionStorage JSON object it’s relatively easy to form a submit query:Finally, this little snippet gathers all the selected facets, converts them into proper valid facet query parameters, and redirects to the current path with query parameters. To simplify just call the Reynolds.hookFacetSubmit(); function on the page ready or window load event and you’re all set.What about Facet summaries?Most of the time, you’ll need to show your selected facets as summaries and/or allow users to remove them for convenience. This will also require some JavaScript, which is easier with the functionality that is already implemented. All you need is to handle the click event on summaries as below:And call the function Reynolds.hookFacetSummaryRemoval(); on page load or window load event. It’s not the most robust or comprehensive solution, yet gets you closer to customizing facets without using AJAX. On an endnote, you’re not restricted to this approach, it might strike as a starting point for a full AJAX implementation. A live implementation can be found here:https://www.reynoldsbrands.com/recipesIf you’d like to get the code for the scripts involved please feel free to contact us at exemplifi.io and follow us on LinkedIn and Facebook.Originally published at https://www.exemplifi.io.
Read moreAug 3, 2022
Launching a Multilingual Site on Webflow with Weglot
In an earlier post, we elaborated on the various approaches that we evaluated to launch an internationalized site on Webflow. We described how we settled on the final approach of using Weglot. In this post, we will delve into the details of how to configure Weglot and elaborate on some tricky aspects of launching the website with it.Getting started with WeglotAfter you purchase the Weglot pricing package that is best for your needs (it is generally based on the number of words you need to get translated), you will be guided through the setup process. Generally speaking, you have two options: Javascript and Subdomains. For Javascript, it is a quick and easy integration — simply copy-paste a short Javascript code in your website and it takes 5 minutes to install and doesn’t require any coding knowledge. For subdomains, your translated pages will be on subdomains (like fr.mysite.com). It can take 15 minutes to install and requires you to add DNS record entries. This integration is better for SEO as you have a dedicated URL for each language.In our project, we selected an advanced approach that was a hybrid of “Javascript” and “Subdomains”. In particular, the customer wanted a subfolder approach rather than subdomains. They didn’t want domains like fr.moloco.com or zh.moloco.com. Rather they wanted folders like moloco.com/fr or moloco.com/zh. To achieve this, we had to leverage a new capability of Weglot. An important note: The subfolder approach works only for the real domain, and not the free domain provided by Webflow for the development environment. So, to test the folders, you have to configure Weglot to point to the Webflow environment.These steps are outlined below. First, create a project:Click on Use Javascript IntegrationThan add your languagesAfter you are done, copy the JS code and paste into your website header.Immediately, you can start seeing the Weglot language switcher on the bottom left (which is the default design).Implementing Translations in WeglotClick on the “Translations” tab and you’ll see all the languages that you selected during setup. Here you will also see the number of translated words for each language.In the URLs Tab, you can find a complete list of pages for your website. Should you notice that any particular pages are missing, you can manually add them.Go to the bottom of the page and click on the Missing URL link.It will scan your website again and provide you a list of page URLs which haven’t been added.You can also select URLs and add to the translation.To manually add a URL to the translations:In the browser, go to your website and open the URL that is not translatedChange languages from the weglot language switcher at the page bottomGo back to the URL tab in Weglot and search for this URLIt will now show upA few other features in Weglot:Glossary: If you want to exclude some branded words from translations, you can use the Glossary option. We can set up based on language as well.Dynamic Elements: Sometimes weglot can’t detect a few blocks or dynamic elements for translation so this can help us to translate using css selectors.Custom Designing your Language SwitcherThe customer wanted to customize the language switcher to make it look like below:To achieve this, we had to first configure the JS as shown below:As you can see, there are several options available:Customize the display language name, flag..etcCreate custom css to implement based on our unique designWe can also update language switcher appearance such as language name changes, flag changes…etcAdditional design options are shown below:Below is the custom CSS that we designed for the language switcher design:When the site is ready to launch, you can start these activities. The first set of activities is on the Weglot side:Change the main domain URL to point to the real website URL and make sure to select “subdirectories” as an option.At this point, you will get two suggested CNAME records. In the next section, we will show you how to setup these up in your domain registrar. When that is done, you will get a green checkbox indicating that the setup is working fine.When you are done, the final step looks like this:From the domain registrar side, you have to add the two CNAME records that you got from Weglot as shown below:Note: W e have to replace webflow www CNAME record in Domain registrar with weglot www CNAME so weglot will take care of www redirect.Important Hreflang Checks and Webflow Canonical URL SettingsWhen launching a multilingual site, we have to be very careful on the SEO front because Google can easily consider the content to be duplicates and downgrade your site’s SEO ranking.There are two things to do to avoid this: Setup Canonical URLs correctly in Webflow and also do Hreflang checks on Weglot.To setup the Canonical URLs, go to the SEO settings tab in Webflow and establish the Global Canonical URL:To make sure the Hreflang settings are working properly, use the https://www.hreflangs.com/ tool as shown below.SummaryBuilding multilingual sites is the need of the hour if you want to showcase your business to a diverse audience base. In this article, we’ve highlighted how you can simplify the task of setting up a multilingual website using the Weglot addon for Webflow. With Weglot, we were able to provide our client the multilingual solution they needed and at the same time enhance customer experience for users of their website.In case you missed it, here is the 1st part of our series on Launching a Multilingual site on WebflowIf you liked this insight and want more updates, we’d love for you to join us on Linkedin at Exemplifi, Facebook at ExemplifiSites or Twitter at ExemplifiSites.Originally published at https://www.exemplifi.io.
Read moreAug 3, 2022
Simultaneous Development in a Single Webflow Website
One of the biggest problem that plagues Webflow developers is not being able to have multiple team members work in real time on their Webflow builds. Here is our solution to help solve it.The Challenge with Simultaneous Development in WebflowAs a developer of enterprise websites, we work with mid to large enterprises to build their websites rapidly. We started work with a client that had purchased the Enterprise License Plan of Webflow. The objective was to rebuild their redesigned website within 6–8 weeks. This necessitated a large development effort that comprised the following team:2 Front-End Architects2 Back-End Developers1 QA1 DevOps and SEO-Focused Engineer1 Project ManagerWith such a large team, it was imperative that the development team be able to work and build things simultaneously within the Webflow development environment. However, this is not feasible in Webflow currently due to their product constraints.When the first developer logs into the environment as a designer, they are able to work without constraints.However, when the next developer logs into the environment, they are severely constrained and will not be able to do any parallel development. They are limited to only editing content.This causes a huge bottleneck whereby only one developer is productive at any point in time. This would mean that the project timeline would be stretched out by at least three-fold. Clearly this was unacceptable to the client and would have a massive impact on the project margins as well.Our Process-Based SolutionTo circumvent the Webflow product constraints, we came up with a process-based solution.Setting up the multiple environmentsThe first step was to create a unique environment for each developer on the team, while designating a particular instance as the main stage environment. See image belowAs you can see, there are several instances named after the developers (Sai, Venkat, Sridhar etc). The “EN instance was designated to be the primary staging environment. Fortunately, the client had purchased the Enterprise Webflow License, so there were no additional costs to procuring these multiple development environments.The Development and QA WorkflowDuring the day, each developer would work on their “local instance” as described earlier. There would be one developer however, that would work on the main staging environment — depending upon the criticality of the tasks for the day. (More on this later) Simultaneously, a content editor would also be able to work on the main staging environment, because Webflow permits this.At the end of the work day, we would execute the following steps:We take a backup of the main environmentEach developer manually merges their work for the day into the main environment. This would be done sequentially, so as to avoid code conflicts.The exact details of the merges (styles, assets, pages, symbols, collection entries etc) are dealt with in the next section.After the merges are completed, we would publish to the domainsThe QA team would then be able to start testing them.At the beginning of the next day, we would execute the following steps (see image below):Take backups of each local instanceDuplicate the main environment into the local instance (thereby overriding the entirety of the local instance) This step ensures that each local instance gets the entirety of the work done the previous day.https://enterprise.exemplifi.io/3KCwsUpThis workflow succeeded in achieving the following objectives:Every developer was fully productive during the work dayThere was a marginal overhead (1 hour per developer per day) involving in merging codeThe QA team was productive because they worked with daily code pushesThe DevOps team was able to execute this workflow with All bottlenecks were removedDetailed Workflow for Managing Specific Webflow ComponentsStyles: Creating New and Editing themThe Style panel, located in the Designer, is where you can control and style every element in your project. Whether you want to change an element’s layout, background color, or typography — you can do it all in the Style panel.For example in local instance, the above screenshot Bg-Blue-Dark class is being applied for background color and PY-6o is for padding-top and bottomTo merge this section in to the main Development instance we have to right click on the particular element or section and click on copy like in the below screenshotSymbols: Creating New and Editing themSymbols allow you to turn elements and their child elements into a reusable layout — update and edit Symbols in a single place to avoid revising each recurring layout individually.For example, there is a number counter section a user might want to use in different places with a different textWhen a user right clicks on the particular element/section you will get an option to create a symbol as shown in below screenshotTo make a symbol with overridable fields, the user has to right click on gear/settings icon on right side of the designer panel and click on link to text field like shown in below screenshotTo merge Symbol in to the main Development instance we have to right click on the particular element or section and click on copyNote: Symbols can’t be migrated to main/dev instance, though if we copy it as symbol it won’t be copied as symbol, it will unlink and migrated as normal element/symbolWhile merging the Symbols though it will be unlinked into the main/dev instance, we have to watch out on duplicate classes. In this case, we have to delete the duplicate class and assign the right class to it.Pages: Creating New and Editing themThe Pages panel shows you the structure of your website: the pages and folders that house these pages. Here, you can perform a variety of operations such as creating and organizing pages and folders and changing page settings.Developer creates a new page in the Pages panel by clicking the Create new page icon and organizes the structure by placing sections/symbols/elements.Developer has an option to create folders and put pages under it, for example products and solutions folders as shown in the below screenshotCollection EntriesCollection items are database records in a Collection, like a single blog post, an author, or a product.While migrating the collection list from the local instance to the main, the dynamic data tends to unbind. This can be a very time consuming process to redo again and again. Hence the developer creates the collection entries directly in the main instance which helps save valuable team effort.When a collection list is created in Webflow, for example Blogs ( screenshot below ) , it locks the source list. If we want to add more items to the list, we would need to first unbind the list and create a new one for re-usability.Assets: Creating New and Editing themUpload and manage all your website’s assets in the Webflow Designer.When the developer copies any symbol/element from the local to the main instance, all of the assets are automatically copied over aswell. Which saves a lot of time.We can then easily create folders and organsie the asset library.SummaryFor teams to simultaneously work on Webflow can be tricky. In this article we have shared our strategy and solution for large teams to collaboratively develop a Webflow website incorporating styles, collections, symbol, pages and assets. What would earlier be a sequential process of development can now be a converted in a parallel development model on Webflow allowing for real time collaboration.Originally published at https://www.exemplifi.io.
Read moreAug 3, 2022
A Webflow Widget to Display, Filter and Style Data from Multiple Collections
IntroductionWebflow is one of the most popular website builders that helps companies create a stunning digital presence with ease and minimal technical efforts. They are spearheading the no-code movement and as a Webflow partner, we work closely with Webflow to help enhance and grow the experience for users that use the platform. One of our clients wanted a webflow widget to help solve the problem of filtering and displaying displaying data from multiple collections. Here’s how we did it.The Client ProblemThe client needed a section that looked like below:This section had the following functionality:It pulls data from four different collections: Blogs, R&D, Case Studies and EventsWe then filter by a flag called “Featured” on each of these collectionsFinally, we sort the data — latest first — and display the Featured content across all these four collections.To support this, we modeled all the collections in Webflow:At this stage, we ran into several limitations within the Webflow platform that prevented us from building the section as described above. In the next section, we elaborate on these limitations.Webflow LimitationsThe core challenge with Webflow is that a “Collections List” widget can connect to only a single collection.What this means is that at the outset, it is not possible to create a Collection List that gathers data from all the four collections: Blogs, R&D, Case Studies and Events.For a single collection, we can apply filter such as “Featured Flag is On”However, we are still limited because we cannot get data from all collections and then filter them in a single go.Our Solution OverviewTo achieve our client objectives and circumvent the Webflow limitations, we designed a solution that did the following:Made API calls to and got the data from all the four collectionsLeveraged a VueJS based front-end solution to filter and sort this dataApplied the desired styling within VueWrapped all of this functionality and incorporated into a Webflow Symbol that could be reused by the client.The high-level architecture is shown below:Solution Details : Getting data from the Webflow Collections APIVue AppThe first step is to initialize a basic VueJS app. Then we instantiate the needed methods to fetch data as well as format it.var app = new Vue({ el: '#app', data: { message: 'Multi Collection', items: [] }, methods: { }, created: function() { } })Connect with Webflow APIWe do not recommend calling the Webflow CMS APIs directly from Vue, as it is a frontend framework and this can result in security issues if we call the APIs directly. To circumvent this, we used Autocode — although you can do this in many different ways — which is an automated API management tool. (screenshot below)In Autocode we connected to the Webflow account and created a web service project that had several REST API endpoints for the four collections that we needed: Blogs, R&D, Case studies and Events.https://dev--moloco.moloco.autocode.gg/collections/case-studies/items https://dev--moloco.moloco.autocode.gg/collections/blogs/items https://dev--moloco.moloco.autocode.gg/collections/rnd-blogs/itemshttps://dev--moloco.moloco.autocode.gg/collections/events/itemsWhen this executes, the resulting JSON response from Autocode will look like this{ "items": [ { "_archived": false, "date-and-time": "2021-08-27T00:00:00.000Z", "_draft": false, "minutes": 5, "name": "How Moloco Tackles Geo-Bleed for Clean Traffic", "blog-content": "Blog Content", "slug": "challenges-in-building-a-scalable-demand-side-platform-dsp-service", "author-2": "62381b6b2e6e68341ff4e85b", "updated-on": "2022-04-08T16:31:05.570Z", "updated-by": "Person_5d5be36140c6be829583f93b", "created-on": "2022-03-31T19:03:43.814Z", "created-by": "Person_5d5be36140c6be829583f93b", "published-on": "2022-04-08T16:31:32.425Z", "published-by": "Person_5d5be36140c6be829583f93b", "tags": "6243de4de832b14b2974cde2", "featured": true, "_cid": "62381aa25031d414e4f8f46f", "_id": "6245fb0fc69ee9460661d7fa" } ], "count": 2, "limit": 100, "offset": 0, "total": 2 }On the Vue side, we now consume this content using an Axios call. One optimization that we did here was to consume all these APIs concurrently using the Promise library — this resulted in substantial performance improvements than consuming sequentially. Instead of making multiple HTTP requests individually, the axios.all( ) method lets us make multiple HTTP requests simultaneously.created: function() { let endpoints = [ 'https://exemplifi.dev.webflow/collections/case-studies/items/', 'https://exemplifi.dev.webflow/collections/blogs/items/', 'https://exemplifi.dev.webflow/collections/rnd-blogs/items/', ]; Promise.all(endpoints.map((endpoint) => axios.get(endpoint))).then( axios.spread((case_studies, blogs, rnd_blogs) => { this.getCaseStudies(case_studies.data); this.getBlogs(blogs.data); this.getRNDBlogs(rnd_blogs.data); }) ); }At this stage, we have accessed all the data from the four Webflow collections.Solution Details: Filtering Logic in VueVueJS FilteringThe next step is to filter data from all the four collections by the flag “Featured = True”. The method below iterates over the collection items, checks for Featured items and returns the filtered data.filteredItems: function(data) { data.items = data.items.filter((item) => { return (item.featured == true) }) return data; }VueJS SortingThe filtered items are then merged in a single global array and sorted by date. The following function will achieve this:sortItems: function(data) { data = data.sort((a, b) => b.date - a.date) return data; }At this point, we have filtered + sorted the data just as we need it. The final Vue object looks like below:[ { "name": "Organic Poaching", "image": "organicPoaching_bannerImage_0622.jpg", "author": "62381b6b2e6e68341ff4e85b", "id": "6246ee583d33fa25df189b40", "cid": "62381c01b6d9c8189c889bcf", "slug": "/case-studies/organic-poaching", "date":"2022-03-03T14:00:00.000Z" }, { "name": "Challenges in Building a Scalable Demand Side Platform (DSP) Service", "image": "Challenges%2520in%2520building%2520a%2520DSP.png", "author": "62381b6b2e6e68341ff4e85b", "id": "6245fb0fc69ee9460661d7fa", "cid": "62381aa25031d414e4f8f46f", "slug": "/r-d-blog/challenges-in-building-a-scalable-demand-side-platform-dsp-service", "date":"2022-03-05T14:00:00.000Z" } ]Solution Details: Widget Styling in VueNow that we have the data, the next step is to style it to look like below:To achieve this, the first step is to build a static widget in Webflow, using the styles that have already been built for the rest of the website project.Now inspect the resulting HTML structure and classes in the browser.Use this exact HTML structure + styles and integrate them in the Vue component template as shown below.The collection item array is then iterated over the div structure to render the grid of dynamic content.Solution Details: Wrapping everything into a Webflow SymbolThe final step is to integrate all of this work and package it as a Webflow Symbol. This will allow the client to reuse this on any page that they choose to create in the future.Integrate VueJs in WebflowTo Integrate VueJs and its features into wWbflow we need to add the following scripts in the header section of the site. Create an Embed HTMLThe next step is to leverage the “Embed Code” widget in Webflow. Create a basic page in webflow and insert the following embed code.As you can see, the external Vue app is packaged and accessed through an external urlhttps://cdn.jsdelivr.net/gh/Exemplifi/Webflow-widgets@e6be5c1eb895d34cd5abfc6f463332112f80b5c7/multi-collections.jsSave and publish the page. The page will now display the section as shown belowCreating A SymbolThe last step here is to convert this embed code widget into a symbol and save it in the library for future reuse.At this point you are ready! Just drag the symbol onto any page and see the section working!ConclusionAs a proud Webflow expert partner ,we hope this insight was of help to you. At Exemplifi, we believe in sharing our work with the broader Webflow developer community. You can access all of this code at https://github.com/Exemplifi/Webflow-widgets.git.If you liked this insight and want more updates, we’d love for you to join us on Linkedin at Exemplifi , Facebook at ExemplifiSites or Twitter at ExemplifiSites.Originally published at https://www.exemplifi.io.
Read moreAug 3, 2022
Launching a Multilingual Site on Webflow
In this post, we have elaborated on the various approaches that we evaluated to launch an internationalized site on Webflow. We have also described how we settled on the final approach (Weglot), and in a subsequent post, we have covered the implementation details for Weglot.Client NeedMoloco is a Pre-IPO tech firm based in Silicon Valley. It is also an international company and operates in Korea, Japan, and China. In preparation for their IPO, Moloco wanted to completely redesign and rebuild a multilingual website that will cater to the needs of their global stakeholders.Exemplifi was selected as Moloco’s website development partner, who helped them achieve this on the Webflow CMS platform. The resulting website is www.moloco.com. Exemplifi also ensured that the new site was internationalized for other languages — Korean, Japanese, and Chinese to be specific. You can visit these sites at www.moloco.com/ko, www.moloco.com/ja, and www.moloco.com/zh respectively.The Multilingual RequirementsOur client articulated the following requirements during our kick-off discussions:All static and dynamic page content had to be translated into regional languages.The recommended CMS platform was required to enable website admins to change images and other media assets uniquely for each site, and also allow them to control which pages or blog posts would be published for each site. For eg., Korea wanted only a few specific blogs from the main site based on the products that they sold in the country.The domain URLs had to be /ko /ja and /zh, instead of subdomains like ko.moloco.com, ja.moloco and zh.moloco.com to avoid SEO inefficiencies.Webflow Specific Approaches Considered by ExemplifiGiven these requirements, we identified three distinct approaches for the Webflow CMS:Create language-specific Webflow foldersDedicate unique Webflow instances to each languageUse a third-party product1st Approach: Create Language Specific Webflow FoldersIn this approach, we proposed to create Webflow folders for each language, and then duplicate the pages as shown in the image below:After copying the pages, we would manually translate the content for each of the pages. Based on the user’s language selection, we would then serve the content from those specific folders.Our rationale behind this approach was:Being very intuitive, this approach would allow content administrators for each language to simply navigate to the relevant folder and make their edits.All language-specific folders could be managed within a single Webflow instance and would not necessitate any additional costs to our customer.Any symbol created to power the pages would work across all the folders.However, when we attempted to implement this solution, we ran into a few challenges. We realized that all CMS collections (for blogs, news, articles, etc.) would need to be duplicated, and we would need to change the queries in language-specific templates to point to the Webflow collections unique to that language.Another concern with this approach was that we would quadruple the number of static pages on the Webflow instance. When we put it in numbers, we found out that the default English language site, alone, had around 60 static pages, which would become around 250 static pages after adding in the three languages, required by Moloco.This brought us to face one of Webflow’s fundamental limitations, where an instance is limited to only 100 static pages. Consequently, we realized that this would become a major bottleneck, and eventually prevented us from implementing this solution.2nd Approach: Dedicate unique Webflow instances to each languageForeseeing the risks in the first approach, we attempted to get around the static page limit (of 100 pages per instance) by considering a unique Webflow instance for each language.We had no doubt that this approach would scale beyond the three languages, and support as many countries as our client intended to expand to, in the future.However, upon further assessment, we identified a few risks with this approach as well:Webflow’s enterprise pricing is based on the number of instances we stage, and this would grow at least two to three times if we followed our approach. Our work culture would not allow us to put that extra cost burden on our client without a reasonable explanation.Another limitation was the content workflow. For example, if Moloco added a blog on the English language instance, they would have to manually copy this, or manually create it again within all the three other instances. There is no way to automatically replicate the collection content across instances. Unlike our first approach, where this is possible. This would add a huge overhead to the client’s content/marketing team.The final limitation that we ran into was that symbols could not be copied from one instance to another. So, when we tried to duplicate an instance, a lot of content such as collections, pages, and templates got copied over — however, symbols couldn’t be copied. This was a problem because we would have to unlink all of them, and relink them in the new instance, which defeats the purpose of symbols.Hence we decided to discard this approach too.3rd Approach: Using a Third-party Product (Weglot)As the next steps, we quickly began to explore the marketplace for third-party products which would be a good fit for all our requirements. In this post, we will not delve into the details of all the products that we assessed. Suffice to say that we settled on Weglot which is well-integrated with Webflow.The advantages of our third approach and these products, as compared to the earlier approaches are as follows:No manual translation is required. Weglot automatically translates site copies and allows content editors to fine-tune the language afterward.We didn’t have to create different folders or multiple instances. This makes the content workflow very simple. For example, after an English language blog is published, it is automatically translated by the third-party tool, and available for all the other three languages. If a content editor for a particular language decides to not use it on their site, they can simply mark it in Weglot and it won’t show up there.Needless to say, this comes at a cost to the client, but they felt that our proposed solution was perfect and was worth the price!In our next post, we will dive deep into the implementation details about how to configure and use Weglot. We will also elaborate on some tricky aspects of launching the site with Weglot.If you liked this insight and want more updates, we’d love for you to join us on Linkedin at Exemplifi, Facebook at ExemplifiSites or Twitter at ExemplifiSites.Originally published at https://www.exemplifi.io.
Read moreMay 12, 2022
How Symbols work in Webflow
IntroductionSymbols are one of the most useful features of the Webflow builder. Symbols allow you to turn any element and its child element into a reusable component. This could include buttons, navigation bars, hero sections, card elements, footers, etc. Creating reusable elements like Symbols can greatly speed up the development of your project.CreationWe can create symbols of two different typesIdentical content symbols:Identical symbols are used in scenarios where the layout and content of the symbol remains constant on each use of it. For example in navbars, footers, Sign up forms etc. To turn any component into a reusable symbol, all you need to do is right-click that element in your canvas and select the “Create Symbol” option in the dropdown and give it a name.Unique content symbols:These are symbols that retain their layout, but their content can be edited — text, images, links, video and rich text. This allows each instance of that symbol to be unique while retaining its original structure. This is done through the use of override fields.Upon selecting the “Create Symbol” dropdown option and giving your symbol a name, Webflow allows you to create override fields for that symbol. To do this, you simply click the plus icon under the Symbol Master section in the left-side panel.You will then be able to select which field you want to be able to override (such as text), give a name to the field, and set its default value.Next time you add one of these symbols to your project, you will be able to give this field its own unique value.ReuseThe next time you want to use this symbol, go into your symbols library in the right-side panel by clicking the plus icon and selecting the Symbols tab and dragging the symbol into your canvas.EditingTo edit a Symbol, double tap on the symbol and press enter. Now, users can make changes to the fundamental Symbol. Edits to the main Symbol affect each instance, unless specifically overridden in a Symbol instance.UnlinkingTo unlink a Symbol and make changes to it independently:Right-click the Symbol labelChoose unlink from Symbol Or , if the element is hard to select, right-click the element in the NavigatorConclusionWhile symbols are a very useful feature of Webflow they do come with their Pros and ConsPros:We can make reusable components with easeWe can override the content to create unique components while retaining uniformity in layoutWe can change the styles and apply it to all the places in a website automaticallyWe can create nested symbols inside a symbol like buttons etc.Cons:We still cannot create overridable fields for styles like background color, color etc.We cannot move symbols from one site to another in one click. If you need to move it, we would need to first unlink the elements and then copy each to another site and relink them to create the symbolIf you liked this insight and want more updates, Sign up for our monthly Exemplifi Newsletter.Originally published at https://www.exemplifi.io.
Read moreMar 30, 2022
Migrating a Website from WPEngine to WPVIP
In this post, we migrate one of our client websites — built on WordPress — from WPEngine hosting to the WPVIP WebOps platform. We outline the various steps involved in this relatively complex process that spans both Development and DevOps activities.If you are interested in the pros and cons of these platforms, you can check out any of our following posts:The Website InfrastructureOur client is a B2B firm in the agricultural sector. The website we built for them helps them interact with their dealers and sales professionals.The website had a lot of relatively sophisticated capabilities:Woocommerce and product catalog managementIntegration of the Product Catalog with a backend Product Information Management (PIM) systemSingle Sign-On Capabilities with their internal authentication systemsQuiz functionality to enable sales professionals to narrow down their product selectionFrom a technical perspective, the WordPress site had the following components:WordPress 5.9WoocommerceZingTree Plugin (for Quizzes)MiniOrange Plugin for Single Sign OnElementor and Gutenberg BuildersCustom ThemeThe hosting of this site was on WPEngine. From a DevOps perspective, there were three environments for dev, staging, and production.More details about the configuration of this infrastructure will be provided in a later section below.Step 1 of The Migration Process: WordPressThe first step in the migration process is to cutover the WordPress site from WPEngine to WPVIP.We leveraged the default WordPress export capability to export the site as an XML file.The next step is to import the site into WPVIP using the import utility of WordPress.Upload xml file and click on Upload file and Import buttonNow, the site is up and running on WPVIP!The final step is to migrate the Plugin and Theme Setups. This is a little tricky as WPVIP does not allow installation of plugins through WordPress. You have to do this through Git. The steps involved here are:Clone the WPVIP site git repo into your localCopy all the plugins & theme from the existing site and add it to the relevant directories in the git repo.Commit and push to the git repository. Now the plugins and themes should be visible on the WPVIP site. Go ahead and activate them and your good to go!Step 2 of the Migration Process: Replicate WPEngine Settings on WPVIPNow that we have successfully migrated the WordPress site to WPVIP, the next step is to replicate the WPEngine settings on WPVIP. These fall into the following categories:SSL CertificatesCDNRedirect RulesGit Permissions and UsersBackupsAccess and Error LogsWeb RulesDomainssFTP UsersRedirect RulesThere are many places where you can implement redirect rules, including WPEngine (as shown above). To migrate these over to WPVIP, you should be aware that VIP doesn’t utilize Apache in its stack, so things like an .htaccess file containing redirects can’t be utilized. Otherwise, incorporating the rules into something like the Safe redirect manager plugin would be the way to go.CDNBased on your WPEngine plan, you have access to features such as their Content Delivery Network that is powered by Cloudflare. To achieve a similar functionality on WPVIP, no additional configuration is required to utilize their CDN. It comes out of the box!BackupsWPEngine offers daily backups.There is no way to migrate these to WPVIP, which has its own automated backup process. The general advice here is to keep the account active with WPEngine until their backups rotate out or there’s been enough of a backup history created on WP VIP to no longer require the “old backups”.sFTP UsersSFTP settings or users in WPEngine cannot be migrated to WPVIP as all the code deployed to the site must be committed and pushed to a provided GitHub repository.Web RulesYou can configure your web rules in WPEngine and dictate whether you want to block certain IPs or implement geofencing.These rules can be reimplemented in WPVIP in the “IP Allow List” as shown below.Git Permissions and UsersPointing your Git to WPVIP is very straightforward. For more advanced details around the ideal git workflow, you can read this post on Github to WPVIP workflowSSL CertificatesWPEngine offers capabilities to use the SSL Certificates they offer or implement 3rd-Party certificates.You can transfer your 3rd-party certificates from WPEngine, over to WPVIP quite easily.DomainsWPEngine lets you point the WordPress site to your domains as well as establish any redirects that you need.These will need to be replicated in the WPVIP “Domains” section as well:Going live with the new infrastructureAfter you have executed Step 1 and Step 2 above, your site is ready to cut over from WPEngine to WPVIP. To launch your site on the new infrastructure, do the following:Cancel the SSL certificate in WPEngineUpdate the old WP URLs to the default WPEngine onesChange DNS details in the DNS provider (Eg. GoDaddy, Namecheap, or Route 53) to point to WPVIPRemove the domain from WPEngineAdd the domain in WPVIP and add SSL certificate to the domainAnd you are all set now with your new site!The Exemplifi WPVIP ConnectorHave you outgrown your WPEngine infrastructure and are now looking to up-level your game by moving to WPVIP? Are you concerned about the effort involved in making this shift? With our 1-week migration guarantee, you can rest easy. We are a WPVIP Enterprise Partner and our team of WordPress experts will make this process quick, easy and painless. To learn more about our solution, you can visit https://www.exemplifi.io/wpvip-connectorSummaryWe love WordPress and we love building websites that help companies grow. Growing companies need a reliable Platinum tier website infrastructure that can handle the heavy demands of a rapidly scaling business. WPVIP is the premier WebOps platform across the whole gamut of performance, security, uptime and customer service by far.With that in mind, we wrote this article to help curious readers understand the steps involved in migrating from WPEngine to WPVIP. While the process can be complex and tricky, we decided to go one step ahead and created a WPVIP connector tool to make the process fast and hassle-free.Originally published at https://www.exemplifi.io.
Read moreMar 23, 2022
What’s New in WordPress 5.9
WordPress 5.9 represents the most significant release of Gutenberg features since the initial Gutenberg launch in WordPress 5.0. In addition, WordPress 5.9 includes a lot of enhancements and bug fixes.In this post, we unpack what’s new and noteworthy in WordPress 5.9, so you can get the most out of the latest version of WordPress.Introducing the Site Editor (Beta)Full Site EditingWordPress 5.9 will continue to build upon the site editing features first introduced in WordPress 5.8 earlier this year. In addition, this release adds a lot more features to the site editing experience.The editor has three options.Site Editor: The Full Site Editing mode understands the site’s structure and provides ways to modify Menu items located on the left. Even more, settings are available from the top toolbar.Template Editor: If you would like to edit one of the Global templates like Single Post, 404, Page, Archive, simply click on the WordPress logo in the upper left-hand corner.Template Parts Editor: Template parts editor for editing and creating global elements/template parts.Twenty Twenty-Two Default ThemeTwenty Twenty-Two will be built for complete site editing (FSE) first with a goal of all theme styles being editable through Global Styles. WordPress 5.9 will likely be required to use Twenty Twenty-Two, a block theme.Twenty Twenty-Two will use a variety of color palettes, page templates, headers, and footers for endless customization. You’ll be able to change fonts, image designs, and more on a site-wide level. It’s usually pretty easy to tell when a website uses a default theme, it sounds like Twenty Twenty-Two might change that.Global StylesNew tools are coming that allow you to change design elements like typography, spacing, and colors across your entire site at once. More information and additional previews of the new interfaces are below.Block Editor Improvements + New BlocksMore Powerful List ViewList view is one of the most useful features of the block editor, especially if you are using more complex layouts (like with Kadence blocks.) List view had several limitations, but WordPress 5.9 dramatically improves usability.More Settings and Controls for BlocksFinally! WordPress 5.9 bakes in new typography tools, flexible layout controls, and finer control over details like spacing, borders, and more for blocks. Previously, block settings were just so limited, especially if you wanted to fine-tune details.For example, the default paragraph block now includes color options for text color with a hex preview, background color, expanded options for typography such as line height, letter case, letter-spacing, etc.New BlocksIn 5.9. You have some really useful new theme blocks that you can use to manage the content and look of the site. Navigation, Template Part, Header, Footer, Post Author, Next Post, Previous Post, Post Comments, Term Description, and Archive Title can all be easily modified. So, it’s getting much easier to get the final result you want.Performance ImprovementsWordPress 5.9 includes several improvements for performance. You can check out all the performance improvements in WordPress 5.9 here, including some impressive speed comparisons.Block Inserter Performance ImprovementsThe block inserter got a good performance boost! You’ll likely see a difference when searching and inserting blocks with speed and ease.Improvements to Lazy-Loading ImagesLazy-loading images were introduced in WordPress 5.5 and later expanded to also cover iframes in WordPress 5.7. In the upcoming WordPress 5.9 release, the implementation for both received some improvements to increase performance.Improvements for DevelopersWordPress 5.9 has many developer-focused updates. Here are a few noteworthy features and enhancements in this update, along with notes for devs in the WordPress 5.9 field guide.Resources for Building Block-Based ThemesWordPress 5.9 introduces block-based themes that use blocks to define the templates that structure your entire site. The new templates and template parts are defined in HTML and use the custom styling offered in theme.json.The theme-experiments repository has an Empty Theme that is an excellent boilerplate to start your first block theme from. There is also a command-line script to help generate a block theme to get you started:Block Theme Overview explains the basics of block themes and the structure and format of the themes.Create a block theme is a full tutorial walking through creating a block theme.Global settings & styles documents how to use the theme.json to add styles to your themes.Updates for Settings, Styles, and theme.jsonWordPress 5.9 has changed theme.json v1 introduced in WordPress 5.8 to a v2. The existing v1 theme.json files will still work as expected, and they’ll be transformed at runtime to the v2 format by WordPress.New Hooks and Functions to Work with Posts, Post Types, and TaxonomiesIn WordPress 5.9, new hooks and functions are added to help developers work with Posts, Post Types, and Taxonomies.SummaryWordPress 5.8 came with many feature updates, but WordPress 5.9 has taken the CMS to the next level. WordPress 5.9 builds upon the latest release making a consumer-friendly CMS into a more developer-friendly CMS. Bringing together performance improvements, blocks and full site editing features are the major game changers of this latest version.Originally published at https://www.exemplifi.io.
Read moreFeb 24, 2022
Migrating from Craft CMS to WordPress
In this post we explore the various steps involved in migrating a site from Craft CMS to WordPress. The design of the site remains exactly the same while the underlying CMS is migrated.Overall Site SettingsFirst we migrated the site settings. General contains details such as sitename and logo. Routes is a listing of all redirects. Users also contains passwords and associated roles.Craft SettingsWordPress SettingsContentThe first step is to replicate all the custom fields and groupings that have been created in Craft. We used the WordPress Custom Post Type (CPT UI) plugin to create custom fields and groupings. Then we replicated all the fields manually.Craft FieldsWordPress FieldsThe next step is to replicate the actual content. Unfortunately, this is a relatively time-intensive task. We looked at programmatic ways to extract and import data. However, they were more trouble than they were worth.Craft ContentWordPress ContentMigrating the assets was relatively easy. All we had to do was to copy the folders and import them into WordPress. Of course, the folder structure had to be replicated manually.Craft AssetsWordPress AssetsThen we migrated all the taxonomy of categories and tags.Craft TaxonomyWordPress TaxonomyFinally we replicated all the navigation menus.Craft MenusWordPress MenusTemplatesAfter the content was migrated, the final step was to rebuild all the templates that power the various pages of the site. Although both Craft and WordPress are PHP powered sites, there was no easy way to reuse the templates. Craft uses a Twig templating engine while WordPress doesn’t. This is a fundamental difference and we had no choice but to rebuild all the templates.Craft TemplateWordPress TemplateOther ActivitiesThis post covers only the development-oriented aspects of such a migration. There are a ton of other activities that are involved:If you’d like to know more we’d love for you to join us on Linkedin at Exemplifi, Facebook at ExemplifiSites or Twitter at ExemplifiSites.Originally published at https://www.exemplifi.io.
Read moreHow does this agency match to your business needs? Create a free account to find out