Posts Tagged ‘RWD’

Draft stunning emails quickly with BeeFree

The professional world would crumble without efficient emailing. A simple conversion between two people becomes official, substantial, and binding if converted into a properly drafted email. Letters of appreciation, job offers, projects contracts, designs, work documents, assignments, invoices, bills, etc. are all exchanged over email in the modern day and age. So it wouldn’t be baseless to say that, if you don’t know how to compose an appropriate email, you might find it extremely difficult to survive in a setting that uses tools like MS Office 365, Thunderbird, Apple Mail, and the like on a regular basis.

Overwhelmed? You don’t need to be. Because tools like BeeFree have been developed specifically to hold your hand through the email drafting process. Check out how this simple yet brilliant tool can help you become an email pro in a few clicks.

BeeFree – Create Professional Emails Quickly

The name BeeFree actually stands for “Best Email Editor – Free” and is a part of the MailUp Group. The tool can be used as an online email editor and can also be embedded into SaaS applications. It is a drag-and-drop based email designer and builder for mobiles and hand-held devices which enables users to create mobile-responsive emails quickly and easily from anywhere.

Here are the most prominent features of the tool:

  • Includes a drag-and-drop editor that lets you add individual email elements or entire rows directly from your desktop
  • Emails designed with BeeFree are mobile-responsive so you don’t need to retest their look and feel on different devices
  • Users get access to hundreds of elegant email templates
  • The tool uses a 4-step approach:
  1. Step 1: Pick an email template that suits your purpose
  2. Step 2: Add your unique personalized content to the template you picked
  3. Step 3: Download the message you created
  4. Step 4: Use it wherever you like

That’s how simple it is! And if you find the free version of Bee interesting, you can always invest a little money and opt for more features with BeePro or BeePlugin.

Let’s see how it works

To start using BeeFree visit the tool’s homepage and click on the blue button that says “Start Designing”. This will direct you to the templates catalog from where you can choose the right email template for your purpose. There are a ton of categories to choose from including newsletters, events, e-commerce, and more. If you don’t find any template particularly interesting, you can start from scratch by using the first icon on the top-left corner (the blue colored one that says “Start from Scratch”). We tried out the tool both ways and here are the steps for each.

Start from Scratch:

  • Click on “Start from Scratch” to get redirected to the editor
  • From the right hand panel, select what kind of Content you wish to insert into your email design. Your choices include Text, Images, Buttons, Dividers, Social, and HTML. You can choose any combination of these elements too. Drag and drop each Content element into the left hand area of the editor.
  • Click on the “Structure” tab in the right hand panel to decide and pick the layout of your emails. To apply a layout, drag and drop it into the left hand wider area.
  • Click on the “Body” tab to pick from options like background color, content area color, font, link color, etc.
  • Once you’ve designed everything and keyed in your email matter, you can preview what your final email will look like by clicking on the “Actions” drop down from the top menu and then selecting “Preview” option. You can view the preview for both desktop and mobile with this option.
  • You can also choose to send a test email with your design to any email id you want.

At any point if you think you need guidance, simply click on the “Help” button from the right corner of the top menu. When your design is ready, click on “Save” button to download the whole message with all HTML and images to your device.

Start with a Template:

  • Click on a template from the catalog to get redirected to the editor with the template opened in the left hand bigger panel
  • All remaining options and settings for this kind of editing are the same as those seen in the “Start from Scratch” option
  • Each template will have its own unique settings which you can alter as per your need using the given options in the right hand panel

The highs and the lows

The plus points of BeeFree include:

  • Its drag-and-drop editor
  • Responsive email-design capability
  • There isn’t much of a learning curve attached to the tool which is good.
  • Plus, it has ample reading material to supplement user’s understanding.
  • And of course, the multitude of templates is an added bonus.

Coming to the negatives, there’s only one and it is actually quite expected of a free tool:

  • You can’t do much beyond changing typeface, font size, color, photos, buttons etc. For any more flexibility than this you’ll have to go pro, which is kind of fair.
  • Compose elegant emails quickly and easily with @beefreeio beefree.io/ via @supermonitoring

    Tweet this

Verdict

All in all, BeeFree is a nice tool. If a simple and quick email design is what you’re looking for and you don’t need any hassle, this is just what you need.

Create your own website in the WebWave wizard

Many people wonder how to create a website. Some are ambitious and learn various programming languages to build their own website. Other can’t decide which interactive agency should they choose, or look for cheap freelancers, which does not guarantee good project.
Fortunately for all of the above (and not only them) creating a website can be really simple and does not require specialist knowledge. Webmasters, entrepreneurs, hobbyists, amateurs and curious, can use the help of Webwave, the Polish website editor.

Create websites without coding

WebWave appeared on the Polish market in 2013 and since then has been systematically developed and improved. This tool allows you to create your own site using drag and drop interface. It doesn’t require any expertise in web designing and web development or coding skills. You can easily place every object with the accuracy of 1 pixel exactly where you want, using only mouse.

Using the wizard is completely intuitive, simple and pleasant, and give the creator full freedom of design. You can start your website completely from scratch, or use one of over 30 pre-defined templates. Both the wizard itself and the templates are completely free, but we will write about money later.

What word would best describe this wizard? Professionalism! Websites created in the WebWave editor are no different than projects created by specialized marketing agencies because:

  • they are fully responsive – they work well on every device, from a computer to a smartphone;
  • they are search engine (Google, Yahoo, etc.) friendly;
  • they have very well optimized code that allows pages to load quickly.

The wizard has a lot of flexible features, and we can easily integrate it with external tools. WebWave’s major advantages include:

  • unlimited transfer and disk space;
  • multilingual websites;
  • possibility to upload your own HTML, CSS or JavaScript code (for more experienced webmasters);
  • site statistics;
  • own “404 error” and “301 redirect” pages;
  • integration with Facebook, Disquss, Google Maps, Google Analytics, LiveChat, Freshmail, Shopify, Salesmanago and many others.

How to create a Web page in WebWave

To start working with the wizard, go to the WebWave website and sign up. All the work – creating, editing and administering the pages is done through the webmaster panel. After creating an account, click on the “New Page” button and either choose an empty website or choose one of the templates. After selecting the choice we are looking for, the entire wizard is shown.

WebWave creators do not leave their customers to grope in the dark. A 15 minute movie explains the most important elements of the wizard right from the start. This tutorial is really recommended to all users as only several minutes are enough to present most of the tools and capabilities. At webwave.me/Help we will also find a detailed guide to each option.

To get to know WebWave even faster, we recommend to select and edit one of the templates first. By clicking on any part of the page, we can easily modify it – change position, edit content, color, background, images, add animations, etc. A great feature is the ready-to-add elements such as gallery, slider, menu, contact form, buttons, Google map, or new subpage. In the top right corner of the screen you can switch between your pages, add a new language or go to the page preview. However, the most important option seems to be the RWD edition, where we can see how the whole site looks on computers, tablets and smartphones.

We save the changes using the Save icon at the top of the wizard. When we are ready to show our project to the whole world, we just click the Publish button. We can later modify our project at any time.

What are the costs?

We can publish our page for free in the subdomain of webwave.me under random ID. If you want a site to appear under a particular domain, you should buy a hosting that costs from $3.5 per month. In addition, for each such package WebWave offers registration of a .pl domain for free. The wizard itself, regardless of the number of pages created and the time spent, is completely free.

You can also earn money with a WebWave because this way the company encourages users to recommend the wizard to others. If we get people to pay for hosting, we will receive 30% of their deposit. The money we receive can either be spent on local services or simply paid out. Therefore, if you are a marketer, you may also find WebWave interesting! The company also makes it possible to create a special account for agencies, webmasters, freelancers or anyone else who will create pages for clients in the WebWave wizard.

It is worth to mention that WebWave is not just the editor. In addition to it, we have a simple content management system (CMS) and the already mentioned webmaster panel. If someone else adds content to our site, we can give that person access to the CMS panel so that he or she can edit existing posts, change images in the gallery or add a new article but can’t move or delete any items on the page. The webmaster panel allows you to easily switch between our pages without having to memorize another passwords and addresses.

  • Try webwave.me/ – a simple and intuitive website creator – via @supermonitoring

    Tweet this

Summary

Considering all the elements and functions, WebWave is a really great and cheap tool. On its site there is an online chat where we can ask for help with the editor or other things related to it or the company. Answer during working hours? Immediate and detailed. There is also a Facebook group for WebWave users, where people exchange experiences and knowledge. So if you need to create a new website, redesign your existing site, or just want to experiment with something new, use the WebWave Wizard. Or recommend it to others and benefit yourself!

Test your website’s Responsive-ability

In the age of technology, desktops and laptops are not the bar anymore. You can access anything and everything via mobile or any supporting device. Smartphones and tablets have especially changed the approach toward design and user experience. More than user friendly each platform has to now be device friendly .Before the proliferation of mobile devices with advanced web-browsing capability, web designers had only one primary challenge to deal with – keeping the same look and feel of their websites in various desktop computer browsers.

However, interacting with websites on smartphones and tablets is not the same as doing that on a desktop computer monitors. Factors such as Click versus Touch, Screen-size, Pixel-resolution, support for technology, animation, optimized markup and many more have become crucial while creating websites. Hence it has become a must to have your website on a responsive design.

responsinator

And as the name suggests Responsinator is the answer to this device view conflict. It’s specially designed for website makers to understand the design essentials and break the barriers of look and feel with various devices and their interface. Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing you can always test on the real devices.

Before we understand the unique abilities of the site let’s talk about what a responsive design is exactly. It means designing your website to adapt to the user’s viewing environment (mobile, tablet, laptop etc.). It does this through the use of media queries, and other clever technology. Here is where Responsinator will come handy. Responsinator is a simple, easy to use web tool which can help you optimize your responsive design and visualize how your site responds .This tool works great for testing the breakpoints of your media queries and seeing how font and image resizing or fluid grid and layout changes will look on devices displayed in both portrait and landscape modes.

Device Type

On Responsinator.com there is bar where you can enter your website and simply click “go”. It will in an instant provide you a well enlarged view of how your website shall look on:

  • iPhone 5 portrait · width: 320px,
  • iPhone 5 landscape · width: 568px,
  • iPhone 6 portrait · width: 375px,
  • iPhone 6 landscape · width: 667px,
  • iPhone 6 Plump portrait · width: 414px,
  • iPhone 6 Plump landscape · width: 736px,
  • Android portrait · width: 240px,
  • Android landscape · width: 320px,
  • Android (Nexus 4) portrait · width: 384px,
  • Android (Nexus 4) landscape · width: 600px,
  • iPad portrait · width: 768px,
  • iPad landscape · width: 1024px.

Covering a large section of devices that are currently and popularly used.

Cool Features

Since the site is very tech friendly it gives you a few extra perks like the “Handy bookmarklet” Feature. You can easily drag this Responsinator to your browser’s bookmark bar, then you can click on it whenever you’re on a site that you want to test. Simple, easy and does not require you to open the site again and again for testing.

There is one other feature that is peculiarly intriguing that is the scroll bar, you can easily hide and affront your scroll bars in an instant. Last but not the least the feature that works with fixed width mode. If you have a non-responsive, fixed width site and you’d like to get an idea of what it looks like on these devices – set fixed width=x to the browser URL ,where x is the width of your site and you can see an estimated glimpse and catch the error zone almost immediately.

There is a small glitch to Responsinator as well, it won’t work if your site has user-agent device detection. If you really want to emulate device detection, you can append &append_device=1 to the end of the browser URL. Responsinator will then append responsinator_device= [type] to your URL where [type] is either phone or tablet. You’ll need to check for responsinator_device in your server code.

responsinator1

Make your own Responsinator

Responsinator gives you an open option to customize as per your requirements, like you can enter your name, enter your website name and have the header looking the way you want. All this by simply signing up. There is a minimum signup amount 6$ per month and merely 60$ per year which of course you can choose as per your usage. There are minimal formalities that you need to fill in like Responsinator sub-domain, Email and Password to create your very own.

The Funny part is that creators are very hearty if you find Responsinator handy and you’re feeling kind you could buy them a beer.

User-Friendliness

All in all it is an extremely easy to use web tool. The reason for this is that when there is just one website and on a single page you can see your site in multiple device modes, it’s much easier for users to share, engage and interact with the content on the site as compared to a site that has different pages for different device type. You can literally see the visual of your site on all device formats in one single scroll. We!! are a fan of that. Why? Because it’s a busy life and there is lots to do each individual chooses a better, faster and more convenient option.

And Responsinator realizes that thus its user interface is extremely simple and believe us there is nothing much to do. If you are not that tech friendly it will still be a piece of cake for you. In other words, it’s just bad if you aren’t taking advantage of the benefits of Responsinator.

  • Easily check your website’s responsiveness with @responsinator responsinator.com/ #RWD via @supermonitoring

    Tweet this

When a business has both a mobile site and desktop site and multiple other pages, there will be a different URL and different HTML for each and hence making your work way more intricate.
Save your time and test your site with Responsinator.com.

  • Browse Categories

  • Follow us



  • Super Monitoring

    Superhero-powered monitoring of website or web application availability & performance


    Try it our for free

    or learn more