BLOG

R3 Cloud Journey

Life & Work

"ULTIMATE NO-CODE" web development with Webflow.

2020-07-30

This is Kula, a UI & UX designer of R3 Institute.

In the last 2 month I've been working on the renewal of all the websites of R3 Institute to a new platform "Webflow", which is a totally no-code platform to design and build stylish and high-functional websites.

I found there are very few articles that write about Webflow in Japanese. When I tried to find some technical tips all the articles and videos were in English.

That's why I tried to write this blog in English though it's not my first language (and I'm not good at writing at all), to tell the Webflow community that the numbers of Webflow users are starting to grow in Japan and I wish the web designers here know better about it.

Responsive web design tool, CMS, and hosting platform | Webflow

"Webflow has empowered our marketing team to design, build, and iterate our marketing page without relying on any help from engineering. It's allowed them to create their most important asset in a better, cheaper, and faster way."

What is our company "R3 Institute"?

For those who's not familiar with us, R3 Institute, with less than 30 employees, is a highly skilled system development company located in Osaka, Japan. One of our service called "gusuku Customine" is a No-Code development platform instead of coding in JavaScript to customize "Kintone" (A No-Code groupware platform to make apps yourself for database management, workflow and project management, etc. The only shortage is that you have to code yourself if you need to customize your Apps.)

All-in-One Workplace Platform for Teams, Built by You

Kintone is an all-in-one workplace platform that allows highly collaborative teams to build, share, and automate custom workflows and processes for data-driven results Request a Demo Trusted by 15,000+ amazing companies and non-profits worldwide Your sales team needs a CRM app. The accounting team an expense report workflow, while marketing wants a social media and blog posting calendar.

gusuku Customine | No-Code Customization Platform for Kintone

Strengthen your Kintone Apps Features Have you ever wanted to highlight cells or display a message depending on the value entered in a field? Kintone's platform allows you to do so through JavaScript customization which is easy for coders, but not so friendly for non-coders.

Why Webflow?

Because of our Low-Code & No-Code background, we believe that, the easier you can build and manage your website, the more efficiently you'll be able to work on marketing and contents issues based on your website.

As we create No-Code tools for business improvement, we want to keep improving our own business with No-Code as well.

Until now, we had been managing our web-related works with 2 "webmasters", which meant that the design and coding was done by me, and the other person called Nishijima was in charge of checking and deploying. (Because I'm not good at server development...)

When every single minor change needed to be made, we almost always left it to Nishijima, it was too much for him because he has other things.

Kula and Nishijima work together as "Webmasters"

R3's corporate website, which was revamped in 2018, was created in Wordpress and managed content in Shifter, but each person in charge of the site ended up asking Nishijima in case of all new updates.

And the websites of gusuku series, that were designed by BootStrap Studio to reduce production and management costs, is based on Amazon S3 which is not supported from BSS. As gusuku Customine is a service that we'll continue to develop over time, and we'll be updating the website as we add new features, I have to ask Nishijima every single time to update the site because I'm not used to using git.

Wordpress, Shifter, and Bootstrap Studio are really good services and they helped us a lot for web marketing issues. However we are still looking for a certain platform that can be more efficient, and we met Webflow.

Minimized "webmaster" and everyone can build and update the site

In order to reduce Nishijima's workload as much as possible, it would be best if I, as a designer, could design, code, and publish, and if I could create a web management system that would allow each content updater to update freely.

Webflow makes it with its excellent design features, CMS function, cloud base and a vast amount of collective knowledge (Webflow forum).

(There's another similar service called "STUDIO" but its CMS feature was "coming soon" so...<-It has been updated on its 3.0 version)

It's easy to edit and modify without coding, and even if the person in charge isn't there, other staff can easily take over by logging in with an administrator account using a browser.

As we continue to grow our gusuku series of services, our goal is to make the web accessible to all of our managers, developers, marketers, and sales people, and to improve it step by step as we operate it.

What webflow can and cannot do

About design

I can confidently say: you don't need to have any design knowledge to create a super beautiful website from a template. The default margins and fonts and the balance of each part of the site are carefully balanced to make it "modern and stylish", so you won't have to worry about making a weird, tacky website.

About coding

Actually you don't need to write any single code, a stylish site will be built with just drag and drop. The only thing I would say is that some CSS decorations(:before, :after, etc.) can be only added with custom code.

Anyway it's enough to make your site with just the standard features, and I'm quite satisfied with it.

Here's the UI of the operation panel of Webflow Designer, quite intuitive and easy to understand
Frequently used elements can be added directly as presets by dragging and dropping

Building a CMS

It's the most amazing feature I've ever used, sorry for saying goodbye to Shifter...

I just cannot say how easy to build it on your site! You can create it from scratch or import it as a CSV, like what you have done in kintone.

This is what the CMS structure I made for the seminars & events looks like. The editor adds the record and it gets reflected on the site.
By linking CMS items to the certain elements I made by Webflow Designer, the lists and details pages are automatically generated.

Deployment

Ask Nishijima to set up the DNS etc.(Yes it's the only work that Nishijima will do) and push the "Publish" button... It's done!

Checkout the University and the Forum if you're not sure

I've been spent only half of my day in watching videos of Webflow University and achieved to make the sites with quite a low learning cost. If you'er still not sure about some features, just checkout the forum and vote the topics you hope to be resolved.

Learn web design with free video courses and tutorials | Webflow University

Learn the ins and outs of web design with Webflow University. Get comprehensive tutorials on designing and building websites, answers to frequently asked questions, and detailed featured documentation.

Forum | Webflow

Connect with 70,000+ members who are contributing to Webflow's mission and building the future of visual development. Subscribe to be a Webflow Insider: Webflow.com/community

Problems encountered (mostly resolved, thanks to Forum)

Asset manager(updated!)

I was so frustrated with the asset manager without multi-select and delete, and fortunately it was resolved after the update in May!

https://webflow.com/feature/bulk-delete-in-the-asset-manager-wide-view

However, I still don't have a good solution for the assets used in the CMS and in the page design. (I've seen a lot of questions about this in Forum).

Only 1 nested CMS list on one page

In case of the blog I tried to separate all the categories as tabs but there's only one tab can be applied with nested CMS list because all the tabs are on the same page.

Though it's not that critical...

Black "Transparent" on Safari

If the background transparency is set to "Transparent", Safari will render it as black. You have to change it to "rgba(255,255,255,0) to solve it.

I tried to make some gradation for each section but it looked weird on Safari...

Internet Explorer 11...

Yes all the CSS grid and text wrap are not working on IE11. I should show a warning page for IE11 users but on Google Analytics we still have 7% of users using Internet Explorer tho...

Well the site design is not that complicated...(Anyway please don't use IE11 ANYMORE...)

BTW there's a bit of misalignment on Firefox as well. The div blocks get overflow if you set all the divs' width on one row add up to exactly 100%. I tried to make it 97% and it works lolz !(It's still a not good solution though)

The operating costs and convenience of a subscription service

The Price

You'll have to sign up for a CMS plan of at least $20 per month. But comparing to the labor costs before, it's definitely better to use Webflow for us.

No more "Webmaster" and wasted time.

With Webflow, each person in charge of content is given a "Editor Account" to create and publish his/her content and without any manipulation from the Webmaster.

I'm still taking care of the minor revisions and bug fixing with my admin account though all the other content updates are left up to everyone else. It makes me feel very impressed to grow the websites with all the staffs together.

The concept and values of a No-Code & cloud based subscription service that progresses along with the user is what we're aiming for with our "gusuku Customine" as well. Thanks to Webflow that has saved us a lot of time on development and we'll continue to do our best in the future.

Here's the list of websites that I made by Webflow these months. (Sorry most of them don't have English version...)

アールスリーインスティテュート |R3 Institute

kintone(キントーン)アプリのカスタマイズやプラグイン開発、基礎から学べる研修コース、ノーコードでkintoneアプリをカスタマイズ出来るgusuku Customine(カスタマイン)を提供する、大阪のシステム開発会社です。

gusuku(グスク)- kintoneをもっと使いやすくするためのプラットフォーム

kintone(キントーン)アプリケーション開発のために、ノーコードでカスタマイズできる「gusuku Customine(カスタマイン)」、安心アプリ配布・バックアップなどができる「gusuku Deploit(デプロイット)」とkintoneの導入を加速できる「gusuku Boostone(ブーストーン)」をご提供します。

gusuku Customine | No-Code Customization Platform for Kintone

Strengthen your Kintone Apps Features Have you ever wanted to highlight cells or display a message depending on the value entered in a field? Kintone's platform allows you to do so through JavaScript customization which is easy for coders, but not so friendly for non-coders.

gusuku Deploit | kintone(キントーン)のアプリ開発をもっとぐっとHAPPYに!

gusuku Customine(カスタマイン)は、プログラミングスキル要らず、ノーコードで、もっと直感的なユーザーインターフェースでkintone(キントーン)のカスタマイズができるサービスです。

gusuku Boostone(ブーストーン) - あなたのキントーン導入を加速する

gusuku Boostoneとは gusuku Boostone(グスク ブーストーン)は、kintoneによるシステム開発・業務改善について、相談・開発サポートを行う、 サブスクリプション型 のSIサービスです。 サービスプラン どのプランをご契約いただいても、お客様と弊社がコミュニケーションするための専用kintoneスペースを作成し、お客さまをご招待します。 ...

And here are the blogs I wrote about Webflow in Japanese before.

究極のノーコードを追求して会社のホームページをWebflowに移行しました |R3 Cloud Journey

こんにちは、デザイナーのくーらです。 この度に弊社のホームページをWebflowへ移行し、リニュアルすることになりました。 kintone(キントーン)アプリのカスタマイズやプラグイン開発、基礎から学べる研修コース、ノーコードでkintoneアプリをカスタマイズ出来るgusuku Customine(カスタマイン)を提供する、大阪のシステム開発会社です。 ‍ ...

Webflow化が止まらない。弊社のgusukuシリーズサイトもリニューアルしました!|R3 Cloud Journey

こんにちは、デザイナーのくーらです! 先月、弊社コーポレートサイト R3it.com がWebflowへ移行してから、引き続きgusukuシリーズの4サイトも全部、Webflowへの移行が終わりました〜! ...

Webflowのカスタムコードでシンタックスハイライトのコードブロックとテーブルを追加してみた|R3 Cloud Journey

こんにちは、デザイナーのくーらです! やっと弊社のコーポレートサイトの移行が落ち着いたので、Webflowでもうちょっとリッチなカスタマイズができるかと思って色々いじってみました〜! 自分はプログラマーではないので、もし専門用語の扱いやコードの書き方がずさんだったら目を瞑っていただければと思います...(*ノω・*)テヘ ‍ ‍ Webflowでカスタムコードが使えるところは以下の3箇所 ...

Please feel free to talk to me in Japanese, English and Chinese and here's my twitter account.

I've applied to attend the Webflow World Tour and hope to meet more community members around the world.

Webflow
Web
Design
No-Code
ノーコード開発

UX Designer / Hackathon idol / Amateur manga&Doujin Otaku/

R3のご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ