Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.1 is here – Learn More

Skip to content

From Word and Excel to Froala Editor. Will it paste?

Several working professional gathered at their stations and machines with a massive laptop at the center.

Every time we put out a new release for the Froala Document Editor, we are eagerly waiting for your feedback to see if the changes are met by expectations. Yesterday was a special day as we’ve released a new version for Froala WYSIWYG Editor, and among the new stuff and bug fixing, there is one plugin that stands out: Enhanced Microsoft Word and Excel pasting. We’ve been paying attention to pasting content from other sources into the editor from day one, and the editor was always graciously cleaning the pasted content. In the last period, we got lots of requests from you about the possibility to keep more of the Word and Excel formatting, such as font size, colors, table styling, or nested lists.

Although it might seem like a trivial thing at first glance, and you might think that browsers do the hard work for you, when pasting from Word or Excel into a browser, there is tons of unnecessary markup. Moreover, important information which doesn’t come as HTML has to be parsed and converted appropriately for the browser to render it. We understood how important this is to you, so we accepted this challenge and got our hands dirty with the Word markup. Here are a couple of the obstacles we faced in the first month of development for this feature.

Missing a good documentation

Working without a solid documentation is like a shot in the dark. There is ECMA-376 Standard which offers details about Office Open XML File Formats, however the structure often gets broken when it is copied to the clipboard. There is no documentation that you can rely on and you mainly have to use the “trial and error” approach to find out what to look for and come to a way of cleaning all the mess and convert the pasted content into a HTML which is proper structured and also keeps the important data. We basically took all the documents we could find and stared at the pasted structure for hours to understand what is going on there. Before going further, I want to thank you all who were there to help us with Word and Excel documents with different structures. You guys are the best!

Pasting images

Yes, you can now paste images from Word and they get uploaded to your server just as a regular image. This was a great engineering challenge and we loved to hack it! By default, when you paste from Word into the browser, the images are loaded through the FILE:// protocol and you can see them, however reading their contents and uploading is not possible. The images wouldn’t load without uploading them to a custom server, when you want to display the edited HTML to someone from a different computer.

We’ve been trying everything possible to read the image from the local path, but all the attempts in this direction were just a waste of time. However, we were set to have this working and it was time for a different approach by converting the images to BASE64 and uploading them from there. I remember how excited we were around here when we saw the first image being pasted from Word, uploaded to our server and then displayed in the editable box.

You can make it better

At this moment, pasting from Word and Excel into the Froala WYSIWYG HTML Editor is definitely possible and it keeps most of the style and you can even customize what to keep there and what not through the editor options: https://froala.com/wysiwyg-editor/docs/options#pasteAllowedStyleProps, https://froala.com/wysiwyg-editor/docs/options#pasteDeniedTags and https://froala.com/wysiwyg-editor/docs/options#pasteDeniedAttrs. We’re aware that there might be few minor glitches and we rely on you to tell us when something goes wrong. Therefore, if you find anything that you believe should work in a different way, just reach our engineering team and we’ll get it solved.

Hello, personal website! Goodbye, CV!

Displaying a bold, graphic web design with a mix of text and images.

I’ve been hating CVs as far as I can remember. They look so ordinary, so stiff. I mean, isn’t it time to differentiate yourself from the competition when applying to a job? How are you going to do that if you will send the same dull one page? There’s no wonder we hear all these stories how recruiters throw away half of the CVs. The morale of this story, they say, is that those whose CV ended up in the garbage bin weren’t lucky enough. I believe CVs are old news and they need a replacement, a better one. Before going into that, let’s revisit the CV’s history.

The history of CV

Curriculum Vitae is a Latin expression which means “the course of my life”. To me, it sounds a bit poetic and full of grandeur, so it makes sense that the first CV is accredited to be written by Leonardo da Vinci, more than 500 years ago. Leonardo, who is considered to be one of the greatest man that ever lived, made a list with his skills and send it to a potential patron, the Duke of Milan. But, as with other of his inventions, the CV was far ahead of its time and it’s not until the 1950’s when CVs started to be used as a means for applying to a job.

First CV

Why CVs will be replaced by personal websites

I think CVs are losing their value proposition since everyone can create an account on LinkedIn and emphasize their skills and endorsements. I mean, isn’t that a CV’s purpose: showing off your skills and education to a potential employer? Yes, it is. Now, let me tell you why CVs are being outdated in the online world we’re living in and how personal websites are the future.

The meaning and realities of getting a job has changed. The internet and social networks made us more connected. We tend to find jobs most of the time through personal connections rather than simply applying with a CV. In 2012, a report from ABC News found out that 80% of jobs are landed through networking. Also, companies are trying to be more human and not just abstract organizations. They are becoming more social. You can get in touch with them on social media and even on their own websites through customer service software. So, like I said earlier, you can replace the CV by using LinkedIn to present your skills, but it’s not enough.

I think the world went from hard labour work (e.g. factory jobs) to desk & computer work (e.g. office jobs) and now is going to a third phase: cultural fit work. People, especially millennials, tend to pick companies to work for based on their organizational culture values. We want to have a positive impact on the world with our work, not just finding a place where to go from 9 to 5 and bring the bacon home. Likewise, we are shifting from a mass market economy to a more customised and personalised one. You can notice this trend with jobs as well. There aren’t just a couple of standard positions in a company anymore (e.g. financial, production, marketing, etc.), they became more and more specialised. Take UX for example, you have UX Researcher, Interaction Designer, Information Architect, UI Designer.

So, my question is: how relevant are you with a CV in this social, connected and personalised world? The honest answer is “not quite relevant”. In a society where the individual is more important than ever and you can easily broadcast your opinions to a lot of people instantly through the internet, the solution I propose is authenticity. The answer I’m preaching is being yourself.

Be authentic

How can you do that? There isn’t a simpler and better solution than making a personal website. Having a personal website is like a tailored suit. It’s been made to fit you perfectly and feel comfortable in it. You will never have the same experience with a ready made suit. The same goes for a personal website. You get to choose how to design it and you can redesign it every time you feel is not representing you anymore. A personal website will be a better representation of yourself than a CV will ever be. A personal website is more than a CV, it is you.

At Froala, we believe everyone should have a personal website and we are committed to make it accessible for everyone. We got you covered on this one as Froala Website Builder is coming soon and we would love to keep in touch and tell you when it’s ready for launch.

Your website needs to be responsive!

A zoomed in photograph of an Apple Computers monitor and an iPhone resting on it.

Dad’s computer with a huge monitor, my 13 inch laptop, grandma’s tiny smartphone, my cousin’s tablet, oh and let’s not forget about my girlfriend’s phablet (yes, this is a phone + tablet kind of device). I’m not keeping track of how many devices are in my family. I’m counting on how many different screen sizes your website should look good. Actually, it must look good. This is the first half of responsive web design (RWD), namely making your website look good and easy to use on all devices. The other half is about web browsers (Chrome, Firefox, Opera, Internet Explorer) and making sure your website looks and works great no matter the browser being used.


Responsive web design example

How responsive web design emerged?

After reading the intro, I guess you have an idea about how RWD came around. The smartphone (yes, I’m looking at you, iPhone!) changed a lot of things in our lives. One of them is about having a decent user experience while using a web browser on a mobile device. But how do you display on a tiny smartphone screen what’s on a regular desktop webpage? Here’s where responsive web design comes in handy and saves the day.

RWD exploded as new devices appeared: smartphones of different sizes, tablets of different sizes, phablets, netbooks and notebooks, 4K and 5K monitors and the list can go on. So, having a responsive website isn’t just important, but necessary.

At the same time, web browsers have become more numerous and diverse and this aspect also helped RWD to gain in importance and popularity.

Why responsive web design is so important

In 2015, Google announced that mobile-friendly pages will be boosted in ranking on mobile search results. The more you build your website with responsive web design in mind, the more people will find you when surfing the internet on their mobile devices.

Lately, we’ve witnessed two major improvements in tech. Firstly, we’ve seen more powerful smartphones that became more affordable. Secondly, the internet penetration rate in the world continues to grow and in 2016 almost 40% of the world population is connected to the internet. Taking into account these two aspects, maybe the next thing I am going to tell you won’t sound so crazy, but I still think it is. 2016 was the year when mobile web usage overtook desktop web usage for the first time. So, think about it. There are higher chances now that people will find you while surfing the internet on their smartphones and if your business website is not responsive, then you’ll be less visible.

But that’s not all. According to a 2014 report on mobile commerce statistics and trends here are the key facts you have to know when it comes about online shopping:

  • 1.6 billion people made some form of mobile commerce transaction
  • People who shop online using their mobile devices tend to spend twice as much via digital channels than those not buying on mobile devices
  • 56% of mobile devices users intend to search for and/or buy gifts in holiday season
  • Almost 20% of all US retail e-commerce sales was made through mobile devices

Online payment

How will responsive web design impact your website?

Responsive web design is an important piece of this global internet puzzle and we believe the world is going mobile. This means your business risks staying behind if you don’t adapt now. We know it’s not easy, but helping businesses to go online is one of the reasons we decided to make Froala Website Builder. We want you to easily create and manage your online presence.

Froala Website Builder is coming soon, but we would love to keep in touch and tell you when it’s ready for launch. So, you can subscribe here for early access invite. Hurry up because the spots are limited!

Best tools for creating your logo

A hand with painted nail polish pressing a mechanical pencil onto a piece of grid paper.

Logo is an important part of every business identity and getting the right tool for it is not easy at all. Also, the logo is one of the first things that pops out on a landing page in a website. That’s why we did the hard work for you and made a list with what we believe are some of the best tools for creating your logo. So, let’s find the perfect tool for making your logo rock.

Adobe Illustrator

Adobe Illustrator is the one and only when it comes about graphic design, but I’m telling you upfront it is for pros. It’s tricky for a beginner to manage doing something really cool, but the good part is there are a ton of tutorials and documentation online for learning. Here you have the official tutorials from Adobe to help you make a stunning logo for your beloved website. If you wish to create a logo for your brand or perhaps change the old one and you’re also not in a hurry, then Adobe Illustrator is your best friend.

Logojoy

Logojoy is using AI in a creative way to make your dream logo possible. But it’s best to let them tell you what they do: “Using artificial intelligence and advanced learning algorithms, our logo maker is able to produce designs just like a designer would.”. The first step is to choose some existing logos that you like, pick a color palette, write your company’s name and then let the AI do the hard work for you. If you are a big fan in the AI revolution, then I think this is the suitable solution for your website’s logo.

Logomkr

Logomkr is an online DIY (do it yourself) logo maker. It’s pretty basic, so don’t expect to win the “Best Logo Award” with the logo you manage to create with this tool. If you need something quick and simple which has to be done in an hour, then this is the tool you need for updating that old logo from your website.

Logo Garden

With Logo Garden you can choose from a long list of symbols categories and it also gives you some creative freedom while creating your logo. Also, there are a few “how to” videos specially made, so that you can quickly get your hands dirty with this tool. The price tag is 39.99$, which depending on your needs can be just right.

Designhill Logo Maker

Your Logo makes the first impression, so make sure you have a good one. Create unique logo within no time with Designhill Logo Maker. It is an easy to use, DIY tool, that allows you to enjoy creative freedom while designing a logo. Now you don't need to break your budget or have great graphic skills, to create a customized and professional-looking logo - use our Logomaker. Explore now!

Back-up solution

If any of the above mentioned tools did not help you to create a stunning logo for your website, then you can always have the option of simply hiring a designer. You can go on marketplaces like Fiverr, Upwork, but also visit design communities websites as Behance and Dribble and just talk to them.

Oh, and let’s not forget about 99Designs which is a great graphic design marketplace to find a freelance designer to create your logo.

We hope that now you can make up your mind or better said you can make the logo that best fits your website. Speaking of websites, at Froala, we are working hard to make the best website builder for your business. It’s coming soon, but we would love to keep in touch and tell you when it’s ready for launch. So, you can subscribe here for early access invite. Hurry up because the spots are limited!

Design trends in 2017

Two hands holding a photograph of a lake with tall dry grass and a distant mountain side.

The design world was on fire lately as more organizations became design-centric and concepts like “design thinking” took off. So, let’s face it, design is a primordial aspect for your online business or personal brand. But don’t worry because we got you covered and in this article you will discover the major design trends that will power 2017.

Conversational Interfaces

With 60 billions mobile messages generated by WhatsApp and Messenger users daily, there is no wonder that conversational interfaces is now a thing. And let’s not forget about bots, who had a good year in 2016 when Facebook made possible for businesses to create Messenger bots to communicate faster and better with their customers.


Conversational Interface

Virtual Reality (VR)

Since Facebook bought Oculus in 2014, a lot of people expected a VR-related move from Mark Zuckerberg and he did not disappoint when last year at the Oculus Connect 3 conference he showed us how we will have the opportunity to socialize in VR.

Even though some experts declared 2016 as the year of VR, we think it still takes time until VR will go mainstream, but for sure 2017 will bring more and more VR and 360 degrees type of content made by designers in ways we cannot even imagine.


Virtual Reality

Hand Drawn Illustrations

Hand Drawn illustrations will be “trendy” this year as companies are trying to appear more authentic and human to their customers. Dropbox is one of the companies that makes use of this visual style. Coupled with its soothing blue-ish color identity, this landing page manages to give you a state of well-being and reliability.


Dropbox

Color

Colors will always be part of every design trends list and we strongly believe you shouldn’t underestimate their positive effect on your website when done right. 2017 is the year of duotone and bright colors which will help brands to differentiate themselves in a more competitive and global market.


Asana

And we can’t go on to the next trend without mentioning the color of year 2017: Greenery.


Color of the year

Asymmetry

After symmetry domination of design rules, asymmetry is the new rebel in 2017, bringing more and more unusual layouts. We believe this trend will be for all those designers who can’t wait to break the rules and let their creative juices flowing.


Stripe Asymetry

Bold Typography

Along with asymmetry, bold typography will be another opportunity for designers to break the conventions and aim at quickly catching our attention when landing on a website. So, expect for a lot of creative fonts and typography this year more than ever.


More Sleep

Top Border

Lately, top borders (especially in cards design) are winning more and more ground in designers’ hearts. We are happy to see this trend taking off because Froala Editor was designed with a top border from the very beginning, the first version being released back in January 2014.

Froala WYSIWYG HTML Editor 2014

January 2014

Froala WYSIWYG HTML Editor 2015

2015

Froala WYSIWYG HTML Editor 2016 - 2017

2016 - 2017

We thought it looked pretty slick at that time and we still think the same today. Probably it is just a happy coincidence, but we saw in the top border a valuable design element that adds a plus to UX. Wondering who’s taking advantage of the top border? Take a look at the following examples:

Google Forms

Google Forms

Bootstrap

Bootstrap

Asana

Asana

No matter which of these design trends will turn out to be more beneficial for products, at Froala we consider design a core value of our products. For this reason, we created Froala Design Framework which is an easy to customize design framework meant for both designers and developers. Actually, is not a framework in the traditional sense of the word. It takes the benefits of both framework and templates, by allowing you to rapidly combine predefined design blocks, and also customise them easily with the power of a framework.

Version 2 is coming soon, but the first version is free to download and test, so give it a try and tell us what you think on Twitter @froala or in the comments below. We really appreciate your feedback, and taking this short survey would help us a lot. Thanks!

Common WYSIWYG HTML editor myths

A two way sight with the left pointing to myth and the right pointing to fact.

WYSIWYG has quite a history in the software world, the first one being produced in 1974 at Xerox PARC. In all this time, WYSIWYG editors faced with all these myths and misconceptions about its functionality that seem to pop up from time to time and which will probably never cease to exist.

1974

2017


WYSIWYG is an acronym that comes from “what you see is what you get” and according to Wikipedia, “a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.” Judging by this definition, a WYSIWYG can be part of both desktop and web applications.

In this article, we are going to focus our attention on the WYSIWYG used to edit website content which has its share of alternative namings such as: WYSIWYG editor, WYSIWYG HTML editor, WYSIWYG Javascript editor, WYSIWYG rich text editor, WYSIWYG textarea editor and the list can go on.

Now, enough talking and let’s start busting some myths!

1.WYSIWYG rich text editors are like (Microsoft) Word

You will hear this a lot of times as it is one of the most known confusions people make. First of all, Word is a desktop application and a word processor whereas WYSIWYG rich text editors are web and mobile based Javascript editors.

But the main difference consists of the way each one is being used, meaning that Word was designed for static layouts and web editors for dynamic Internet layouts. Taking this argument further, web editors are not about creating formatted content, they are about producing proper semantic HTML that will make your content suitable for websites.

Key takeaway: Word is for print layouts and WYSIWYG rich text editors are for websites.

2.WYSIWYG HTML editors help you save files

This is another popular misconception that has its roots in the myth above because people think that if web editors are like Word then it will inherit some of its functionalities, saving files being one of them. I hate to break it to you, but web editors are not desktop applications and you won’t be able to save files with it.

Key takeaway: WYSIWYG HTML editors are not desktop applications, so you can’t save files.

3.WYSIWYG Javascript editors resemble Google Docs

I know you probably think “Hmm, WYSIWYG Javascript editors are made for web and Google Docs is an online tool, so they have to share same similarities, right?” Well, not quite. Google Docs is like an online Word application instead of a desktop application. This way you can have access to your content from everywhere with an internet connection, but has the same scope as the Word: static print layouts. So, yeah Google Docs is not the same as a WYSIWYG Javascript editor.

Key takeaway: WYSIWYG Javascript editors and Google Docs are different type of technologies.

4.WYSIWYG rich text editors will make your site slower

According to a statistic made by SOASTA, the average website is 2099 kilobytes in size. Froala WYSIWYG Editor gzipped starts just under 50 kilobytes and reaches a maximum of 125 kilobytes with all features included, which is between 2.5% and 6% from the total size of an average website, meaning that it is astoundingly lightweight. So, next time someone tells you that WYSIWYG rich text editors are a bad idea for your site because it will slow it down, just show them the numbers about Froala WYSIWYG editor and they will speak by themselves.

Key takeaway: Froala WYSIWYG rich text editor is lightweight for your site.

5.WYSIWYG HTML editors are also website builders

WYSIWYG HTML editors like Froala help you create rich content for a website that already exists, they are not meant for creating websites from scratch. The combination of words “HTML editor” makes people believe that they will edit HTML code, similar to the Dreamweaver application. WYSIWYG HTML editors are called this way because they generate HTML code, but the user doesn’t actually write code.

Key takeaway: WYSIWYG HTML editors are for creating rich content for the web, not for making websites.

6.WYSIWYG Javascript editors are terrible at accessibility

Even though most WYSIWYG Javascript editors are not only terrible at accessibility, but they lack it completely. However this is a myth because Froala Editor took care of accessibility by making our WYSIWYG Javascript editor compliant with Section 508, WCAG 2.0 and WAI-ARIA.

Key takeaway: Froala editor is compliant with accessibility standards.

7.It’s a pain to integrate WYSIWYG HTML editors

You won't believe me if I tell you it's a piece of cake, but here is how you can integrate Froala WYSIWYG HTML Editor and it's up to you to make up your mind.

  1. Include external JS and CSS files
  2. Include Froala JS and CSS files
  3. Initialize Froala editor on your html element on the page

Congratulations! You can now use Froala WYSIWYG HTML editor as you please.

Key takeaway: Froala editor can be integrated on your site in 3 simple steps.

Now that you know what a WYSIWYG HTML editor is, go take a look at Froala Editor and let us know what you think on Twitter @froala or comment below.