Webperf 101: How to speed up your Website

Michael Ruescher

SpeedometerFast load times and a snappy interface is a key indicator of quality for any website. Here's the key things to know about achieving the kind of web performance that keeps your visitors happy and coming back to your site. When it comes to web perf, less is usually more.

Continue reading »

Dashboard Redesign

Webpop

Webpops project dashboard has been updated with a whole new look, improved UI and room for new features that are on the horizon. We also overhauled the underlying database infrastructure a bit. Here's a list of changes:

Continue reading »

Webpop Extensions Q & A

Michael Ruescher

We get lots of support requests related to writing custom extensions. Here's a list of extension related questions and answers so that we can all learn from each other.

Continue reading »

Speeding up your Webfonts

Mathias Biilmann

The era of the font-face is upon us! During the last couple of years the growing support across platform for custom web-fonts via the CSS @font-face rule has completely changed the game for typography on the web.

While there's a bit of trickery to generating a Bulletproof @font-face Syntax the basic idea is simple to grasp: the @font-face rule allow us to import a font file from a URL and use that font in our CSS.

This is great, but as with seemingly all things web, there's still some trickery to it.

Continue reading »

Top 10 Free Icon Fonts

Johnson Lu & Michael Ruescher

WinkIcon Fonts are all the rage in web design today. They can really spice up the UX without incurring the large payload of images. They are also well suited for doing responsive design because their vector based nature makes them look crisp at any size of pixel density.  The fact that they are actually just fonts means you can easily customize their size, color, hover state and even apply cool CSS3 font styles like text shadows.

If you're really serious about site performance, especially for mobile, try building a site without any images and building your own custom icon set with something like Icomoon or Fontello. With a dash of color and the right set of icons, you can build really rich and lively websites with payloads under 100KB! Then for extra credit, serve the font via CDN! (it's actually a bit tricky to do right, but Webpop does it for you automatically via the bundle tag)

Here's the list of the best free icon fonts out there:

Continue reading »

Simple Responsive Images: Picturefill with one Line of Code

Michael Ruescher

Responsive Image MascotAll the good responsive image solutions perform a similar function: they let you specify which image urls should be served for various sreen sizes and pixel densities. That means they also create extra markup to maintain! But since your sites responsive images often share a common ratio of image resizing at various CSS breakpoints, there is an opportunity to DRY things up with a bit of abstraction.

Webpops extension engine makes it easy to abstract your favorite responsive images soluttion. This post covers a little responsive image extension for Webpop that lets you author Scott Jehls Picturefill ( a robust little responsive image solution ) in a single line of markup.

We'll use it to make a responsive Raptor gallery. Note that this same technique could be used with any number of other responsive image solutions as the underlying principles are the same.

Continue reading »

How to Build an Event Calendar with Elastic Search

Michael Ruescher

Events CalendarWe've all been there. You're working with a CMS, and a situation arises where your site has a very specific requirement for its content architecture that isn't possible to build in a clean way with the off-the-shelf parts your CMS provides. Even Webpop and its powerful standard library of Pop Tags can't possibly cover every content architecture situation.

But the cool thing about Webpop is that it's an open system which makes it easy for you to create custom Pop Tags that render out content exactly how you like it. In this post, I'll show you how to create a simple extension that uses elastic search to create an events calender.

Continue reading »

Top 15 CSS Generators

Michael Ruescher

CSS3There are tons of great little generators out there to help you write CSS for your Webpop sites. Everything from making a simple gradient to going through your entire stylesheet at adding the current browser prefixes. You can use them to add advanced CSS styles to your site, or just as interactive toys to learn how stuff works.

Continue reading »

Can a Puppy Sell a CMS?

Mathias Biilmann

Puppy FaceWe all know humans are hardly rational agents when it comes to buying decisions, often emotional reactions plays almost as large a role as facts, figures and logic.

Choosing a CMS is often a long process involving careful evaluation of the flexibility of the content model, the power of the template engine, the level of separation between design and content, etc. But even so, there's still plenty of space for the purely irrational to play a role.

A while ago we launched an interesting little test to dig into the effect of emotional engagement. In this case we decided to test the click through rate rate on our call to action at the bottom of most of our pages where we urge people to give our 30 day free trial a shot.

Continue reading »

Author Smarter Stylesheets with Sass Compass Integration

Michael Ruescher

Sass CompassToday, we're proud to announce that Sass Compass is now built right into Webpop’s IDE! Compass has been rising star in the world of CSS authoring abstractions, it's almost like the jQuery of CSS, mitigating the complexity of authoring modern CSS

To get started with it, simply import Compass at the top of any .scss or .sass file in your public folder, like so:

@import ‘compass’

What is Compass?

Compass is an open-source CSS authoring framework that runs on top of Sass that gives you the tools you need to author really expressive stylesheets with robust browser support. It comes loaded with a great collection of Sass mixins that greatly simplify authoring modern CSS styles.

Continue reading »

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
×