Reactive JavaScript Frameworks (such as React, Vue.js, and Angular) are all the rage lately, and it’s no wonder that they are being used in more and more websites and applications due to their flexibility, modularity, and ease of automated testing.
These frameworks allow one to achieve new, previously-unthinkable things on a website or app, but how do they perform in terms of SEO? Do the pages that have been created with these frameworks get indexed by Google? Since with these frameworks all — or most — of the page rendering gets done in JavaScript (and the HTML that gets downloaded by bots is mostly empty), it seems that they’re a no-go if you want your websites to be indexed in search engines or even parsed by bots in general.
In this article, I will talk mostly about Vue.js, since it is the framework I’ve used most, and with which I have direct experiences in terms of indexing by the search engines on major projects, but I can assume that most of what I will cover is valid for other frameworks, too.
Replacing jQuery With Vue.js
Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Tell me more ?
Some Background On The Problem
How Indexing Works
For your website to be indexed by Google, it needs to be crawled by Googlebot (an automated indexing software that visits your website and saves the contents of pages to its index) following links within each page. Googlebot also looks for special Sitemap XML files in websites to find pages that might not be linked correctly from your public site and to receive extra information on how often the pages in the website change and when they have last changed.
A Little Bit Of History
Until a few years ago (before 2009), Google used to index the content of a website’s HTML — excluding all the content created by JavaScript. It was common SEO knowledge that important links and content should not be written by JavaScript since it would not get indexed by Google, and it might cause a penalty for the website because Google might consider it “fake content” as if the website’s owner was trying to show users something different from what was shown to the search engines and trying to fool the latter.
It was very common practice by scammers to put a lot of SEO-friendly content in the HTML and hide it in JavaScript, for example. Google has always warned against this practice:
“Serving Googlebot different content than a normal user would see is considered cloaking, and would be against our Webmaster Guidelines.”
You could get penalized for this. In some cases, you could be penalized for serving different content to different user agents on the server side, but also for switching content via JavaScript after the page has loaded. I think this shows us that Google has been indexing websites executing JavaScript for a long time — at least for the sake of comparing the final HTML of the website (after JavaScript execution) and the raw HTML it was parsing for its indexes. But Googlebot did not execute JavaScript all the time, and Google was not using the JavaScript-generated content for indexing purposes.
Then, given the increased usage of AJAX to deliver dynamic content on websites, Google proposed an “AJAX crawling scheme” to help users index AJAX-based websites. It was very complicated; it basically required the website to produce a rendering of pages with AJAX content included. When requested by Google, the server would provide a version of the page with all (or most) of the content that would have been generated dynamically by JavaScript included in the HTML page — pre-rendered as an HTML Snapshot of the content. This process of having a server-side solution deliver content that was (for all other purposes) meant to be generated client-side, implied that those wanting to have a site that heavily relied on JavaScript indexed in Google had to go through a lot of technical hassles.
For example, if the content read by AJAX came from an external web service, it was necessary to duplicate the same web service calls server-side, and to produce, server-side, the same HTML that would have been produced client-side by JavaScript — or at least a very similar one. This was very complicated because, before the advent of Node.js, it required to at least partially duplicate the same rendering logic in two different programming languages: JavaScript for the frontend, and PHP, Java, Python, Ruby, and so on, on the backend. This is called “server-side rendering”, and it could lead to maintenance hell: if you made important changes to how you were rendering content in the frontend you had to duplicate those changes on the backend.
The only alternative to avoid duplicating the logic was to parse your own site with a browser executing JavaScript and save the end results to your server and serve those to Googlebot. This is sort of similar to what is now called “pre-rendering”.
Google (with its AJAX crawling scheme) also guaranteed that you would avoid penalties due to the fact that in this case you were serving different content to Googlebot and to the user. However, since 2015, Google has deprecated that practice with an official blog post that told website managers the following:
What this told us was not that Googlebot had suddenly acquired the capability of executing JavaScript when indexing web pages, since we know that it had done so for a very long time (at least to check for fake content and scams). Instead, it told us that the result of JavaScript execution would be indexed and used in SERPs.
This seems to imply that we don’t have to worry about providing Google with server-side rendered HTML anymore. However, we see all sorts of tools for server-side rendering and pre-rendering made available for JavaScript frameworks, it seems this is not the case. Also, when dealing with SEO agencies on big projects, pre-rendering seems to be considered mandatory. How come?
How Does Google Actually Index Pages Created With Front-End Frameworks?
The Experiment
In order to see what Google actually indexes in websites that have been created with a front-end framework, I built a little experiment. It does not cover all use cases, but it is at least a means to find out more about Google’s behavior. I built a small website with Vue.js and had different parts of text rendered differently.
The website’s contents are taken from the description of the book Infinite Jest by David Foster Wallace in the Infinite Jest Wiki (thanks guys!). There are a couple of introductory texts for the whole book, and a list of characters with their individual biography:
Some text in the static HTML, outside of the Vue.js main container;
Some text is rendered immediately by Vue.js because it is contained in variables which are already present in the application’s code: they are defined in the component’s data object;
#Some text is rendered by Vue.js from the data object, but with a delay of 300ms;
The character bios come from a set of rest APIs, which I’ve built on purpose using Sandbox. Since I was assuming that Google would execute the website’s code and stop after some time to take a snapshot of the current state of the page, I set each web service to respond with an incremental delay, the first with 0ms, the second with 300ms, the third with 600ms and so on up to 2700ms.
Each character bio is shortened and contains a link to a sub-page, which is available only through Vue.js (URLs are generated by Vue.js using the history API), but not server-side (if you call the URL of the page directly, you get no response from the server), to check if those got indexed too. I assumed that these would not get indexed, since they are not proper links which render server-side, and there’s no way that Google can direct users to those links directly. But I just wanted to check.
I published this little test site to my Github Pages and requested indexing — take a look.
The Results
The results of the experiment (concerning the homepage) are the following:
The contents which are already in the static HTML content get indexed by Google (which is rather obvious);
The contents which are generated by Vue in real-time always get indexed by Google;
The contents which are generated by Vue, but rendered after 300ms get indexed as well;
The contents which come from the web service, with some delay, might get indexed, but not always. I’ve checked Google’s indexing of the page in different moments, and the content which was inserted last (after a couple of seconds) sometimes got indexed, sometimes it didn’t. The content that gets rendered pretty quickly does get indexed most of the time, even if it comes from an asynchronous call to an external web service. This depends on Google having a render budget for each page and site, which depends on its internal algorithms, and it might vary wildly depending on the ranking of your site and the current state of Googlebot’s rendering queue. So you cannot rely on content coming from external web services to get indexed;
The subpages (as they are not accessible as a direct link) do not get indexed as expected.
What does this experiment tell us? Basically, that Google does index dynamically generated content, even if comes from an external web service, but it is not guaranteed that content will be indexed if it “arrives too late”. I have had similar experiences with other real, production websites besides this experiment.
Competitive SEO
Okay, so the content gets indexed, but what this experiment doesn’t tell us is: will the content be ranked competitively? Will Google prefer a website with static content to a dynamically-generated website? This is not an easy question to answer.
From my experience, I can tell that dynamically-generated content can rank in the top positions of the SERPS. I’ve worked on the website for a new model of a major car company, launching a new website with a new third-level domain. The site was fully generated with Vue.js — with very little content in the static HTML besides </code> tags and <code>meta</code> descriptions.</p>
<p>The site started ranking for minor searches in the first few days after publication, and the text snippets in the SERPs reported words coming directly from the dynamic content.</p>
<p>Within three months it was ranking first for most searches related to that car model — which was relatively easy since it was hosted on an official domain belonging to the car’s manufacturer, and the domain was heavily linked from reputable websites.</p>
<p>But given the fact that we had had to face strong opposition from the SEO company that was in charge of the project, I think that the result was still remarkable.</p>
<p>Due to the tight deadlines and lack of time given for the project, we were going to publish the site without pre-rendering.</p>
<h4>Animated Text</h4>
<p>What Google does <em>not</em> index is heavily-animated text. The site of one of the companies I work with, <a target="_blank" href="https://www.rabbithole-consulting.com/">Rabbit Hole Consulting</a>, contains lots of text animations, which are performed while the user scrolls, and require the text to be split into several chunks across different tags.</p>
<p>The main texts in the website’s home page are not meant for search engine indexing since they are not optimized for SEO. They are not made of tech-speak and do not use keywords: they are only meant to <strong>accompany the user on a conceptual journey</strong> about the company. The text gets inserted dynamically when the user enters the various sections of the home page.</p>
<figure><a target="_blank" href="https://www.rabbithole-consulting.com/"></p>
<p> <img decoding="async" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/526c290c-efd1-42ef-bb48-fb0af80c4c5c/rabbit-hole-screenshot.png" alt="Rabbit Hole Consulting"></a><figcaption>
(Image source: <a target="_blank" href="https://www.rabbithole-consulting.com/">Rabbit Hole Consulting</a>) (<a target="_blank" href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/526c290c-efd1-42ef-bb48-fb0af80c4c5c/rabbit-hole-screenshot.png">Large preview</a>)<br />
</figcaption></figure>
<p>None of the texts in these sections of the website gets indexed by Google. In order to get Google to show something meaningful in the SERPs, we added some static text in the footer below the contact form, and this content does show as part of the page’s content in SERPs.</p>
<p>The text in the footer gets indexed and shown in SERPs, even though it is not immediately visible to the users unless they scroll to the bottom of the page <em>and</em> click on the “Questions” button to open the contact form. This confirms my opinion that content does get indexed even if it is not shown immediately to the user, as long as it is rendered soon to the HTML — as opposed to being rendered on-demand or after a long delay.</p>
<div></div>
<h4>What About Pre-Rendering?</h4>
<p>So, why all the fuss about pre-rendering — be it done server-side or at project compilation time? Is it really necessary? Although some frameworks, like <a target="_blank" href="https://nuxtjs.org/">Nuxt,</a> make it much easier to perform, it is still no picnic, so the choice whether to set it up or not is not a light one.</p>
<p>I think it is <em>not compulsory</em>. It is certainly a requirement if a lot of the content you want to get indexed by Google comes from external web service and is not immediately available at rendering time, and might?—?in some unfortunate cases?—?not be available at all due to, for example, web service downtime. If during Googlebot’s visits some of your content arrives too slowly, then <strong>it might not be indexed</strong>. If Googlebot indexes your page exactly at a moment in which you are performing maintenance on your web services, it might not index any dynamic content at all.</p>
<p>Furthermore, I have no proof of <em>ranking</em> differences between static content and dynamically-generated content. That might require another experiment. I think that it is very likely that, if content comes from external web service and does not load immediately, it might impact on Google’s perception of your site’s performance, which is a very important factor for ranking.</p>
<p><strong>Recommended reading</strong>: <em><a target="_blank" href="https://www.smashingmagazine.com/2018/06/local-search-mobile-web-design/">How Mobile Web Design Affects Local Search (And What To Do About It)</a></em></p>
<h3>Other Considerations</h3>
<h4>Compatibility</h4>
<p>Up until recently, Googlebot used a fairly old version of Chromium (the open-source project on which Google Chrome is based), namely version 41. This meant that some recent JavaScript or CSS features could not be rendered by Google correctly (e.g. IntersectionObserver, ES6 syntax, and so on).</p>
<p>Google <a target="_blank" href="https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html">has recently announced</a> that it is now running the latest version of Chromium (74, at the time of writing) in Googlebot, and that the version will be updated regularly. The fact that Google was running Chromium 41 might have had big implications for sites which decided to disregard compatibility with IE11 and other old browsers.</p>
<p>You can see a comparison of Chromium 41 and Chromium 74’s support for features <a target="_blank" href="https://caniuse.com/#compare=chrome+41,chrome+74">here</a>, however, if your site was already <a target="_blank" href="https://en.wikipedia.org/wiki/Polyfill_(programming)">polyfilling</a> missing features to stay compatible with older browsers, there should have been no problem.</p>
<p><strong>Always use polyfills</strong> since you never know which browser misses support for features that you think are commonplace. For example, Safari did not support a major and very useful new feature like IntersectionObserver until version 12.1, which came out in <a target="_blank" href="https://caniuse.com/#feat=intersectionobserver">March 2019</a>.</p>
<h4>JavaScript Errors</h4>
<p>If you rely on Googlebot executing your JavaScript to render vital content, then major JavaScript errors which could prevent the content from rendering must be avoided at all costs. While bots might parse and index HTML which is not perfectly valid (although it is always preferable to have valid HTML on any site!), if there is a JavaScript error that <strong>prevents the loading of some content</strong>, then there is no way Google will index that content.</p>
<p>In any case, if you rely on JavaScript to render vital content to your end users, then it is likely that you already have extensive unit tests to check for blocking errors of any kind. Keep in mind, however, that Javascript errors can arise from unpredictable scenarios, for example, in case of improper handling of errors on API responses.</p>
<p>It is better to have some real-time error-checking software in place (such as Sentry or LogRocket) which will alert you of any edge-case errors you might not pick during unit or manual testing. This adds to the complexity of relying on JavaScript for SEO content.</p>
<h4>Other Search Engines</h4>
<p>The other search engines do <em>not</em> work as well as Google with dynamic content. Bing does not seem to index dynamic content at all, nor do DuckDuckGo or Baidu. Probably those search engines lack the resources and computing power that Google has in spades.</p>
<p>Parsing a page with a headless browser and executing JavaScript for a couple of seconds to parse the rendered content is certainly more resource-heavy than just reading plain HTML. Or maybe these search engines have made the choice not to scan dynamic content for some other reasons. Whatever the cause of this, if your project needs to support any of those search engines, you need to set up pre-rendering.</p>
<p><strong>Note</strong>: <em>To get more information on other search engines’ rendering capabilities, you can check <a target="_blank" href="https://moz.com/blog/search-engines-ready-for-javascript-crawling">this article</a> by Bartosz Góralewicz. It is a bit old, but according to my experience, it is still valid.</em></p>
<h4>Other Bots</h4>
<p>Remember that your site will be visited by other bots as well. The most important examples are Twitter, Facebook, and other social media bots that need to <strong>fetch meta information about your pages</strong> in order to show a preview of your page when it is linked by their users. These bots will not index dynamic content, and will only show the meta information that they find in the static HTML. This leads us to the next consideration.</p>
<h4>Subpages</h4>
<p>If your site is a so-called “One Page website”, and all the relevant content is located in one main HTML, you will have no problem having that content indexed by Google. However, if you need Google to index and show any secondary page on the website, you will still need to <strong>create static HTML for each</strong> of those — even if you rely on your JavaScript Framework to check the current URL and provide the relevant content to put in that page. My advice, in this case, is to create server-side (or static) pages that at least provide the correct <code>title</code> tag and meta description/information.</p>
<h3>Conclusions</h3>
<p>The conclusions I’ve come to while researching this article are the following:</p>
<ol>
<li>If you only target Google, <strong>it is not mandatory to use pre-rendering</strong> to have your site fully indexed, however:</li>
<li>You should <em>not</em> rely on <strong>third-party web services</strong> for content that needs to be indexed, especially if they don’t reply quickly.</li>
<li>The content you <strong>insert into your HTML immediately</strong> via Vue.js rendering does get indexed, but you shouldn’t use animated text or text that gets inserted in the DOM after user actions like scrolling, etc.</li>
<li>Make sure you <strong>test for JavaScript errors</strong> as they could result on entire pages/sections not being indexed, or your site not being indexed at all.</li>
<li>If your site has <strong>multiple pages</strong>, you still need to have some logic to create pages that, while relying on the same front-end rendering system as the home page, can be indexed by Google as individual URLs.</li>
<li>If you need to have <strong>different description</strong> and <strong>preview images</strong> for social media between different pages, you will need to address this too, either server-side or by compiling static pages for each URL.</li>
<li>If you need your site to perform on <strong>search engines other than Google</strong>, you will definitely need pre-rendering of some sort.</li>
</ol>
<div>
<span>(dm, yk, il)</span>
</div>
<p><strong>Acknowledgements:</strong> <em>Many thanks to Sigrid Holzner of <a target="_blank" href="https://www.seo-bavaria.de/">SEO Bavaria</a> / <a target="_blank" href="https://www.rabbithole-consulting.com/">Rabbit Hole Consulting</a> for her review of this article.</em></p>
<p></p>
</article>
<div class="fixed"></div>
</div>
<div class="under">
<span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div>
</div>
<div class="post" id="post-2303347">
<h2><a class="title" href="http://www.webmastersgallery.com/2019/05/21/4-ways-to-extract-website-content-from-a-client/" rel="bookmark">4 Ways to Extract Website Content From a Client</a></h2>
<div class="info">
<span class="date">May 21st, 2019</span>
<span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/05/21/4-ways-to-extract-website-content-from-a-client/#respond">No comments</a></span>
<div class="fixed"></div>
</div>
<div class="content">
<div class="ftpimagefix" style="float:left"><a target="_blank" href="https://www.webdesignerdepot.com/2019/05/4-ways-to-extract-website-content-from-a-client/"><img decoding="async" src="https://www.webdesignerdepot.com/cdn-origin/uploads/2019/04/featured_content.jpg" align="left" alt="" width="100%"></a></div>
<p> In a perfect world, we’d all have all the content we needed before we ever touched a wireframe, on paper or otherwise. The hate for <em>lorem ipsum</em> is real, and I do understand why, but it’s a simple fact that we do <em>not</em> live in a perfect world. Clients are often ready to hand over a down payment, but not actually ready to build the site yet.</p>
<p>If you find yourself in this situation (and it will happen a lot at the beginning of your career), you’ll need to help your client get ready. And if they don’t hire a copy writer, you’ll need to help them write the content themselves.</p>
<h1>1. Give Them Constraints</h1>
<p>If your client is writing their own content, they may need to be told what to write. Most people are not writers by nature. It’s a skill that can be learned by just about anyone, but it takes some doing, whether you have a natural talent for it or not. Most people, when told to write some content for a website, are probably going to stare at the blank screen for a while.</p>
<div>
<p>Most people are not writers by nature</p>
</div>
<p>Then, hesitantly, they might begin to pick out letters on their keyboard, one by one. It’ll be a slog, but they’ll have that first grand sentence: “Hi! Welcome to the home page of our website.” And then they might write a bunch of stuff that would be better suited to the “About Us” page.</p>
<p>People have long made the argument that total creative freedom doesn’t make for good design; constraints do. Constraints force us to solve problems, but they also give us direction, and purpose. Yes, it means doing some of their website planning and strategy for them, but no one said you had to do it for free.</p>
<h1>2. Go Through The Process With Them Before They Write</h1>
<p>Even instructions like, “Okay, you need a paragraph of introductory text for the home page.” might be a bit vague for people unfamiliar with writing website copy. Get on Skype, or even meet them in person to take your client through the plan you have for their website (wireframes or other prototypes may come in handy here), and give them examples of what they might say.</p>
<p>Also be sure to tell them how much content is intended for each page, page section, or UI element. If only a sentence or two will reasonably fit, make sure they know this. If they can go nuts on the “About Us” page, make sure they know that, too.</p>
<p>And yes, giving them a space to go nuts is probably a good idea. Everyone wants unleash their inner Hemingway, and if the “About” page ends up being as long and annoying as <em>The Old Man and the Sea</em>, that’s the price we pay for good relationships with our clients.</p>
<p>As you go through your instructions, write them down, and send them to your client via email for reference. This way, they’ll always know what the plan is.</p>
<p>Charge by the hour for this bit, at least.</p>
<h1>3. Go Ahead And Annoy Them A Bit</h1>
<p>Ever had a client give you a deadline, then disappear? You have no obligation to take that lying down. Now, they might be busy, and have other legitimate priorities. If they tell you a family member is sick, just work for another client for a while.</p>
<p>But if they just disappear on you, don’t be afraid to remind them once in a while. They might genuinely forget, and need the reminder. Even if they haven’t forgotten, they might need a little motivation. And yes, you might annoy them a bit, but clients should respect your time, too.</p>
<div>
<p>If they can’t finish even one project, there probably isn’t a long-term relationship on the table</p>
</div>
<p>Now don’t e-mail them every day. That’s excessive. An e-mail per week should be fine to start with, and you can always increase that number as deadlines approach. If they e-mail you back with something like, “Thanks, I’m working on it!”, or, “For god’s sake please stop, I’m working on it!”… you can safely stop sending them e-mails for a while.</p>
<p>Don’t worry too much about annoying them. If they can’t finish even one project, there probably isn’t a long-term relationship on the table.</p>
<h1>4. Use Software To Make It All A Bit Easier</h1>
<p>Of course, this is all a fair bit of work. You can automate the process of getting content from your clients just a little bit, though. If you’ve got the budget for one more darned SAAS product in your pipeline, you could try out <a target="_blank" href="https://contentsnare.com/">Content Snare</a>.</p>
<p>You literally just set up forms that specifically request the content you need. You can put in character limits, and basically define the information required with various kinds of inputs. You want constraints? They’ve got constraints, and automatic email reminders.</p>
<p>Now the downside to this software is the cost. At the time of this writing, the cheapest plan is $24US per month (billed yearly). It’s affordable, probably, for a designer with plenty of clients already. But when every dollar counts, this is one tool you can probably do without.</p>
<p>For anyone who’s a little cash-strapped, you can replicate the basic functionality for requesting content with a much simpler tool like <a target="_blank" href="https://www.google.co.uk/forms/about/">Google Forms</a>. Just make one for each page, and go. You can embed these forms, too, so if you already have something like a “client area” set up on your website, you could theoretically set each client up with their own set of forms to fill out, all in one place.</p>
<p>Automated reminder emails? Well, there’s no shortage of mass mailing applications out there. If you’re already using one, you could schedule some reminders pretty easily. Just be sure to turn them off once you’ve gotten a response.</p>
<p>Annoying them is one thing. Using robots to do it is another.</p>
</p>
<p><em>Featured image <a target="_blank" href="https://unsplash.com/photos/UK78i6vK3sc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">via Unsplash</a>.</em></p>
<table width="100%">
<tr>
<td valign="center">
<a target="_blank" href="https://www.mightydeals.com/deal/sketchit.html?ref=inwidget"><b>Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!</b></a>
</td>
<td width="90">
</td>
</tr>
</table>
<p><a target="_blank" href="https://www.webdesignerdepot.com/2019/05/4-ways-to-extract-website-content-from-a-client/">Source</a></p>
<div class="fixed"></div>
</div>
<div class="under">
<span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div>
</div>
<div class="post" id="post-2303042">
<h2><a class="title" href="http://www.webmastersgallery.com/2019/05/21/top-10-most-popular-frameworks-for-responsive-web-development/" rel="bookmark">Top 10 Most Popular Frameworks for Responsive Web Development</a></h2>
<div class="info">
<span class="date">May 21st, 2019</span>
<span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/05/21/top-10-most-popular-frameworks-for-responsive-web-development/#respond">No comments</a></span>
<div class="fixed"></div>
</div>
<div class="content">
<div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/srb3x4kXTnI/top-10-most-popular-frameworks-for-responsive-web-development.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2019/05/farzad-nazifi-71686-unsplash-1024x680.jpg" alt=""></a></div>
<div></div>
<p>Thanks to the growing use of mobile devices for Internet browsing, the demand for responsive web development continues to skyrocket with each passing day. </p>
<p>On the other hand, web development standards are constantly growing with the complexity of modern technologies. So, web designers & developers always look for high-level frameworks to speed up the creation of responsive websites.</p>
<p>Due to the availability of a number of frameworks on the market, choosing the right framework becomes a huge challenge for most website developers and designers. Therefore, we have listed the top 10 popular frameworks for responsive web development. Just have a look. </p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9zZW1hbnRpYy11aS5jb20v&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>1- Semantic UI</strong></a></h4>
<p>This framework has managed to win appreciation from many website developers. It has great support from both the user community and expert publications. It is an easy-to-use framework. The convenience of the interface allows developers to create user-friendly websites easily and effortlessly. Even with minimal experience in website development, you can easily make use of it to create responsive websites. Its new CSS-structure includes modern and the most popular functions. It also supports the integration of third-party modules.</p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9mb3VuZGF0aW9uLnp1cmIuY29tLw%3D%3D&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>2- Foundation</strong></a></h4>
<p>It is perhaps the most feature-rich framework. You can use it with Saas support- which offers a diverse library of various options, such as off-canvas menus, modal windows, enhanced canvas navigation, GPU acceleration, fastclick.js, etc. Always keep in mind that Investing in a website with a built-in Foundation framework can help you get the desired success in the long-term. Because of its flexibility & unlimited possibilities, web developers all around the world use to create responsive websites with profound ease. </p>
<p>This feature-rich framework supports hardware acceleration to create smooth, lightning-fast animations in an easy way. It is written in Sass and includes a specially developed attribute for data exchange. You can easily load lightweight HTML sections on mobile screens and heavier on large screens.</p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9nZXRib290c3RyYXAuY29tLw%3D%3D&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>3- Bootstrap</strong></a></h4>
<p>Bootstrap is the most popular adaptive framework used by numerous website development companies all over the world. You must know that Many themes on Themeforest have a built-in framework Bootstrap. The learning curve of this framework is slightly lower than other frameworks. It is a great framework for beginners to learn the ifs and buts of responsive web design. </p>
<p>It is a suitable framework to <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cud29yZHN1Y2Nvci5jb20v&feed-stats-url-post-id=107613">create responsive WordPress websites</a> in an easy way. This framework includes HTML, CSS and JS components. It adheres to the standards of responsive web design, enabling you to build responsive websites of any complexity and size in an easy way. Regular updates in the framework allow you to add new features and functionalities to websites and make them more useful for the targeted audience. </p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9ndW1ieWZyYW1ld29yay5jb20v&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>4- Gumby</strong></a></h4>
<p>It is a flexible & adaptive framework with many unique UI components, which are not found in other frameworks. Digital Surgeons have developed it. Front-end developers may use this framework to create interesting and useful websites. It has extensions that add functionality to the basic installation.</p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cDovL2dldHNrZWxldG9uLmNvbS8%3D&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>5- Skeleton</strong></a></h4>
<p>This framework is based on JavaScript and CSS. It is used to accelerate the creation of responsive websites correctly display them on both large monitors and small gadget screen. The framework can be adapted to any design. The framework is compatible with <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cudG9wdGVucmV2aWV3cy5jb20vc29mdHdhcmUvaW50ZXJuZXQvYmVzdC1pbnRlcm5ldC1icm93c2VyLXNvZnR3YXJlLw%3D%3D&feed-stats-url-post-id=107613" rel="nofollow noopener">all major browsers</a>. The markup grid has 12 columns with a base width of 960 pixels.</p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9tYXRlcmlhbGl6ZWNzcy5jb20v&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>6- Materialize</strong></a></h4>
<p>Materialize is an adaptive front-end framework that easily meets Google’s design specifications for material design. You get ready-made sets of buttons, icons, cards, forms and other components. There is a convenient grid with which you can create layouts. Furthermore, in the standard set, there are lots of design materials for shadows, fonts, colors, etc. Useful features, such as animation with the effect of pulsation, traveling menu for mobile devices, SASS mixings, etc, make this framework different from others. </p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9wdXJlY3NzLmlvLw%3D%3D&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>7- Pure</strong></a></h4>
<p>This framework is created by the Yahoo development team. It comes with the light-weight array of CSS modules that fits in any project. With its help, you can create responsive buttons, menus, grids, tables, etc, easily and quickly. The framework is created in pure CSS and does not support JS or JQuery plugins. After minification and compression via Gzip, this framework is compressed to 4.5K, which makes it one of the easiest and agile front-end frameworks. It is perfect for creating all types of mobile responsive websites. </p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly9nZXR1aWtpdC5jb20v&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>8- UIKit</strong></a></h4>
<p>UIKit is a high-modular front-end framework that stands out from the crowd because of a number of reasons. The presence of two preprocessors, LESS and Sass. Because of its flexible and adaptive components with clear names, it has become one of the most popular front-end frameworks. The framework includes 30 modular components, HTML forms and tables, JS components, common elements such as buttons, marks and overlay layers, and layout components. You can easily customize the look and feel of your website & make it more appealing for all. </p>
<h4><a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cDovL2xlc3NmcmFtZXdvcmsuY29tLw%3D%3D&feed-stats-url-post-id=107613" rel="nofollow noopener"><strong>9- Less Framework 4</strong></a></h4>
<p>Less Framework a CSS system for creating all types of responsive websites. The framework contains 4 layouts and three sets of graphics- all based on a single grid. You can use this framework to create different types of layout and replace elements of one layout with elements of another layout to change the code and create amazing websites that load quickly on all devices. </p>
<h4>10- <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuc2lpbXBsZS54eXov&feed-stats-url-post-id=107613" rel="nofollow noopener">Siimple</a></h4>
<p>You can use this framework to create amazing responsive websites. It is a flexible & aesthetically built framework for all web developers who want to create amazing web pages with flat & clean design. It helps you to create user-centric websites. The framework comes with a few lines of code. You can compress those codes up to 6KB. This is a suitable framework for novice web designs who are learning the art of creating responsive websites. </p>
<h3><strong>Final Words</strong></h3>
<p>So, it is clear that a framework is a set of tools, libraries and ready-made modules used by web designers/developers to create websites. Responsive websites built with frameworks have greater accessibility, better adaptability and outstanding compliance to the set rules and regulations of web development. Choose from these options to speed up the creation of responsive websites. Best of luck!</p>
<div class="fixed"></div>
</div>
<div class="under">
<span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div>
</div>
<div class="post" id="post-2303144">
<h2><a class="title" href="http://www.webmastersgallery.com/2019/05/21/8-beautiful-web-design-trends-to-take-you-away-infographic/" rel="bookmark">8 Beautiful Web Design Trends to Take You Away – [Infographic]</a></h2>
<div class="info">
<span class="date">May 21st, 2019</span>
<span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/05/21/8-beautiful-web-design-trends-to-take-you-away-infographic/#respond">No comments</a></span>
<div class="fixed"></div>
</div>
<div class="content">
<div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/Noupe/~3/Z-LrWSzeeu4/8-beautiful-web-design-trends-to-take-you-away-infographic.html"><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2019/05/Header-e1555342644655.png" alt=""></a></div>
<div></div>
<p>Where? When? For how long? With whom? To see and do what? A myriad of personal and seasonal factors influence a traveler’s decision when they book.</p>
<p>And with their precious vacation time at stake, customers are especially thorough when it comes to researching their destinations. </p>
<p>In 2017, users spent on average of <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cuZnVlbHRyYXZlbC5jb20vMjAxNy1mdWVsLXRyYXZlbC13ZWJzaXRlLXN0dWR5Lw%3D%3D&feed-stats-url-post-id=107624">nearly half an hour browsing a hotel’s website</a> before deciding whether to book – this is more than 10 times the average browser session for the web at large. And while the information customers find while booking is important, booking decisions are not solely based on services and availability. <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cudml6bGx5LmNvbS9ibG9nLTIwMTctdHJhdmVsLXdlYnNpdGUtYmVoYXZpb3Itc3R1ZHkta2V5LWZpbmRpbmdzLWltcGFjdC1ob3RlbC13ZWJzaXRlLw%3D%3D&feed-stats-url-post-id=107624">77% of online travel shoppers</a> feel that their booking decisions are impacted by site functionality and navigability.</p>
<p>Because the web is the primary medium through which customers today will discover, research, and book their travel plans, maintaining a professional and engaging web presence is crucial to success in the tourism sector. </p>
<p>Think of your travel website as an extension of the travel experience you are offering. Not only should your website reflect your professionalism, knowledge, and hospitality, but it should also appeal to your target clientele on many of the same levels that your services do. <br />The following resource from travel search engine Reservations.com explores eight <a target="_blank" href="https://www.noupe.com/?feed-stats-url=aHR0cHM6Ly93d3cucmVzZXJ2YXRpb25zLmNvbS9ibG9nL3Jlc291cmNlcy90cmF2ZWwtZGVzaWduLXRyZW5kcy8%3D&feed-stats-url-post-id=107624">trends in web design</a> that travel sites around the world are using to create seamless visitor experiences from start to finish:</p>
<figure><img decoding="async" src="https://www.noupe.com/wp-content/uploads/2019/05/Travel-Design-Trends-Reservations-com-1-1.jpg" alt=""></figure>
<div class="fixed"></div>
</div>
<div class="under">
<span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div>
</div>
<div class="post" id="post-2301613">
<h2><a class="title" href="http://www.webmastersgallery.com/2019/05/20/the-inside-problem/" rel="bookmark">The “Inside” Problem</a></h2>
<div class="info">
<span class="date">May 20th, 2019</span>
<span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/05/20/the-inside-problem/#respond">No comments</a></span>
<div class="fixed"></div>
</div>
<div class="content">
<p>So, you’re working on a design. You need a full-width container element because the design has a <code>background-color</code> that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:</p>
<ol>
<li>Limit the width (for large screens)</li>
<li>Pad the edges</li>
<li>Center the content</li>
</ol>
<p>It’s “the inside problem” in web layout. It’s not hard, it’s just that there are lots of considerations. </p>
<p><span></span></p>
<blockquote>
<p lang="en" dir="ltr">The “inside” issue. Centered, max-width/padding containers inside full-width color bands. </p>
<p>What’s your favorite pattern?</p>
<p>(Just a fun every day thing with many possible solutions to consider!) <a target="_blank" href="https://t.co/pNYf5YsQMp">pic.twitter.com/pNYf5YsQMp</a></p>
<p>— Chris Coyier (@chriscoyier) <a target="_blank" href="https://twitter.com/chriscoyier/status/1106174863234998274?ref_src=twsrc%5Etfw">March 14, 2019</a></p>
</blockquote>
<h3>The classic solution is an outer and inner container.</h3>
<p>The parent element is naturally as wide as it’s own parent, and let’s assume that’s the <code></code> element, or the entire width of the browser window. That takes the <code>background-color</code> and pads the left and right sides. The inside element is what limits the width inside and centers.</p>
<pre><code><footer>
<div class="inside">
Content
</div>
</footer></code></pre>
<pre><code>footer {
--contentWidth: 400px;
background: lightcoral;
padding: 2rem 1rem;
}
.inside {
max-width: var(--contentWidth);
margin: 0 auto;
}</code></pre>
<p>This is what my brain reaches for first. Doesn’t use anything fancy and feels perfectly understandable. That “inside” element isn’t wonderfully desirable, only because it feels like busywork to remember to add it to the markup each time this pattern is used, but it does the trick with few other downsides.</p>
<p>
<span>See the Pen <a target="_blank" href="https://codepen.io/chriscoyier/pen/NVbKNZ/"><br />
Classic “inside” element</a> by Chris Coyier (<a target="_blank" href="https://codepen.io/chriscoyier">@chriscoyier</a>)<br />
on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span>
</p>
<h3>What if you only can use a single element?</h3>
<p>These type of limitations aren’t my favorite, because I feel like a healthy project allows designers and developers to have whatever kind of control over the final HTML, CSS, and JavaScript output they need to do the best possible job. But, alas, sometimes you’re in a weird position as a contractor or have legacy CMS issues or whatever.</p>
<p>If you only have a single element to work with, padding <i>sorrrrrta kinnnnda</i> works. The trick is to use <code>calc()</code> and subtract half of the content’s maximum width from 100%. </p>
<pre><code><footer>
Content
</footer></code></pre>
<pre><code>footer {
--contentWidth: 600px;
background: lightcoral;
padding: 2rem calc((100% - var(--contentWidth)) / 2);
}</code></pre>
<p>
<span>See the Pen <a target="_blank" href="https://codepen.io/chriscoyier/pen/VOYxOa/"><br />
VOYxOa</a> by Chris Coyier (<a target="_blank" href="https://codepen.io/chriscoyier">@chriscoyier</a>)<br />
on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span>
</p>
<p>The problem here is that it doesn’t prevent <em>edge-touching</em>, which might make this entirely unacceptable. Maybe you could select elements inside (paragraphs and whatnot…) and add padding to those (with a universal selector, like <code>footer > *</code>). It’s tempting to put padding way up on the <code></code> or something to prevent edge-touching, but that doesn’t work because we want that edge-to-edge background color.</p>
<h3>What if you’re already inside a container you can’t control and need to break out of it?</h3>
<p>Well, you can always do the ol’ <a target="_blank" href="https://andy-bell.design/wrote/creating-a-full-bleed-css-utility/">full-width utility</a> thing. This will work in a centered container of any width:</p>
<pre><code>.full-width {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}</code></pre>
<p>But that leaves the content inside at full width as well. So, you’d need to turn to an inside element again.</p>
<p>
<span>See the Pen <a target="_blank" href="https://codepen.io/chriscoyier/pen/MdJNWV/"><br />
Full width element with inside element</a> by Chris Coyier (<a target="_blank" href="https://codepen.io/chriscoyier">@chriscoyier</a>)<br />
on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span>
</p>
<p>Also, as soon as you have a vertical scrollbar, that 100vw value will trigger an obnoxious horizontal scrollbar. Some sites can pull off something like this to get rid of that scroll:</p>
<pre><code>body { overflow-x: hidden; }</code></pre>
<p>That’s pretty nice. If you can’t do that, though, you might need to set an explicit width on the scrollbar, then subtract that from 100vw. </p>
<pre><code>body {
scrollbar-width: 20px; /* future standards way */
}
body::-webkit-scrollbar { /* long-standing webkit way */
width: 20px;
}
.full-width {
width: calc(100vw - 20px);
}</code></pre>
<p>Even that kinda sucks as it means the full-width container isn’t <em>quite</em> full width when there is no vertical scrolling. I’d love to see CSS step it up here and help, probably with improved viewport units handling.</p>
<p><a target="_blank" href="https://css-tricks.com/full-width-containers-limited-width-parents/">There are a variety of other ways of handling this</a> full-width container thing, like Yanking to the edges with margins and such. However, they all ultimately need viewport units and suffer from the same scrollbar-related fate as a result.</p>
<h3>If you can definitely hide the overflow-x on the parent, then extreme negative-margin and positive-padding can do the trick.</h3>
<p>This is kinda cool in that it uses nothing modern at all. All very old school CSS properties. </p>
<p>
<span>See the Pen <a target="_blank" href="https://codepen.io/chriscoyier/pen/pmRMQx/"><br />
Full Width Bars Using Negative Margins</a> by Chris Coyier (<a target="_blank" href="https://codepen.io/chriscoyier">@chriscoyier</a>)<br />
on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span>
</p>
<h3>Can CSS Grid or Flexbox help here?</h3>
<p>Meh. Not really.</p>
<p>I mean, sure, you could set up a three-column grid and place the content in the center column, while using the outside columns as padding. I don’t think that’s a particularly compelling use of grid and it adds complication for no benefit — that is, unless you’re already using and taking advantage of grid at this scope.</p>
<h3>Fake the edges instead.</h3>
<p>There is no law that the <code>background-color</code> needs to come from one single continuous element. You could always “fake” the left and right sides by kicking out a huge <code>box-shadow</code> or placing a pseudo element wherever needed.</p>
<p><a target="_blank" href="https://css-tricks.com/full-browser-width-bars/#article-header-id-1">We cover various techniques around that here.</a></p>
<p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/the-inside-problem/">The “Inside” Problem</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p>
<div class="fixed"></div>
</div>
<div class="under">
<span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div>
</div>
<div class="post" id="post-2301308">
<h2><a class="title" href="http://www.webmastersgallery.com/2019/05/20/creating-a-diversity-scholarship-program-for-your-conference/" rel="bookmark">Creating a Diversity Scholarship Program for Your Conference</a></h2>
<div class="info">
<span class="date">May 20th, 2019</span>
<span class="author"><a href="http://www.webmastersgallery.com/author/admin/" title="Posts by admin" rel="author">admin</a></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/05/20/creating-a-diversity-scholarship-program-for-your-conference/#respond">No comments</a></span>
<div class="fixed"></div>
</div>
<div class="content">
<div class="ftpimagefix" style="float:left"><a target="_blank" href="https://css-tricks.com/creating-a-diversity-scholarship-program-for-your-conference/"><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/05/s_17A382124577A8598CC77FE6BCFC06A0C8BBD8F907F5443B174C9E7B7D164199_1556135366674_OpenSourceSummit.jpg" alt=""></a></div>
<p>My partner and I ran a design and development conference company for eight years. During that time, we produced hundreds of hours of conferences, both on-site and online. Diversity scholarships were only becoming a typical conference offering around the time we decided to sunset our business. So, when we committed to collaborate on an updated <a target="_blank" href="https://artifactconf.com/">ARTIFACT conference</a>, I knew right away I wanted to make <a target="_blank" href="https://artifactconf.com/scholarships/">Diversity Scholarships</a> available.</p>
<p><span></span></p>
<p>We always worked on making our events inclusive, so adding a program that would enhance that inclusion even more seemed like a no-brainer. When I started to research how to create a diversity scholarship program, though, the only examples I could find were finished programs, and not much documentation about the thinking or planning that created them. It’s not unusual to improvise a solution to a problem and make changes on the fly, in fact it’s pretty routine when you run a small business. A diversity scholarship program was something I wanted to get right, though?—?or at least as “right” as possible?—?the first time around. I decided to look a little deeper than what was available online.</p>
<blockquote>
<p lang="en" dir="ltr">Tech conference organizers: have you offered diversity scholarships for your events? Would you be willing to answer a few questions about it? PM or @ me if interested. TIA!</p>
<p>Other sentient beings reading this: Can I get an RT to reach as many organizers as possible? Thanks!</p>
<p>— Ari Stiles (@ari4nne) <a target="_blank" href="https://twitter.com/ari4nne/status/1105201978970267648?ref_src=twsrc%5Etfw">March 11, 2019</a></p>
</blockquote>
<p>Twitter helped me find conference organizers who had created and run diversity scholarship programs. I ended up talking to several organizers about their experiences, in addition to comparing a couple dozen programs and applications online.</p>
<figure><figcaption>Between sessions at the Open Source Summit (photo courtesy of the Linux Foundation)</figcaption></figure>
<h3>Before we dive in</h3>
<p>There are two types of readers I’d like to address:</p>
<ol>
<li><strong>If you don’t think the lack of diversity in tech is a problem</strong>, or don’t see why a scholarship program is necessary, this article is not for you. It is written with the assumption that the reader is already convinced of the merits of diversity, and is looking for ways to build a more diverse audience at the conferences or tech events they host; or</li>
<li><strong>If you are overwhelmed by the lack-of-diversity-in-tech issue</strong>, so much that you feel uncomfortable even addressing it, you are not alone. The problem is systemic, with deep, historical roots. It’s important to remember that you alone cannot solve the problems of an entire industry with one program or one event. Focus instead on what you <em>can</em> create, even with limited resources. Ask for help when you need it?—?most conference organizers I’ve met are glad to help.</li>
</ol>
<h3>From the beginning</h3>
<p>So much of the planning for an inclusive conference takes place <em>before</em> you even begin talking about things like diversity scholarships. If your destination city is a relatively inexpensive and easy place to visit; if your venue is accessible and you’ve made plans for accommodations like live captioning; if your ticket prices are reasonable; and if your speaker lineup is genuinely diverse, you’ve got a strong foundation to build on.</p>
<p>Most of this can be accomplished with research. Cities popular with tourists tend to have reasonable transportation and accommodation prices. Cities with big tech hubs often have large, sometimes state-of-the art meeting spaces to hold conferences. Finding cities that have both can be a challenge, but the combination ultimately makes your conference more accessible to different types of attendees.</p>
<figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/05/s_17A382124577A8598CC77FE6BCFC06A0C8BBD8F907F5443B174C9E7B7D164199_1556137907217_conference-lineups.jpg" alt=""><figcaption>Creating a diverse lineup of speakers may attract a more diverse set of attendees (left to right: Sample speaker lineups from Hopper Celebration, Alterconf, and Clarity Conference)</figcaption></figure>
<p>A little more work may have to go into your speaker lineup. Although there has been some progress on this issue, the majority of tech conferences still mostly feature white men. There have been <a target="_blank" href="https://code.likeagirl.io/6-steps-to-a-more-diverse-speaker-line-up-31d01c3b79a">plenty of articles written</a> on <a target="_blank" href="http://juliepagano.com/blog/2014/08/26/building-a-diverse-speaker-lineup/">how to create a diverse speaker lineup</a>, but one of my favorite tips is to <strong>focus on your conference content</strong> first and foremost. Thinking in terms of content makes it easier to look past a potential speaker’s popularity. It also works against your natural bias toward picking “friends” or people you have worked with before. By focusing instead on the content a speaker provides, you can evaluate how that content might add to your overall theme and how it might affect your audience. Curating content is more work than just lining up a group of well-known speakers, but it pays off in the form of a more focused conference and?—?usually?—?a more diverse lineup.</p>
<p>You’ll also need to encourage open discussion among your co-organizers about diversity issues. My first job in conference planning was for <a target="_blank" href="https://www.sxsw.com/festivals/interactive/">South by SouthWest Interactive (SXSWi)</a>, and I feel lucky to have gotten my start working in an environment where these discussions were regular, open, and just “part of the process.” As with any skill, the more you practice talking about diversity, the easier it becomes.</p>
<p>Craft Conference has put together a video about their diversity program. <a target="_blank" href="https://www.youtube.com/watch?v=C2E_b7Ewups">These testimonials may help further the conversation</a> with your colleagues.</p>
<h3>Ask yourself why</h3>
<p>Diversity and equity scholarship programs have become popular offerings at tech conferences for many reasons. We need more diversity in the industry, and the current thinking is that more diverse conferences can create more leadership and presentation opportunities for underrepresented populations. Diversity can lead to more robust discussions, too. <a target="_blank" href="https://perfmattersconf.com/diversity/">This goal stated plainly on the Web site for #Perfmatters</a>, run by <a target="_blank" href="https://twitter.com/estellevw">Estelle Weyl</a>:</p>
<blockquote>
<p>“We want to ensure the conversation is stimulating and help everyone see their own Web app issues from new and different perspectives. For that, we need attendees with different perspectives. While we love everyone, conferences where all attendees come from corporations with generous continuing education budgets aren’t as interesting for participants as when attendees represent different work and life experiences.”</p>
</blockquote>
<p>It can be useful to do a little soul-searching to think about why you and your co-organizers want to do this. “More than anything,” says <a target="_blank" href="https://twitter.com/gemelket">Tenessa Gemelke</a>, organizer of <a target="_blank" href="https://www.confabevents.com/">Confab</a>, “we wanted to remove obstacles, not just check boxes.” It’s easy to tell ourselves that because we’ve recruited a few women or people of color, we’ve “taken care of” conference diversity and we can move on to the next task. The needs of your diversity scholarship recipients are not checklist items?—?they are the building blocks of a more inclusive community.</p>
<p>Brainstorming a bit about the reasons you want to build a diversity scholarship program can help you set goals, identify problems specific to your target audience, and define limits. You might even discover that you have secondary objectives, which is not unusual.</p>
<p><a target="_blank" href="https://twitter.com/justinxreese">Justin Reese</a> is the Founder of <a target="_blank" href="https://codeandsupply.co/">Code & Supply</a> and co-creator of <a target="_blank" href="https://codeandsupply.co/conferences">several conferences</a> based in Pittsburgh, PA. In addition to the traditional uses for diversity scholarships, he and his staff occasionally use scholarship funds to send up-and-coming hometown speakers to other cities. “We want people to see the talent and resources we have here in Pittsburgh,” says Reese. He and his team think of Code & Supply scholarships as a way to showcase local talent and build a robust, diverse tech community in their home town.</p>
<p>At <a target="_blank" href="https://artifactconf.com/">ARTIFACT</a>, we think of diversity and inclusion as the future of technology. So, in addition to building a robust, inclusive community, we see our diversity scholarship program as a vital part of a forward-thinking conference. Techniques and workflow change not only because of new gadgets and platforms, but because of new audiences and different types of teams.</p>
<h3>Taking stock</h3>
<p>Once you’ve settled on your “why,” it’s best to determine your “what”?—?as in, what you have to offer. Do you have any resources or perks on hand that will require <em>no</em> help from sponsors? For example, some conferences have more space than they need. Can you give some tickets away for free, or at a discount? Or if you have limited space, can you make a few free or discounted tickets possible by bumping up the cost of your other tickets? Make a list of what you can offer for free or from simple changes to your conference plan.</p>
<p>Other services that you might consider offering through your diversity scholarship program:</p>
<ul>
<li>Assisting with travel</li>
<li>Assisting with accommodations</li>
<li>Meal stipends</li>
<li>On-site childcare</li>
<li>On-site nursing / feeding spaces</li>
</ul>
<p>Some organizers even make travel and hotel reservations for their diversity scholarship attendees. It makes sense?—?most conferences already make these arrangements for their presenters, so it’s easy to do it for a few more people. This service may help scholarship dollars stretch a little further too, if the extra travel or booked rooms are available at a bulk discount.</p>
<p>If you want to offer more than just the basics, you will probably have to work with sponsors. The good news here is that sponsors often enjoy investing in diversity initiatives. Before approaching a potential sponsor, though, it’s wise to be clear on how you plan to spend the money. Consider creating a one-sheet that states your goals, the underrepresented groups you are trying to recruit, and what perks the sponsor can expect for participating. This way, you have something to leave behind for sponsors who want to think it over or who need to present the idea to others before it gets approval. Be sure to include your contact information.</p>
<h3>Set your goals</h3>
<p>It’s useful to think about how many diversity scholarships you’d like to offer in an ideal situation. In practice, that perfect number will probably drop based on your budget or lack of space, but having a lofty goal may encourage you to try a little harder.</p>
<p>Among the conference organizers I spoke with, the number of diversity scholarship recipients ranged from two to fifteen percent of total ticket sales. Those with higher numbers started with higher goals.</p>
<figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/05/s_17A382124577A8598CC77FE6BCFC06A0C8BBD8F907F5443B174C9E7B7D164199_1556138184273_JSCampBarcelona.jpg" alt=""><figcaption>Attendees at JSCamp Barcelona</figcaption></figure>
<h3>Making it happen</h3>
<p>Figuring out the logistics of a diversity scholarship plan may be the most complicated part of the process. Trying to figure out how to juggle all the tasks involved is what spurred me to do all this research in the first place!</p>
<p>Implementation will include some combination of the following steps, not necessarily in this order:</p>
<h4>Put someone in charge</h4>
<p>Your entire staff may be involved with processing diversity scholarships, but it’s a good idea to have one person oversee the whole program for the sake of continuity. There is a great deal of communication involved with this process, so it helps to choose a point person with strong organization and communication skills. The most significant qualification, though, is a real passion for creating a diverse conference community.</p>
<h4>Create a reasonable timeline</h4>
<p>With input from your team, set application deadlines, reviewing deadlines, and scholarship offer deadlines. <em>Every</em> organizer I spoke with suggested making these deadlines early in the process and sticking to them. </p>
<p>You’ll need enough time to review applications and make scholarship offers early enough to give your attendees time to plan. Remember that they might have to request time off work, make family care arrangements, and deal with other obligations. People from out of town need at least two months notice, and international attendees may need three months or more. Early deadlines help everyone. No one in your organization wants to review applications at the last minute anyway, since conference planning gets more intense in the weeks leading up to the event.</p>
<p>Any unclaimed scholarship resources can be used by qualified local attendees in the weeks leading up to your event. Since they don’t have to factor in travel or accommodations, it is easier for local attendees to make plans at the last minute.</p>
<h4>Make your scholarship program easy to find</h4>
<p>Devote a page to your diversity scholarship program on your site, then link to that page as reasonably often as possible. If you can‘t list it in your main menu, consider linking it from the site footer and from the ticket sales page, in addition to posting about it regularly on social media.</p>
<h4>Clearly state who qualifies for aid</h4>
<p>The list may vary a bit based on your typical audience, but we chose the following criteria:</p>
<ul>
<li>People of color</li>
<li>Indigenous persons</li>
<li>People with disabilities</li>
<li>People who identify as <abbr>LGBTQIA+</abbr></li>
<li>Women</li>
<li>Veterans and new graduates just beginning their tech careers</li>
<li>Full-time students</li>
<li>People who work for nonprofit/educational/government institution with limited funds</li>
<li>People who are 55 years old or older</li>
<li>People who are currently unemployed / underemployed</li>
<li>People experiencing temporary financial hardship</li>
</ul>
<p>Be sure to list the types of aid available (determined earlier, when you were “<a target="_blank" href="https://css-tricks.com/#article-header-id-3">taking stock</a>“). It’s also good to let your applicants know that not every application will be accommodated, and that all applications will be verified.</p>
<h4>Collect the information you need?</h4>
<p>Most conferences use some kind of online application form to collect and organize data. If you are not able to code one yourself, <a target="_blank" href="https://www.google.com/forms/about/">Google Forms</a> or <a target="_blank" href="https://www.wufoo.com/">Wufoo</a> make it pretty easy to build a form. Keep the application as simple as you can?—?you’ll need:</p>
<ul>
<li>name,</li>
<li>contact information,</li>
<li>the reason(s) they qualify for aid (instead of a blank field, consider listing qualifications on the form as a way of reiterating the types of attendees you are trying to recruit),</li>
<li>the type of aid they are requesting (again, listing they types of aid available will help applicants understand what’s possible), and</li>
<li>maybe a statement about why they want to attend or why they need aid at this time.</li>
</ul>
<p>You’ll want the form to compile data in a way that will be easy to sort through later, like a spreadsheet.</p>
<h4>Preserve the anonymity of your applicants</h4>
<p>Asking for help in a society that values self-sufficiency over shared responsibility can be tough. Don’t make it harder by asking applicants to divulge too much personal information, participate in open interviews with committee members, or meet with sponsors as part of your program. If a committee will be reviewing applications, consider anonymizing the entries before review.</p>
<h4>Verify applications</h4>
<p>This should be an ongoing process for several reasons. Some applicants will qualify for your program for reasons that are not always verifiable, so the person doing the vetting may need to contact them and clarify the request. </p>
<p>Other applicants may either misunderstand or overlook your qualifying criteria. The most common mistake many applicants make is assuming they qualify for aid only because their employer won’t cover the cost of the conference. This is where additional information will help: why isn’t this covered? Does the company have very limited funds, or is their travel budget just maxed out already? Does the applicant qualify for a diversity scholarship on other grounds? Applicants should know early in the process if their application is refused or if more information is needed.</p>
<h4>Evaluate applications</h4>
<p>Once the application deadline is met, evaluation begins. If your applications have been properly vetted, then the hardest work is already done. If a committee is evaluating applications, it’s good to not only figure out a way to anonymize applications, but also to streamline the evaluation process. Maybe give each committee member two or three questions to rate for each applicant. Possible evaluation questions:</p>
<ul>
<li>How clearly is the need for aid stated?</li>
<li>How much aid is needed?</li>
<li>How much would this attendee impact the conference?</li>
<li>How much would the conference impact this attendee?</li>
</ul>
<p>These can be rated on a scale, maybe one to ten, with ten being highest. This makes calculating scores easy. Other data you might choose to consider: when was the application received? Do you want to consider more local applicants than those from out-of-town?</p>
<h4>Make and process scholarship offers and refusals</h4>
<p>Evaluations have been made, so you are probably left with a set of applicants you want to offer scholarships to, some applicants you are not sure about yet, and a few that you plan to refuse. Start by making offers to those applicants you want to help attend the conference. Clearly state how much help you are offering and a deadline for accepting or refusing the offer.</p>
<p>If you are working with a particularly long waiting list, or the process is going slowly (more than two weeks since you began awarding scholarships), it’s courteous to let people know they are on a waiting list. </p>
<p>At ARTIFACT, we are assuming that some applicants may have a change in plans and therefore may have to refuse the scholarship. In that case, we will be passing along their offer to the next person on our waiting list. </p>
<p>Once all the offers have been made and accepted, it’s time to email the rest of the applicants, thank them for their participation, and let them know they won’t be receiving a scholarship offer. If you can, it’s nice to offer something to those who didn’t receive a scholarship: maybe a discounted ticket if they still choose to attend, or an invitation to any after-hour events, where you have room for a few extra people. </p>
<h4>Create feedback mechanisms</h4>
<p>In addition to all the input you sought from your colleagues in the beginning, you’ll need feedback on every aspect of the program. Make that easy to do by including an email address or link to a feedback form on your scholarship description page, your application form, and anywhere else on your site that seems appropriate. Once you start awarding scholarships, make communication a high priority. Consider creating a way to collect anonymous feedback from scholarship awardees and sponsors—easier to do if you have a larger conference—to foster honest, less inhibited comments.</p>
<h3>Wait and see (and listen)</h3>
<p>Now that everything needed for your diversity scholarship program is in place, it’s time to follow your plan and take note of what works and what doesn’t. Stay flexible, as you may have to change some parts of your program on the fly. Keep thinking in terms of equity for all of your applicants, and communicate openly about any changes you make. Applicants are more likely to trust a transparent process.</p>
<p>Listen more than you talk. Always.</p>
<figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/05/s_17A382124577A8598CC77FE6BCFC06A0C8BBD8F907F5443B174C9E7B7D164199_1556138396719_Tapia.jpg" alt=""><figcaption>Scholarship recipients for the Tapia Conference, a conference that celebrates and nurtures diversity in computing</figcaption></figure>
<h3>Follow up</h3>
<p>Once ARTIFACT 2019 has concluded, I’ll be compiling all of our results and feedback in one place and writing a follow-up to this article. Until then, I’d like to thank all the conference organizers who took the time to answer my questions about diversity scholarship programs: <a target="_blank" href="https://twitter.com/gemelket">Tenessa Gemelke</a>, <a target="_blank" href="https://twitter.com/estellevw">Estelle Weyl</a>, <a target="_blank" href="https://twitter.com/justinxreese">Justin Reese</a>, <a target="_blank" href="https://twitter.com/vlh">Val Head</a>, <a target="_blank" href="https://twitter.com/davethegr8">Dave Poole</a>, <a target="_blank" href="https://twitter.com/codeJENNerator">Jenn Strater</a>, <a target="_blank" href="https://twitter.com/@CraftConf">Ádám Boros</a>, and <a target="_blank" href="https://twitter.com/aspleenic">PJ Hagerty</a>.</p>
<p>In the meantime, here are some other resources you might find helpful:</p>
<ul>
<li>Follow <a target="_blank" href="https://twitter.com/ashedryden">Ashe Dryden</a> on Twitter. She gives presentations on diversity and inclusion, and is <a target="_blank" href="https://leanpub.com/u/ashedryden">currently working on two books about the subject</a>.</li>
<li>Take a look at <a target="_blank" href="https://www.aiga.org/diversity-and-inclusion-resources">AIGA’s Diversity and Inclusion resources</a>.</li>
<li><a target="_blank" href="https://twitter.com/anitas3791">Anita Singh</a> wrote a pretty <a target="_blank" href="https://code.likeagirl.io/steps-to-make-diversity-inclusion-a-reality-7c2ed5cff739">comprehensive piece on diversity and inclusion in hiring</a> for <a target="_blank" href="https://codelikeagirl.org/">Code Like a Girl,</a> and plenty of it applies to conference diversity, too.</li>
</ul>
<p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/creating-a-diversity-scholarship-program-for-your-conference/">Creating a Diversity Scholarship Program for Your Conference</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p>
<div class="fixed"></div>
</div>
<div class="under">
<span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div>
</div>
<div class="post" id="post-2301104">
<h2><a class="title" href="http://www.webmastersgallery.com/2019/05/20/designing-for-users-across-cultures-an-interview-with-jenny-shen/" rel="bookmark">Designing For Users Across Cultures: An Interview With Jenny Shen</a></h2>
<div class="info">
<span class="date">May 20th, 2019</span>
<span class="author"></span> <span class="comments"><a href="http://www.webmastersgallery.com/2019/05/20/designing-for-users-across-cultures-an-interview-with-jenny-shen/#respond">No comments</a></span>
<div class="fixed"></div>
</div>
<div class="content">
<div class="ftpimagefix" style="float:left"><a target="_blank" href="http://feedproxy.google.com/~r/SmashingMagazine/~3/IfWMk5lCHs0/"><img decoding="async" src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial"></a></div>
<p> <title>Designing For Users Across Cultures: An Interview With Jenny Shen
Designing For Users Across Cultures: An Interview With Jenny Shen
In this video, we are pleased to feature Jenny Shen who is a UX Consultant and has worked with numerous startups and brands including Neiman Marcus, Crate&Barrel, eBuddy, IBM, TravelBird and Randstad. Her current focus is helping businesses innovate and designing inclusive product experiences for global users. She is interviewed by Jason Pamental, who has already spoken at our San Francisco conference. Jason is a strategist, designer, technologist, and author of Responsive Typography from O’Reilly.
In their conversation, we discover how we can approach localizing and internationalizing our websites, over and above simply offering a translation of the material. This is something that Jenny will also focus on in her talk at our Toronto SmashingConf.
Vitaly: Okay, hello everyone. I’m looking forward to having a wonderful conversation today. We have Jason with us today. Jason, how are we doing today?
Jason: I’m doing very well. I’m excited about this.
Vitaly: Oh yes.
Jason: Something new and fun.
Vitaly: This is new and fun. Some of you might know we have Smashing TV and Smashing TV is all about planning some sort of webinars and sessions and interviews and all that. We always look for new adventures. Jason, you like adventures?
Jason: Very much.
Vitaly: Who doesn’t like adventures? In this particular adventures, we’re looking into actually just having conversations. Like, you know, you take a cup of coffee, sit down with a person you admire or you like or you feel like they have something to share. You just have a conversation. This is not about slides, it’s not about presenting, it’s all about really just kind of human interaction between two people genuinely interested in a particular topic. And so, with that, I’m very privileged to have Jason with us today, who’s going to be the interviewer, and who’s going to introduce the speaker or the person who he’s going to speak with. We just came from Smashing Con, San Francisco two weeks ago. It was a wonderful experience because Jason would just come on stage, sit down, take a cup of coffee, work through his design process and stuff. And he’s very curious, right? This is something that you need in a person who can run interviews really well. You might see Jason more often in the future. Maybe, Jason, you can introduce yourself. What do you do for life? What’s the meaning of life for you?
Jason: Well, I suppose in the order of frequency, it’s spending time with my wife, walking the dogs which, most people see on Instagram, riding my bike, and then a whole lot of stuff about typography. Which, is what I was demonstrating when I was at Smashing, San Francisco. The thing that is sort of common for me that runs through is just being curious about stuff and learning new things so the chance to actually learn from more amazing people who are gonna be getting on stage at other Smashing events was too good to pass up. So, I’m pretty excited about this.
Vitaly: We couldn’t be more excited to have you. I think it’s time for me to get my breakfast. I’m sorry, I’m so hungry. I woke up four hours ago, was all about meetings and Jason will take over. Jason, have a wonderful time. I’m looking forward to seeing you when they’re wrapping up this session. Okay? Jason, the stage is yours.
Jason: Thanks, Vitaly. Well, I’m super excited about this for a whole bunch of reasons. But, the main one is I get to introduce to you someone who, correct me if I’m wrong, but I think this is the first time you’re speaking at a Smashing Event? Is that true?
Jenny Chen: Yes. It is the first time.
Jason: Okay. Well, The voice that you’re hearing and the face that you’re seeing is Jenny Chen who is a UX and localization consultant who’s worked with all kinds of big brands including Neiman Marcus, Crate and Barrel, and IBM. In the course of your travels over the web of a number of years which has some pretty amazing lists of credentials. I mean, some things that really stood out to me, that actually I think kind of made you a little bit more compelling in terms of who I really wanted to talk to first: is that not only are you doing all of this incredible work but you’re also a regional director for EMEA for Ladies UX, which is an amazing organization, and you also started your own mentorship program. That teaching aspect, you know, I think is one of the things that I love about getting up on stage and giving talks and workshops and stuff. So, before we actually jump into what you’re gonna be talking about, I’d really love to hear a little bit more from you, about your journey from Taipei, to where you are now, to how you came to be in this industry.
Jenny Chen: Yeah, sure. Thank you, Jason, for the amazing introduction. Yeah. So, as you were saying, I started from Taipei. I was born in Taipei, Taiwan. My journey was…I moved around in a lot of places. My family moved to Canada and I studied there. I studied in Vancouver, Canada.
Jason: Oh, wow.
Jenny Chen: Yeah. I studied Interaction Design. At the time it was like Human-Computer Interaction.
Jason: Right.
Jenny Chen: And then I moved to Singapore and now I’m based in the Netherlands consulting regarding UX projects/localization projects. And just like you mentioned, I am a volunteer EMEA director at Ladies UX and I also run my own mentorship program in the spare time. Yeah. I’ve also been speaking in [crosstalk 00:04:59]
Jason: Because you must have a load of spare time then? So, tell me a little bit about the typical day for you if there is one.
Jenny Chen: Mm-hmm (affirmative) Typical day. These days I have more of a typical day because I’m working with clients and then I am basically just taking my to-do list and doing the job that can help the organization, can help shape product strategy, offer feedback to designers, do some consulting on localization, working on research. And, yeah, like a typical day I could be reviewing a design, giving feedback to my design team. I could be helping a client with more of an approach to hire a designer and I could be running a workshop on product strategy, like really talking about, “This is model canvas and valid composition.” And some days I’m drafting a user research strategy and on some days I am flying over to a different country to actually conducting on-site localization and culture research. So, yeah, there’s not really a typical day because I really do different types of work, types of projects, and I get to work with really amazing clients.
Jason: That’s amazing. I’ve looked at your resume. Your speaking schedule last year was incredible. You were at some of the best events on the web. You were speaking on all kinds of different things. It makes me feel so monotonous. All I ever do is talk about web typography and you seem to cover an incredible range of topics. That really is fascinating to me. And I love that your focus is so well-rounded in that it’s not just about UX it’s also about how design can impact the business. And that’s something that I think is really fascinating and it’s really starting to gain a lot of prominence with research from InVision and McKinsey about what design can bring to the rest of the organization. So, how long has that been more of the focus about business model innovation and all those kinds of strategic topics?
Jenny Chen: Yeah. I actually just transitioned from a designer to a strategist in a little bit more than a year ago. I’d been in the design-
Jason: Really?
Jenny Chen: Yeah. I’d been in the design industry for like six, seven years and I’d been doing, you know, wireframing, the same type of thing the designer would do. Wireframes, prototypes, icons, and stuff like that and it was to the point I really wanted to be more involved on the business side of things. Now that I’m in this role for like more than a year, I really see how being more business-minded and being aware of the business goals and how that needs to work together with a strategy and a design to actually move the needle. Really, the starting point just because I’d been a designer for like six, seven years and I really want to do more. I really want to actually see the impact of my designs. So, that seems like the natural step. And I think learning from a lot of experts from my community as well as going to different conferences and listen and learn from those people who do strategy and are leading design. So, I’m very honored to have a chance to be in those conferences and learn from these leaders.
Jason: That’s really amazing. I hope we’ll have time to come back to that a little bit because I think a lot of designers, as they advance in their career, really look for ways that they can achieve a greater level of impact than just this one project they’re working on. And I think it’s really hard for designers to kind of figure out where they can go.
Jenny Chen: Yeah.
Jason: So, that’s amazing to hear that you’ve made such a great transition. I can’t help but think that there’s a really great relationship between multi-lingual, multi-cultural and localization as this sort of central part of business strategy and how it relates to design and I gather that’s kind of what you’re gonna be talking about in San Francisco. Is that…I’m sorry, in Toronto. Is that true?
Jenny Chen: Yeah. So, my talk will be on moreover how culture affects the design and then I’ll also be touching on how…what are some of the reasons…how can companies benefit from localization. How can companies benefit from expanding to a new market? So these are the type of things that I want to talk about in my talk in Toronto as well as showcasing some case studies. How do reputable companies…how do big companies approach localization and market expansion? Because I have been doing this specifically designs with multiple cultures since 2013 and I’ve definitely learned a lot and then also learned from the companies who are really experts in doing internationalization and localization. So, yeah. I am really excited to share about this.
Jason: That’s really great. And I think for a lot of people, when they think about a language addition to a website, they kind of lump adding a language into what people refer to when they say internationalization. But I know I learned a ton when I listened to Robin Larson from Shopify talk about their work over the past year or so in adding multiple languages to their system. But the phrase you used was localization and that was the thing that really stuck out to me and what I wanted to ask you about because that was something Robin spoke about where it’s not just the language but it’s the phrasing and it’s the cultural things about other aspects of design. So, I’d love to hear more about what that means to you when you’re designing and the kinds of things that you consider in adding a language…whether it’s English and Chinese or Korean or whatever the other kind of cultural implications that go along with that.
Jenny Chen: Yeah. So, regarding localization, for me, it means in all kinds of ways how to adapt a product, an interface, an application to meet the needs, the preferences, expectations, and behaviors of the local users. Like you mentioned, it’s not just about translation, but there are many things from icons, from symbols and colors and sometimes you have text direction and of course the content…all these sort of things that can help a local user feel like, “Hey, this app or this software is designed with me in mind. It’s just not some foreign company…they only hired some translators and they expect me to feel connected to the product.” So, localization, that’s what it means for me and that’s the kind of work that I like to do.
Jason: Mm-hmm (affirmative) And so how often is that work…just for frame of reference, I’ve mostly worked on web content management systems. So, when that first comes up, the first thing that comes to mind is, “Okay. I need to add a language pack. I need to factor this into the language encodings for the theme,” and that sort of thing. But I know there’s a lot of other considerations and there’s a whole range of what people work with. From things that are sort of static sites, where you have a lot of freedom to customize things. But I think a lot of us end up dealing with either its an app infrastructure or a website infrastructure that has to support those multiple languages. So what kind of scenarios have you had to deal with in terms of the technology behind…you know and how you…I’m trying to phrase this better. You know sort of implementing that design and finding the freedom to change the icons to change the phrasing to chan — you know, to make it feel connected. Are you often involved in the technical implementation of that or at least mapping things properly?
Jenny Chen: So actually, on a technical side, not really and there is really different kinds of clients. And then some of them I come into a project and they have already things mapped out, and then usually when I come in is when they have decided a market, or maybe they are thinking about localization. They haven’t decided what market, but they have the infrastructures in place, so I can’t really speak to about the technical infrastructure. But then I’m thinking like what might be useful for someone to know about like why rolling the process, and how to actually even think about, “Well should we change this icon?” It’s all related to — We should think about the business case of localization. I mean we don’t do it just because we can we don’t do it just because its fun, but localization or expanding to a different market or supporting multiple languages. There must be, well, there should be a business reason behind it: is because we want to expand markets, we want to expand to a different market, we want to reach the users, and definitely we are hoping for some success matrix from that market. And if we deem that this is a market that is likely to succeed, or we want to experiment and then the users of that culture/of that market, and they have a strong tendency to let say go for applications that are feel more native, feel more intuitive. And as user experience practitioners like we know that designing the user experience like is going to make the users more loyal, more engaged. So its also considering like the user experience business matrix to decide: Okay, do we want to have this customization available, do we even want to customize it, or do we just want to go for like the minimum localization effort which typically is translations and content localization.
Jason: And so how often does it go further than that? So I mean the things that come to mind that we had kinda gone back and forth a little bit in the questions beforehand: language length, or color, or typography, or layout. How often does that come into play?
Jenny Chen: Mm-hmm (affirmative) That’s a really good question. I would say that it really depends on the industry, it depends on the company stage, it also depends on like where are they, what their business goals are. For just a start-up it’s unlikely that they will fully customize it. They may even not expand into multiple markets when they are just figuring out their product market fit. But lets say for a really established company like Spotify, Shopify as well, they are… they already have a like a market that’s a home market that’s doing really well, and they want to expand and for the — for some target market where they have a really distinct culture like Japan for example, where there’s a lot of different like influences and that can actually affect the layout or the localization element, for example, Singapore or China. And then we look at evaluating what is the — what do we have to do to be successful in the market? For some market, it might not be necessary, like maybe for some markets, they might require less changes than the other. So, I would say, this is a really — it depends, kind of [inaudible 00:17:06] answer to kind of, for us to know, what is actually required and how often does it actually go beyond the basic localization?
Jason: Right, and so in your role, sort of advising your clients on these sorts of things… Do you actually go so far as think about what would the team look like that could do this successfully? Like, what kinds of designers and skills sets you would want to see, to help them be successful?
Jenny Chen: Hmm. Yeah, in my experience, the localization team — then again, depending on the state, depending on — are they in the beginning of setting up the team? Let’s say if they haven’t gotten a team set-up, usually, there is a localization team that takes care of the localization elements, or maybe some, to make sure there is consistency but there is also certain customization elements with the differing market but while the other product team could be focused on specific features. So let’s say like, the whole market team will design the checkout flow, the localization team will then take that checkout flow and customize it for a different market. And, depending on the company size, some more established companies, they could have like the Germany team, the Netherlands team, the Nordics team, the Latin team, to actually hire people who are aware of the culture differences, of the local expectations, the legal requirements and all those things that can actually make or break the product. They either hire people on the ground, or they hire people with that experience, with that knowledge, in their office.
Jason: Right.
Jenny Chen: But there’s really multiple ways we could go about it. What’s really most necessary is people with that knowledge, people with that cultural understanding who can actually design for that target market.
Jason: That’s great. I think that leads into a couple of other things that I really wanted to ask you about. One is, I mean, your background is so geographically varied. How much has that influenced your career direction, in terms of what interests you, and the kinds of things you’ve wanted to focus on?
Jenny Chen: When I was still studying [inaudible 00:19:36] people always like set out their career goal, and what they wanted to be, in 5 years, 10 years, what I want to do. I honestly have never thought that I would be in this industry, in the localization industry. And, I really love what I do, and I think the reason why I’m doing this and maybe like, what shaped my path going here is just having curiosity, you know, towards other cultures and towards the world. I guess, as I traveled more and more, my mind started to open and to really understand cultural differences, the local ways of life. And, being a UX designer like understanding how important it is to have our product user-centered. Then I look at people who are living in other countries and I see, you know, what kind of things do they actually use: What kind of apps, what kind of website, and how that’s so different from what we know and what we’re accustomed to. That’s one of the reasons, curiosity. I really love to travel and I also have moved to many countries just to really be immersed in the local culture, really connect with the local people, try to learn some local language. I’m terrible at Dutch (laughs), but I try where I can. I think it really has enriched my life, it really has enriched my professional experience. I mean, when I moved to Singapore, that’s actually how it gave me the opportunity to design for Malaysia, the Philippines, and Indonesia and countries in that region. When I moved to Amsterdam, I was able to design for Spain, and France, and Germany, and Turkey, like all the countries in this region. I feel very blessed and I really love what I do. I think, again, my curiosity and passion for traveling definitely have played a role in this.
Jason: Yeah, sure sounds like it. So, if you were to try and take — well, so, there’s two parts to this one: I’m wondering if there’s something that you would want, if you could go back to do differently? Like, is there something you had wished you learned more. You’ve moved into business strategy quite a bit more, do you wish you would have studied business? What are the sorts of things that you’re looking to fill in now, that you maybe wished you had learned earlier?
Jenny Chen: Yeah, I think about this sometimes. I think it might have been quite helpful if I studied business administration. But, at the same time, having a degree in design, and having a solid training background in research…I think that’s also a huge asset. Often times I talk to clients and they actually need a researcher. They need somebody who has done this a lot, and somebody who understands the science behind user interface, visibility test and how to like, minimize bias in the whole research process. So I feel like, maybe I should’ve studied business but at the same time, I’m also really happy that I studied design.
Jason: Sure.
Jenny Chen: But, something I’m definitely trying to make up where I don’t have so much expertise regarding the business side. It’s just that I am talking to experts in this area, I’m reading books and listening to podcasts. But definitely, if someone who wants to take on a strategist role, I would say that would be really helpful. Right now that’s actually something that, rather than the design and what tools to use, I’m definitely more interested to learn about the business side of things.
Jason: Mm-hmm (affirmative). At an agency I worked at a few years ago, a bunch of us actually took a Coursera class together, and had a little discussion every week about — It was an MBA focused program to learn about business models, structures, and what is the business model canvas and all those kinds of things. That was really fascinating, I certainly appreciated that. So, the other side of that last question was: your advice to designers who are looking to do more work like this. What are the kinds of things that if a designer wants to understand localization more, and start to move into this world, what kinds of advice would you have for them?
Jenny Chen: I think one thing that quite helped me to do my work in localization is just to be, again, be curious. Not just curious, and physically traveling. Let’s say at the designer who might not have the opportunity to go abroad and do a research trip in another country, we can at least look at international tech news. I still say in [inaudible 00:24:38] my contact in Singapore, and I read tech news in South East Asia, in Taiwan, in other countries where there are English versions available or at least in a language that I can read. You can also download apps or go on websites and really just try to be more aware of how designs or how the software can be different. And, definitely keep an eye out what the other companies are doing in other markets. That is definitely really interesting. We can follow that news like tech crimes to next lab, there’s a lot of news sources, just to keep an eye out and also learn on what people are actually doing regarding localization.
Jason: That’s amazing, great. That’s awesome advice, thank you. The last thing I’m going to ask you about — I think we’re probably getting close to a good time to wrap up but, for you, now, with all these things that you’re doing, what’s getting you really excited? What’s the new thing that you see coming that you’re really excited to learn about and incorporate in the work that you do?
Jenny Chen: Something that’s really new and really exciting… For me personally, I’m just really happy that more and more people are thinking about localization and sharing that knowledge. Like what you just said, Robin is great, and I really like the work that she does, and so people like her, people like me, who are sharing/ raising the awareness of the importance of considering the local cultures, considering the nuances when developing a localized product. Overall, I’m just happy that people are raising awareness of this issue. I really hope more and more companies who actually doing it would be on-stage, or like writing or speaking more about it so other people can ultimately learn from the successful companies. I’m sure like, Facebook does a lot of things, DropBox does a lot of things, but then it’s just that so far we haven’t seen people actively talking about localization or internationalization, so that’s something I’m really excited about.
Jason: That’s great. Well, this has been absolutely amazing, I can’t thank you enough. For anyone who is going to be in Toronto, I hope that — if any of you are listening, I hope that you take this to heart. Go say hi to Jenny, tell her how much this work has influenced you. It’s such a big part of being at these events to be able to people and learn more about what they’re working on. Don’t hesitate, that’s what we’re all there for. We’re all learning together, some of us have just read a couple of pages ahead, and we’re happy to share what we’ve learned. Thank you so much, Jenny, this has been amazing.
Jenny Chen: Thank you so much Jason. I’m so happy to take part in this, thank you.
Vitaly: Thank you so both of you for actually making it all happen. Wonderful interview and also wonderful insights from you Jenny, thank you so much for that. Just a quick note from me, this is just one of the little sessions that we have about people who are going to kind of speak at our conferences but also just interesting people doing interesting work. This is important. I think at this point there’s a lot of failure of highlighting people who are kind of passionately and working hard behind the scenes doing incredible work to change the world. So this is kind of just our humble attempt to bring a little bit of spotlight to those people. With this in mind, thank you so much for watching. Looking forward to the next one.
That’s A Wrap!
We’re looking forward to welcoming Jenny at SmashingConf Toronto 2019, with a live session on designing for users across cultures. We’d love to see you there as well!
Please let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it!
Within hours of the recent mass shooting at a New Zealand mosque by a far-right terrorist, the country’s authorities were scrambling to ensure a sickening video the murderer streamed on Facebook was barred from the nation’s screens. Due to the nature of the Internet, the task of removal proved very difficult. But eventually, the government succeeded — using controversial tactics usually associated with Internet censorship by authoritarian regimes.
For some, the action of one highly democratic nation was a worrying reminder that Internet freedom should not be taken for granted. For others it was a triumph of taste and decency over a Wild West online community that still refuses to accept regulation while simultaneously failing to take responsibility for its actions.
a billion Internet users are barely aware that Facebook and Google exist
Versions of this debate are being played out around the world, as authorities, online companies, journalists and web professionals try to strike a balance between free speech and protecting Internet users from highly offensive — and potentially also subversive — content. The spread of “fake news”, alleged attempts by foreign powers to meddle in elections, and the age-old difficulty of defining what should be permitted in a free society, are all part of this debate.
With the technology and the excuses for Internet censorship already in place, it’s a debate that will shape the future of the Web. Or should that be ‘futures’, plural?
Full Censorship Can Be Achieved
In China, a billion Internet users are barely aware that Facebook and Google exist. Authorities have no difficulty in ensuring unpleasant content is not seen on the search engines and social media boards that are available there: The Christchurch video was blocked just as effectively as disturbing footage of the Tiananmen Square massacre is, because the Chinese government has built a system of highly effective controls on the Internet known as “the Great Firewall of China”.
Officially called the Golden Shield Project, China’s system of Internet controls has made fools of the experts who said that the Internet could not be tamed or censored. Jon Penney, a Fellow at Harvard’s Berkman Center for Internet & Society and Toronto’s Citizen Lab, told Open Democracy recently that although China’s technology is not yet fully understood by the west, it is:
…among the most technically sophisticated Internet filtering/censorship systems in the world.
“Basically, access to the Internet in China is provided by eight Internet Service Providers, which are licensed and controlled by the Ministry of Industry and Information Technology,” he said. “These ISPs are important, because we’re learning that they do a lot of the heavy lifting in terms of content filtering and censorship.”?
Controlling ISPs was one crucial brick of that firewall that allowed New Zealand to take the Christchurch killer’s video down. Indeed, what was controversial for many was the use of such an approach — and the fact that the government used a set of unpublished ‘blacklists’ of the sites it required to be blocked. Kalev Leetaru, a big data expert, wrote on Forbes: “The secret nature of the blacklist and opaque manner in which the companies decided which websites to add to the list or how to appeal an incorrect listing, echoed similar systems deployed around the world in countries like China.”
A Different Internet
China’s great firewall also tracks and filters keywords used in search engines; blocks many IP addresses; and can ‘hijack’ the Domain Name System to ensure attempts to access banned sites draw a blank. This is thought to be done at ISP level, but also further along the system as well, ensuring that browsing even a permitted foreign site from within China can be frustratingly slow. But with sites such as Google, Facebook, Twitter and Wikipedia blocked, most Chinese users simply view an entirely different Internet and App ecosystem.
most Chinese users simply view an entirely different Internet
Adrian Shahbaz, the research director for technology and democracy at Freedom House, an independent watchdog for democracy, says other authoritarian regimes — including Saudi Arabia and the United Arab Emirates — are already showing interest in China’s technology and censorship system. Russia is building its own version, which will allow it to totally isolate the domestic web from the rest of the Internet; ostensibly, this is to ensure the country’s ability to defend itself from a “catastrophic cyber attack”.
There are concerns that this censorship will spread to the West, where attempts to clamp down on hate speech, and to stop foreign ‘trolls’ pushing fake news in a bid to cause instability and influence elections, mean there is no shortage of justification for introducing controls. French President Emanuel Macron and US President Donald Trump are among the democratic leaders who have threatened crackdowns in the last few months alone.
Censorship or Responsible Regulation?
ISP controls and direct censorship are not the only threats to a unified and ‘free’ internet. With most people consuming their Internet through just a few very popular social media platforms or mainstream news providers, governments can also lean directly on these companies. Singapore — a country that admittedly sits in the bottom 30 of the Press Freedom Index — has just introduced a new “anti-fake news law” allowing authorities in the city-state to remove articles deemed to breach government regulations.
The country’s prime minister said the law will require media outlets to correct fake news articles, and “show corrections or display warnings about online falsehoods so that readers or viewers can see all sides and make up their own minds about the matter.”
Internet giants such as Facebook, Twitter and Google have their Asia headquarters in Singapore and are expected to come under pressure to aid implementation, meaning that those sites could look different when viewed from the city-state. Singapore may not be known for its freedom of speech, but its approach is telling as to how less authoritarian regimes — and those without China’s technology — can impose a creeping web censorship by leaning of the big tech companies that deliver most of the Internet users see.
The Singaporean premier added that “in extreme and urgent cases, the legislation will also require online news sources to take down fake news before irreparable damage is done.” It is not hard to imagine these words coming from a Western leader, or a judge.
Facebook is Already on Board
Facebook itself, after coming under intense pressure over the use of the site to spread everything from dubious news reports to videos promoting suicide, has now joined the calls for regulation. “From what I’ve learned, I believe we need new regulation in four areas: harmful content, election integrity, privacy and data portability,” Mark Zuckerberg said in a statement recently.
Copyright as Censorship
On the subject of data, Zuckerberg cited Europe’s GDPR — a set of regulations governing the use and storage of personal data — as an example to follow. But it is another EU law, passed in recent weeks, that threatens further Internet fragmentation.
The new Copyright Directive will require tech firms to automatically screen for and remove unauthorised copyrighted material from their platforms. Many campaigners have argued the directive will be harmful to free expression, since the only way to guarantee compliance is to simply block any user-generated content that references other copyrighted material in any way, including criticism, remixes, or even simple quotes.
until now, people have been relatively free to publish material online and then suffer the consequences
While the EU directive aims to bolster quality online news journalism by banning its wholesale re-use, sites that rely on user-generated content could end up looking very different when viewed from within Europe, compared to the US for example. Experts talk of a “splintering”, which means that there will effectively be different Internets in different jurisdictions.
Copyright enforcement, of course, is not censorship. And there have always been categories of images, for example, that are illegal in most jurisdictions. But until now, people have been relatively free to publish material online and then suffer the consequences, as was the case in the days of print. Proponents of tighter controls at source argue that simply removing material from sites once it is known to be illegal is a never-ending and ultimately pointless task, especially in the face of organized ‘trolls’ who can re-post at will.
During the first 24 hours after the Christchurch attack, Facebook removed 1.5 million re-posts of the murderer’s video, for example. It was only the introduction of controls at ISP level that finally blocked it in New Zealand, at least.
The Human Element
“Extremist content” and “fake news’ look set to be the next targets for politicians who favor stricter Internet controls, or, as they may argue, greater responsibility from ISP providers or major websites. Unlike copyright, this is at least partially subjective, and would require real people, employed by the authorities, to decide what is acceptable on our screens. China, naturally, already employs an army of such censors; it even pays another large group to post material that is explicitly favorable to its policies.
Leetaru said: “Like New Zealand’s recent blocking efforts, China’s system officially exists for the same reason: to block access to disturbing content and content that would disrupt social order. In the Chinese case, however, the system has famously morphed to envelope all content that might threaten the government’s official narratives or call into question its actions.
“In New Zealand’s case, website censorship was limited to a small set of sites allegedly hosting sensitive content relating to the attack. Yet, the government’s apparent comfort with instituting such a nation-wide ban so swiftly and without debate reminds us of how Chinese-style censorship begins.”
Can’t imagine it happening? Britain’s government recently published a ‘White Paper’ — a way of signalling possible legislation — which proposed that social media companies should be forced to take down, within 24 hours, “unacceptable material” that “undermines our democratic values and principles”.
What Constitutes Fake News?
Exactly what constitutes “fake news” has always been open to interpretation: during election campaigns, some democratic leaders have already learned that it is a good label to discredit critical reports with. In Russia, fake news was banned recently, and is defined as anything that “exhibits blatant disrespect for the society, government, official government symbols, constitution or governmental bodies of Russia.”
One area that is being actively targeted in Europe is “extremist” material fostering violence or hatred. In Germany, which already has a system to force platforms to remove “hate speech,” this has recently included censure on a woman who posted pictures of the Iranian women’s volleyball team to contrast their attire in the 1970s (shorts and vests) and now (headscarves and long sleeves).
The following joke was deemed hateful enough to land the poster a social media ban: “Muslim men are taking a second wife. To finance their lives, Germans are taking a second job.”
Another area that Western governments are showing increasing concern about is private groups that carefully regulate membership, designed to allow like-minded people to share their views unchallenged. Already, there have been calls for Facebook to clamp down on these closed groups or “echo chambers”, on the grounds that they are able to serve undiluted misinformation without challenge. While these requests may once again sound reasonable, it is unclear what would constitute an echo chamber and what kind of ‘misinformation’ could be considered unacceptable — or indeed, who would decide that.
How to Beat the Censors
For those wanting to beat EU copywrite laws and, for example, see a meme their friend in California is ‘lol-ing’ about, a virtual private network (VPN) should be a good solution. Already recommended by many security experts, VPNs are encrypted proxy servers that hide your own IP address and can make it look like you are browsing from a different country. For occasional use, even using a public proxy site, a ‘browser within a browser’ may well work.
There are various levels of VPN – an in depth look at the options is available here. However, sophisticated censorship systems such as the Great Firewall of China are capable of detecting VPN use and blocking that too.
A popular alternative to VPN use is the Tor browser, which is designed with anonymity in mind. Although experts rate Tor’s privacy features (and therefore its anti-censorship abilities) higher than VPNs, Tor can also be blocked. What’s more, you have to install the browser on your device and using Tor does not hide the fact that you are using Tor. Both Tor and VPNs are illegal in some countries and their use could put you at risk.
Tor is also the gateway of preference for accessing the Deep Web or Dark Web — which are also used heavily by activists and journalists who are trying to circumvent curbs on their freedom of expression. In a detailed article explaining how to access and use the Dark Web, technology journalist Conor Shiels says:
The Deep Web has been heralded by many as the last bastion of internet privacy in an increasingly intrusive age, while others consider it one of the evilest places on the internet.
The Deep Web is technically any site not indexed by search engines. Such sites would be an obvious place for private groups to base themselves if they are thrown of Facebook or even banned — although of course they may find it harder to recruit new members if they remain hidden from the casual user.
Although the Deep or Dark Web is a popular place for illegal activity, it is not illegal in itself. For those seeking an uncensored experience, it remains a place hidden from the authorities, but of course, the flip side is that you will be hiding your own postings from the vast majority of web users. This aspect of censorship will perhaps be the hardest to bypass as authorities move to cut off the most popular sites and platforms from certain news, views and activities.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Polypane: The Browser for Responsive Web Development and Design
PHP Isn’t the Same Old Crappy Language it was Ten Years Ago
Does Anyone Use Social Sharing Buttons?
What’s up with the New Facebook App Logo?
CSS Grid Based Website Builder
Is ‘The Fold’ Still Relevant in Today’s Scrolling and Skimming Culture?
Google Fonts is Adding Font-display
Animating CSS Grid Rows and Columns
46 Form Design Best Practices
5 Things to Be Mindful of When You Design Filters
Things that Come Back to Haunt Web Designers
Cut your Forms in Half
Design Notes: A Free Resource Library for Product Designers
Material Design Guidelines for Dark Theme
I Wrote the Book on User-friendly Design. What I See Today Horrifies Me
How Design Boosts Conversion
From Zero to Hero: Look at Hero Images in Web Design
Free Online Tools for UI/UX to Try in 2019
How to Choose the Best Static Site Generator in 2019
3 Big Mistakes I Made as an Illustrator and How You Can Avoid Them
Will You Get Sued for Using Old Adobe Apps?
The Flexible Future of Branding and the Death of the Logo as We Know it
Site Design: Lusion
Why is Pricing Design so Hard?
I Turned my Designer Interview Task for Google into a Startup
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Feedbin is the RSS reader I’m using at the moment. I was reading one of Harry’s blog posts on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one which, as it turned out, was a footnote. I hovered over it, and it revealed the note.
<p>...they'd managed to place 27.9MB of images onto the Critical Path.
Almost 30MB of previously non-render blocking assets had just been
turned into blocking ones on purpose with no escape hatch. Start
render time was as high as 27.1s over a cable connection<sup id="fnref:1">
<a href="#fn:1" class="footnote">1</a></sup>.</p>
Just an anchor link that points to #fn:1, and the makes it look like a footnote link. This is how the styling would look by default:
The HTML for the list of footnotes at the bottom of the blog post looks like this:
As a little side note, I notice Harry is using scroll-behavior to smooth the scroll. He’s also got some nice :target styling in there.
All in all, we have:
a link to go down and read the note
a link to pop back up
Nothing special there. No fancy libraries or anything. Just semantic HTML. That should work in any RSS reader, assuming they don’t futz with the hash links and maintain the IDs on the elements as written.
It’s Feedbin that sees this markup pattern and decides to do the extra UI styling and fancy interaction. By inspecting what’s going on, it looks like they hide the originals and replace them with their own special stuff:
That said, it’s based on an already functional foundation. Lemme end this with that same markup pattern, and I’ll try to look at it in different RSS readers to see what they do. Feel free to report what it does in your RSS reader of choice in the comments, if it does anything at all.
Azul is an abstract board game designed by Michael Kiesling and released by Plan B Games1 in 2017. From two to four players collect tiles to fill up a 5×5 player board. Players collect tiles by taking all the tiles of one color from a repository, and placing them in a row, taking turns until all the tiles for that round are taken. At that point, one tile from every filled row moves over to each player’s 5×5 board, while the rest of the tiles in the filled row are discarded. Each tile scores based on where it is placed in relation to other tiles on the board. Rounds continue until at least one player has made a row of tiles all the way across their 5×5 board.
Plan B makes other cool games like Century and Reef. ?
