Doobox has just released two new stacks – Shadow and Gradient. Each stack does exactly what it says on the tin, and each stack does it well.
Gradient. When you place a gradient stack on your page, it has a container into which you can drop any other stack. All you need to do now is set a start and an end colour and Gradient will create a smooth CSS gradient behind those stacks. Yes, I was underwhelmed too – until i compared the options with some of those available with similar stacks. And, when I say it creates a smooth gradient, I mean smooth.
Gradient doesn't stop at simple gradients, though. In between the start and end colours, you will find options to set two midpoint colours to create an undulating gradient. You'll need to be careful with the midpoints though – while a rainbow may be desirable in rare cases, you'll probably want to stick with more moderate designs.
Obviously, if you're placing text over a gradient, your theme's colours are not always going to be a perfect choice. Gradient's setting 'Override Text Colours' will allow you to set the appearance of Headers, Text and Links individually.
Shadow. If shadows are your thing, you will appreciate Shadow which supplies two different options: shadows for text and shadows for boxes. The settings for Text Shadow are straightforward, you can set both the Horizontal and the Vertical offset, the Blur Radius and the colour.
Box Shadow has an extra setting for Spread and also adds Borders and Frames. Frames will add coloured padding to your image, while Border will add a coloured margin. Setting the option for Radius will round the outer edges of the border. if your containing stack happens to be wider than the image, Image Alignment may be set to left, right or centre. The shadow may also be inset.
Shadow isn't the first stack that can add shadows to stack elements, but it is the first that I've seen that has options for both text and boxes. In the same way, Gradient also isn't the first stack that can add gradient backgrounds, but it is the first that I've discovered that will override your theme settings whilst producing pixel-perfect gradients.
On the various RapidWeaver forums, the same question is repeated time and again:
Which is the best eCommerce solution for RapidWeaver?
The answer is not that simple without asking further questions.
Do you aim to sell dozens of products or hundreds?
How complicated are the options required to sell your product?
If you aim to sell hundreds of products, you need read no further. You will need a professional e-commerce solution such as Shopify or Ecwid etc. This comparison is aimed at those designers who are looking to incorporate a smaller web-store in their online presence. The comparison is also restricted to two stacks and one plugin. Cart from Yuzool, PaySnap from Yabdab and the plugin RapidCart from Omnidea.
Let's go through them in order of price again:
Cart is a suite of six stacks from from Yuzool and is the new kid on the block.
Michael has achieved his aim of creating a shopping cart that is quick and easy to setup. Cart is designed specifically for payments via PayPal.
It is recommended that Cart Enabler and Cart Return are added to the bottom of the page. Cart Enabler sets the cart popup. Without it, clicking a Buy Now button sends the user directly to the PayPal page.
The Cart Return stack empties the cart when the customer is redirected to your page from PayPal.
Cart offers three variations. The first option is to add a Cart Simple button to your page. In the HUD, you can set your PayPal ID, the Currency and the Item Name. A checkbox will enable an SKU (Stock Keeping Unit - a unique identifier for each distinct product that can be purchased). The product then requires a price (Amount) and a price for Shipping. It is also possible to add a Discount. The numeral entered here will be deducted from the final price.
The HUD has further settings for the Return URL and a Cancel URL – the paths that PayPal will use to return a customer to your site. The Cancel URL is optional. The final setting is for the Button size and colour.
The second option is a Cart Variable stack. The basic settings for PayPal ID, Currency, Item Name, etc. are the same as the Simple stack, but Cart Variable allows you to set up to seven variables which could be used for adding sizes or colours for your product.
The third option is Cart Variable Price. Once more, the basic setup is identical the the previous two stacks. Once more there are seven variables available, but this time you may add an Option and a price variation.
If we use T-Shirts as an example, this gives us two scenarios — you could either set Blue T-Shirts and a price of $10, Red/$9, Green/$11, for instance, or you could set a graduated rebate, i.e. 1 Shirt at $10, 2 Shirts/$18, 3 Shirts/$24 etc.
You can drop as many Cart Simple and/or Variable stacks as you need onto a Stacks page – one for each item you wish to sell.
Cart's final stack is a Cart View button. The button will open up the cart popup and allow you to check out.
PaySnap from Yabdab is a suite of seven stacks and is specifically for payments with PayPal.
You will need to add a single Base stack to your stacks page to enable PaySnap. The Base stack's HUD is where you will set up your PayPal details.
Drop a PaySnap Item stack onto your page and in the HUD you can give that item a name, an Item Number and a Price. You may add Weights, Handling Fees and Tax. Into the Item stack you may now add further stacks such as image or text stacks to describe your products, for instance.
You will need to add a Price stack into the Item stack. The item's price is added to the HUD. The size and colour can also be set here.
With an Item Options stack you can add a Dropdown, Radio Buttons, Checkbox or Option Text to the Item stack. You may define the number of options available (Blue T-Shirt, Red T-Shirt etc.) and you may also set separate prices for each option. Multiple Option stacks may be added to the item stack, so that in addition to colours, you could add an Option stack to set bulk rebates, for instance. No maths as such necessary. For our T-Shirts – If one shirt costs $10 that is the price you enter. If two Shirts cost $9 each, you enter $18 etc.
The Quantity stack lets your visitor choose how many T-Shirts he wants to buy.
There is an option for an Editable Price which would allow the customer to set the amount of a donation or how much he wants to pay for an item. For obvious resons, Editable Price items can not be used in conjunction with products that have options with prices assigned to them.
PaySnap's Buttons can be set to 'Add To Cart' or 'View Cart'. A choice of three sizes is available as are options for a custom button or custom code.
The final PaySnap stack is for More Details. This will add a text link to your product, which will open a popup window. You can enter text and add an image to the popup window and images may be linked. The size and colour of the popup are defined in the HUD.
RapidCart from Omnidea is a RapidWeaver plugin. Plugins allow you to build independent RapidWeaver pages. For the past twelve months at least, Omnidea have been overhauling the plugin, but there is no news as to when it will be released.
Once you've added a RapidCart page to your project, you can immediately begin to add items to your product selection. First drop in an image of the item you wish to sell; add a name for the item and, if you wish, an SKU.
You should then add the alternate text for the image. This is correctly labled 'Image SEO'. Define the size of the automatically generated thumbnail and, if required, add a shadow.
Optionally, you can add the weight of the goods, a purchase limit and a status – 'Available', 'Out of Stock' or 'Disabled' (the article will not be displayed until enabled again).
In the description tab at the bottom of the page, a formatted-text box will be displayed. You may either enter your product description here and format it using RapidWeavers tools, or you may switch to HTML and format your text using HTML and CSS.
The Pricing tab at the bottom of the page is also straightforward. Enter the price for the product. Below this, you may enter a special price (the original price will then be displayed with a strikethrough). Taxes, Shipping Costs and Shipping Costs for each additional item can also be added here.
An option for a coupon code is included, but coupon codes must first be activated in the page setup, where you will also set up currency and payment options etc.
If you plan to offer rebates for bulk purchases, things begin to get a little more complicated.
You will need to go to the options tab and define purchase options separately. Let's stick with our T-Shirts. You're selling T-Shirts at $10 each. If a customer orders two shirts, you want to sell the shirts for $9, 3 Shirts $8, etc.
You'll first need to add an Option e.g. Price. Then you should define an Option Value 1 T-Shirt and $0 – you already set up the price, so nothing needs to be added – weights may be defined if you're selling dry goods. Next you'll need to create a new Option Value 2 T-Shirts and add the price of $8, 3 T-Shirts $14, etc.
Now when your customer adds two T-Shirts to his basket, the price $18 will be displayed, plus additional costs for Tax and Shipping. If you want to add more complicated price reductions, such as 10% for two purchases, 12% for three etc. you have some serious maths to do.
In the page setup, you may choose how many columns you wish for your new store and you may apply your own custom formatting. 'Add to Basket' Buttons are added automatically (but custom buttons will look better in Firefox) and the cart, displayed at the top of your page looks brilliant – especially as you can watch your purchases 'fly' into the basket.
If you have multiple RapidCart pages, they may either share a shopping cart or each have a separate cart, defined with a cart ID in the page setup.
I have had good results importing RapidCart pages into Stacks pages via PlusKit; a single-column layout adapts well on a responsive page. If the product thumbnails are kept relatively small the page will still display on an iPhone in portrait mode. From landscape mode upwards, the display is excellent, even with larger Thumbnails.
RapidCart has a separate set-up page for additional costs based on total price, total number of products or total weight and has payment options for PayPal, Google Wallet, E-junkie, Sisow/iDeal or direct order via mail.
Cart is a very fast and simple solution. You can set up a page and sell products within minutes. You can offer product variations or price variations, but can not combine the two. However, if you are selling products that only require a few variations, Cart could be the ideal solution.
PaySnap is more complicated to set up but offers product variations that may be combined with each other (size, colour, rebate, for instance). PaySnap includes a versatile, built in popup for product information. Set up requires a little thought but if you want to offer options combined with price reductions based on bulk purchases, it is worth the extra effort.
RapidCart provides a solution for setting up products with more intricate options. It has a page devoted to defining additional costs and allows payment via solutions other than PayPal. The setup can become complicated, i.e. when setting rebates or changing the stylesheets to include custom buttons. It remains, however, exceedingly versatile – which justifies the high cost of the plugin.
Because Cart and PaySnap are stacks, you can design your store exactly as you would like it, using as many columns as you wish and arranging the layout to suit your taste exactly. RapidCart on the other hand is more restrictive, the layout is as RapidCart lays it out; you may choose to display your content in up to four columns, but these are not responsive. It remains to be seen what the update will bring – when it finally arrives.
It should be noted that RapidCart allows items to be duplicated once they have been set up, and stacks can easily be duplicated. This simplifies the setting up of products that have similar properties.
There have already been attempts to port parallax functionality to RapidWeaver Stacks pages. All of them began life as nervous affairs which, when you scrolled the page, first did nothing and then sprang to jittering life. Even the demo pages couldn't be trusted to work properly.
Parallax from Joe Workman is just out of beta and proves that a parallax stack can work 'out of the box'.
The thing that I like most about Parallax is the fact that it is so easy to set up. When you drop the stack onto your page, you will see an empty image frame in which you may position either a local or a warehoused image.
The first option in the stack is the image functionality. The image may be a cover image. This means that any other stacks placed on the page will slide over the background image, when scrolled, while the image itself will also move, albeit at a different speed to further content.
The image may also be set to a specific minimum size and 'Image Only'. As the page scrolls, the image will also scroll at a different speed, but without any other stacks moving over it.
The third available setting is Image + Content. With this option, it is possible to insert further stacks into the Parallax stack. Parallax can now be set to a minimum height. The content within Parallax will remain within the constraints of the stack. Both contents and image will now scroll up and down at differing speeds.
A standard value of 20px is set for 'Bleed' this will enlarge the parallax stack to avoid flicker at the boundaries between the image and adjacent stacks that have a solid filling.
Parallax also has a settings for the speed at which the background image will move in relation to the page scroll, for the z-Index and for the image opacity.
Parallax scrolling has always been problematic on mobile devices. For this reason Parallax displays a static image below 641px screen width. You'll find a second image container within the HUD. If you feel that the proportions of your image are impractical on a mobile device, you may add a second image to Parallax, which will then be displayed on those devices. The opacity of the second image may also be set in the HUD.
The use of mobile devices to surf the web is growing at an astronomical pace. The increase of economical Mobile phones and data plans worldwide, means that during 2015 mobile web access will surpass that of desktop units.
Unfortunately the largest proportion of the web isn't optimised for those devices. Mobile devices are usually constrained by display size and require a unique approach to on-screen content layout.
So you recently visited a company's website on your smartphone and noticed that it had an m-dot address. The idea crossed your mind that, with mobile web access on the rise, it might be a good idea to invest in a mobile site of your own. Don't!
With the constantly changing size of phones and tablets, and the variations between landscape and portrait mode, there is in no practicable method of having a design for each of them. Apart from this fact, you will be penalised by Google, who recently issued a statement that adaptive websites will receive a higher SEO ranking than sites that publish multiple versions of their content.
So what is the solution?
Responsive web design adjusts to suit the capability of the device that a client is using. The layout will change according to screen size and orientation. For example, on a phone, users could see content shown in a single column view, while a tablet might show the same content in two or even three columns, depending on its orientation. Responsive web design allows websites to adapt to a variety of devices and rules out of the extra cost of designing for each device separately. Responsive Web Design will make full use of the size of your devices screen, the contents of a site will be optimised for the appropriate resolution and unnecessary zooming, panning, and scrolling while visiting a website is eliminated.
The easiest way of confirming that a website is responsive or not, is to resize your browser window. If you see the contents of the site alter their size or shuffle around to fit the new size of your browser window, you will be able to view the website on any device — desktop, laptop, tablet or mobile.
The transfer from desktop to mobile devices compels web developers to create a design that is responsive to varying screen sizes. For a while, we assumed that the solution was mobile templates – two or more different sites that would load automatically, depending on the device detected. However, this creates extra initial design costs and can trigger havoc when updating content. A Responsive Web Design makes the enterprise not only easier, but is cheaper and more efficient for revisions – an administrator only needs to adjust one set of web content, saving time and ruling out errors.
As previously stated, SEO (Search Engine Optimisation) is a further key factor to consider. Google evidently prefers responsive web design over mobile templates – It is both easier and safer for a Search Engine to navigate a single URL.
Consider the situation of just two different sets of web content; a desktop version and a mobile template. Technical information was updated on the desktop version, but your webmaster either forgot to update the mobile version, or put off the alterations until after the weekend. Search Engines now have conflicting information. The situation can not arise if you have a single, adaptive website.
From the user's point of view, a responsive design provides a better experience. Responsive Design reduces user actions and the exasperation that users frequently experience when using a static website. If a visitor to your site is using a mobile device and, due to panning and zooming, is unable to quickly find exactly what he is looking for, there is an extremely high chance that he will navigate away from your site to visit a competitor. Google informs us, however, that if a user is happy with his experience on your website, the chance of him becoming your customer increases to 67%.
Four things you can do to ensure a positive user experience
If this is your first responsive design, it is tempting to build a web page that is easily compatible with mobile devices. Are you compromising the design in the process? Responsive web design can be challenging to implement, but when it is applied properly, it will provide better results. However, don't neglect the fact that Apple's most popular PCs now have a screen size of 27 inches and a resolution of 2650 x 1440px!
Using a Responsive Grid System, such as Bootstrap or Foundation can assist in making your design fit the content and vice versa.
Remember that users may be accessing your website on slower 3G connections (UK, Asia) and/or less economical provider plans (USA, UK, Asia). Loading times are important and large file sizes can cause a visitor to leave your site even before it loads completely.
Bear in mind that a mobile visitor will be using his finger to navigate your website. Pay attention to link placement. Apple recommends a minimum acceptable size for mobile controls of 44 pixels. Any links viewed on a Smartphone should fit underneath a finger.
Don't disable zooming. In doing so, you are reducing your visitor's control over your website and indirectly reducing his positive experience.
Web design is is in a constant state of change and has been since its inception. We are continually reviewing the methods that we use to improve our websites.
For the near future one thing is undisputed: Responsive Web Design is the road we are traversing. With a multitude of new screen sizes and devices being introduced on a monthly basis, Responsive Web Design is the means for both developers and Search Engines to stay ahead of the development.
A laptop has a larger screen real estate than a tablet in portrait mode has a larger screen real estate than a mobile phone. An undisputed fact, right? A laptop can display animated content, but it can be difficult to scale that content to smartphone size. Problems that we encounter every day when designing for the web.
We can resolve many of the problems by reshuffling the page on smaller screens but if an animation scales down to display just the middle portion of "vibrate", things start to get awkward. There are a multitude of stacks available that can help out by hiding content on smaller devices. They do so by requesting the device to identify itself or by requesting the viewport size. Once a specific device or a narrow viewport is recognised, content will be hidden from view. Some, but not all of these stacks offer a 'hide-'n-show' function and can display an alternative stack on the excluded devices. There are, however, very few stacks that will offer more than the two options. Many of the stacks available can be added to a page more than once, so that the content of one stack can be viewed while others are hidden, but for some users this is too cumbersome.
Responder, the newest addition to DeFliGra's range is quite unique in two aspects. Firstly, it adds two breakpoints at which it can display alternative content and secondly, it doesn't take up half of your layout view in doing so.
Responder, once dropped onto your Stacks page, gives you three stack containers. Each container can be set to display below a specific screen width by altering the breakpoints in the HUD. The first container is entitled 'PC' and will display whenever the viewport is wider than the other two definitions. The second container, called 'Tablet', displays when the viewport is 780px wide or below, this is the width of an iPad in landscape mode. To change the width to portrait mode, you should set 640px. The third container, 'Smartphone', is set to display at 480px and below - the width of an iPhone in landscape mode. Portrait mode would be 320px.
The three containers that Responder adds to your layout are displayed horizontally across the screen by default, but can be set to display vertically. The containers are colour coded to make them readily identifiable and they display any images contained within them at a reduced size, which you may set yourself in the HUD. This makes hiding and showing content exceptionally easy, as you can see at a glance just which combination of stacks will be displayed in which situation.
I have a couple of hide and show stacks in my arsenal. Responder is by far the easiest to use and keeps my layout screen clutter free.
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