Email was released a couple of days ago, but you'll have to search for it. There's no mention of it on Joe Workman's website – his blog is only updated annually – but hey! I found the link for you!
Email has quietly secured its own web page.
So what's all the hype about? Email is a Foundation based set of stacks that will allow you to build fully responsive marketing campaigns using your favourite app – RapidWeaver, in combination with Stacks 3. If you know how to build a simple web page, then you already know how to build a marketing campaign or a newsletter.
In a similar fashion to Foundation the suite includes a Theme and more than 15 stacks. The stacks will allow you to create a single, or multiple column design with the addition of buttons and CTA's.
When setting out to build an email template, you need to check a couple of things first:
When you drag the Styles stack onto your page and open the stack settings, you'll see a to-do list. An 'Implementation List' that instructs you to Set the Email Theme; Disable Advanced General Settings; Set Title To Subject (the subject of your mail); Set Slogan To Description; Use Only Email Stacks.
Yes, should only use the stacks from the Email suite. Why? Although your email will be HTML, the HTML format that mail apps can render has failed to evolve alongside the www since the turn of the century, hence modern stacks will fail to render correctly.
The Email suite consists of the Styles stack, which has a very similar structure to that of the Foundation Styles; One, Two, Three and Four-Column stacks; a Button; a Callout (CTA); a Divider; an HTML and a Markdown stack; a Header; an Image stack; a Link List; a Spacer; a Visibility stack; a Wrapper and of course a Text stack.
Using the above stacks, you won't be able to replicate a client's website exactly (remember HTML for email is still stuck in the 90's), but you will be able to get pretty damned close – a lot closer than any of the online tools from MailChimp etc. will let you get. And working with Email is a lot easier than the online editors too.
And when you're finished, you can upload your template to one of the online mail services and send it out.
Email has gained only positive comments on the forums since its release and is already widely accepted as the mail template 'app' to use!
Don't know where to start? On the Email homepage, you'll find 15 great templates to download free of charge, with the promise of more to come…
MailChimp & Co, here we come!
Well, today is Cyber Monday and is revival day. RWExtras is now back online and the stacks – which hadn't been updated in an age – have all been rewritten.
RWExtras specialises in elegantly simple stack elements – simple image sliders, galleries, font stacks and other useful stacks to help novice users make the most of RapidWeaver.
Seamless compatibility is given with themes by all major developers and frameworks such as Bootstrap, Foundation and UIKit.
So what's new? As it turns out, a lot! Presently there are twenty-two revised stacks available. I'll be reviewing all of them, but will split the reviews up into smaller chunks sorted alphabetically. so if you're waiting for the Slider Stack review, it will appear in a later post.
Shall we dive in?
Probably the simplest of all the new RWExtras stacks is anchor point. Set anchors on your page to let visitors quickly navigate up or down to the information they wish to view. How? Simply drop an Anchor Point stack at the required position, give it a unique ID and add a button or a text link to entice your visitors to scroll to said ID.
The default ID is chapter-1. All you need to configure your linked text or button is a URL #chapter-1. To link to the anchor from other pages, just add #chapter-1 to the page's link.
The only setting that Anchor Point has, other than its ID is Display Instructions – Will has added complete instructions to each of the new stacks, so that when even a seasoned user adds one to his/her page, he/she doesn't have to sit and scratch his/her head whilst trying to remember how it should be configured.
RWExtras' Background Stretcher [BGS] allows you to add a local or a warehoused (stored on a server) .jpg or .png image as your page's backdrop. BGS is really simple to set up. Once the stack is on your page, the settings panel lets you choose where the image should be placed: Left Top (Default); Left Centre, etc.
You may set the image to static, or if it should scroll with the page content – scroll. If it scrolls with the content, you may perhaps want the image to be repeated, otherwise, you can set Auto Size; Contain; Cover; Stretch; Pixel [size] or Percent. You should play around with these settings to find the ideal setting for your page.
There is setting 'Force Styling' for any stubborn theme you may encounter. Some pre-baked themes just won't allow you to add a background image.
If you wish to show your visitors a message, when they move their cursor above the navigation bar to leave your page, Exit Intent is the ideal stack to do so and it is really simple to set up. RWExtras' Exit Intent has a backdrop that covers the whole page, so your visitor isn't going to miss your suggestion that he/she sign up for your newsletter or join your member's page, or the message that your work is being exhibited in the near future …
… but let's begin at the beginning – Enable in RapidWeaver Preview. If you want to preview your Exit Message, leave this activated and your message box will pop up every time you try to leave the preview. Once you have Exit Intent set to your liking, you can deactivate this.
Next up, the Animation Speed is set to one second – it shouldn't be much longer, otherwise you user might have left the page before the message appears. The Border Radius is the border around your message box. Max. Width sets the width of the message box within the backdrop and Spacing sets the Padding inside the message box.
Theme lets you set the colour of the backdrop and the colour of the content box, while Close Button gives you the static and hovered colour for, well, the close button. However, any linked text or button with the class 'exit-intent-close' will also close the message box; in which case, I personally would probably set the close button to the same colour as the message background.
Cookie Tracking is an important part of messages on exit – if a visitor has returned to your page numerous times, you won't want to bug them with the same message every time. Set a Cookie ID and time for the cookie to expire before the message is displayed again. The default setting is 28 days.
Almost any stack can be dropped into RWExtras' Exit Intent's message box, including an HTML stack for MailChimp's subscription form or similar.
EZ Flex Button
No bells, no whistles, just a simple button stack. However, RWExtras' EZ Flex Button does have more settings available than the standard Stacks' button. The settings panel has options for a Link (obviously) and the Button Alignment. Then there is the Rollover Speed and the Label Font Size. Now set the Minimum Width for the button; the Border Radius and the Padding, both horizontal and vertical.
EZ Flex Button is a two-tone button and the settings for both the Static and Hovered states can be altered – make sure to choose subtle colour changes for the top and bottom of the button, otherwise it will end up looking like a stick of Brighton Rock. The hover states for the Button Text can also be set. Oh, and to add the button text, just click the button itself.
Font Resize Ultimate
If you are preparing a site for the visually impaired, a family album that your grandparents might visit, or you have a box with 'The Small Print', then RWExtras' Font Size Ultimate is the stack for you! It has three buttons to enlarge, reduce, or reset the size of a text.
There are two options available for this stack: If you're a newbie, you can drag a standard text stack into it and enter your content; the seasoned user can look for the Class/ID of any text elements on his/her page and enter it into the stack's settings panel.
In the first case, clicking the buttons that appear above the stack will enlarge, or reduce the size of any text contained within the Font Size Ultimate stack, in the latter case, the buttons will enlarge, or reduce the size of the text of all of the page elements that you added to the ID Or Class box.
To do the latter, the settings panel has two cool buttons: Show Theme Info and Show ID Values. When the first is activated, your preview page will show a list of classes from the stacks that have been placed on your page; Show ID Values displays the stack IDs. Copy the element Class or ID that you'd like to be enlarged and paste it into the Font Resize settings panel.
The remaining settings allow you to define button Alignment and the Symbols used for the button's Decrease, Reset, and Increase Labels. Fontawesome icons may also be used for these buttons.
It goes without saying that the button's Font size may be set, but there are also settings for the Label Dimensions, the Spacing between the Labels and a setting for Small Caps.
The next two settings are for the hover states of both the buttons themselves and the label text/icon.
Of course, being able to enlarge or reduce the size of a text wouldn't be much use, if you can't define how large the text has to be so that your grandfather can read it when he has mislaid his reading glasses again. Both the Increase and the Decrease settings can accept three different sizes – entered in Percent up to 300% and down to 1% (0% allows the text to disappear entirely). RWExtras' Font Resize Ultimate is the ideal stack for the visually impaired.
And last in this post …
RWExtras' Full Screen is an interesting stack that enables either a local, or a warehoused image to cover the screen. Depending on the z-Index you choose, Full Screen may be utilised as a background image slideshow, or you can annoy your visitors by hiding some or all of the page content every couple of seconds.
Once the stack is positioned on your page, the blue + button can be clicked to add images. Add a single image and the default Animation settings will cause the image to Fade or Slide in and out again every eight seconds. If you add multiple images, you get a slideshow. You can also set the Image Order to display random images.
The settings panel has options to overlay the image with a choice of nine different patterns or a .png image of your choice. The opacity of said overlay can also be altered. Unusual is the fact that the overlay and the image appear separately when set to Slide – interesting.
The main settings panel also allows the addition of Navigation, Pagination and Captions with extensive settings for each. The Image Title and Caption are set by clicking the image container itself, as opposed to the main stack.
As the RWExtras' Full Screen images cover the whole screen, it goes without saying that only one instance of the stack may be used per page.
As stated in the intro, each of these stacks brings a simple but elegant solution to the everyday requirements of building a website. A great selection for the novice, but also a quick n' dirty solution for the pro. More in the next post…
Will Woodgate has just updated ZipList, a stack that allows you to add simple collapsible lists to your RapidWeaver website.
The lists behave in a similar fashion to an accordion in that when a list item is clicked, the information it contains is revealed below it.
ZipList is useful for revealing product information, specifications, or FAQs, for instance and helps keep information tidy, accessible and organised.
ZipList in action – Ideal for FAQs
The latest version of
ZipList has been completely rewritten to modern standards and the brand new interface has been optimized for Stacks 3. Several additional style settings have been added for ZipList titles.
UPDATE: A second update now allows the dropdowns to close automatically when the next is clicked. Thanks Will!
ZipList stacks are marked-up as HTML definition lists; so they are fully accessible and comply to SEO standards.
I'm always impressed, when a developer returns to his code and makes meaningful changes to it.
Christoph at Rapid Ideas has just returned to his new stack News Grid and made some important alterations. As of next week it will be possible to add more than one RSS feed to the stack and to add more than one stack per page.
Now I have to follow his example and correct the post that I wrote about News Grid back in March.
DeFliGra is still slaving away in his Danish smithy and has produced yet another two new stacks!
Imator hasn't been officially announced yet. Fact is, although it works perfectly, Tommy still has a couple of features that he wants to add. However, I know a few people who are going to love this one!
Imator is an animated button stack. If you drag an image into the stack, you can set the image to grow or shrink on hover, to change shape, to grow a frame, to have the frame's shape change, to rotate …
… the options seem endless.
You can, of course, set Imator to link to content. However, if you want a row or a grid of animated buttons, take my advice – link the images, drop the images into your columns or grid (Tommy's Grid Stack is a perfect solution here) and wrap the entire grid in a single Imator Stack, set the desired animation and each single button within the grid will be animated!
Now BigPicture has been officially announced. It is a responsive image stack.
How do responsive image stacks function? When a web page is displayed on a narrower viewport, the image scales down in relationship to that viewport, in other words, the image gets progressively smaller, as the screen gets smaller.
Let's say we have a Real Estate website with the image of a house and a large garden. When scaled down to smartphone size, the house is unrecognisable. Not with BigPicture!
BigPicture can actually scale the image up if necessary, whilst cropping away the garden. BigPicture reduces the size of an image by cropping and shifting it, so that the important objects still form the dominant portion of the image.
BigPicture has settings for two breakpoints. For each breakpoint it is possible to set the image size in percent and it is possible to shift the image in percent, in relation to the image dimensions.
It is therefore possible at a breakpoint of say 640px to set the image size to 100% – the image dimensions will then be cropped because the containing stack is smaller than at 1024px. The image may then be moved in percent to centre the important details within the new container.
Then for 480px viewport width, you could set the image size to 80% and reposition it again.
The idea behind BigPicture is brilliant and I'm surprised that no-one has thought of it before!
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16