The world of building websites is always a fast-moving one. It seems like some amazing new framework or design app comes out every day! In this article you’ll get a rundown of 7 exciting new developments in the web design and development arena. These technologies promise to make it easier than ever to create beautiful, functional websites and web apps. Enjoy!
Meteor looks to be an amazing new application platform for writing and deploying web apps. It promises to be the platform to use for building apps for the next couple of decades! It’s a bold claim, but they might just be right.
Historically, websites have mostly worked on a “run stuff on the server, and send the HTML to a dumb browser” approach. The Meteor team’s argument is that this technique is now outdated. Modern browsers are much more capable of running apps themselves – pulling data from the server, as well as other web services all over the place – and it doesn’t make sense to stick with the old “everything runs on the server” model. It makes more sense for the browser to request just the data it needs – from multiple sources if necessary – and build its own markup to display the app interface.
Meteor uses the reactive programming concept, which means that elements in the page auto-update whenever you change the app’s data. This means less work for you as a coder, and potentially a more robust user interface.
Other great Meteor features include support for multiple templating engines; database replication across server and browser for super-fast database access; and easy app deployment on both your own server and Meteor’s free app server at
Meteor looks like a really elegant way to build modern web apps; I can’t wait to try it out myself. It’s currently at the “early preview” stage, with 1.0 to follow in a few months. Meanwhile, Sacha Greif has written a great intro to Meteor that shows how to build a Meteor-based app in just 45 minutes.
Tumult Hype 2.0: Bye-bye Flash
I’ve been playing with Hype 2.0 on and off for a few weeks, and while it lacks many of the features offered by Flash Professional, you can certainly use it to create professional-looking interactive content on the web. Check out some of the games and infographics that people have created with Hype.
Some of Hype 2.0’s great new features include Hype Reflect, a free iOS app that lets you preview your work instantly on an iPhone or iPad;
much better support for mobile content; enhanced audio support, and curved motion paths. Macworld has a good summary of the new features.
Bohemian Sketch: A web designer’s dream
While Photoshop remains a popular choice among web designers, many folks are on the lookout for a more streamlined and affordable app that is more suited to the task of designing for the web.
Bohemian Coding’s Sketch could be just that app. As with Hype, Sketch is a Mac app that has evolved from a relatively simplistic design tool into an elegant, feature-rich app with some very nice features targeted at web interface designers. These include:
- Vector-based for precise, non-destructive editing and resolution-independent results
- Built-in grid support
- Multiple pages and artboards in a single Sketch document
- Easy slicing and automatic image trimming
- Layer styles for easily adding effects such as fills, borders and shadows
Simon here at Elated uses Sketch for practically all his web design work these days. Check out this article he wrote on Sketch earlier this year.
LiveStyle: Live bidirectional CSS editing
Emmet LiveStyle is an almost magical new browser plugin for live CSS editing.
You may have heard of plugins such as LiveReload that watch your local CSS files for changes. When you make a change to a CSS file and save it, the plugin refreshes your browser automatically to show the effect of your change.
LiveStyle takes this concept a bit further. With LiveStyle, you don’t even have to save your CSS file! The moment you make a change to the CSS stylesheet in your text editor, the change shows up instantly in the browser, without even reloading the page. This even works in the other direction: You can edit a page’s CSS inside the browser (using the browser’s Web Inspector), and LiveStyle automatically updates the CSS in your text editor.
You can edit any page’s CSS this way, even if you don’t have a local copy of the CSS file, or the CSS is minified! The demo video shows live editing of Facebook’s and Google’s homepages using LiveStyle.
This is all possible because LiveStyle analyses CSS changes at a structural level, and transmits just those changes from browser to editor (and vice-versa). Very cool. Currently in public beta, and only works with Sublime Text, but a final paid version is promised soon, as is wider editor support.
Bootstrap 3: A modern front-end framework with mobile-first goodness
Bootstrap is a front-end web framework that’s been gaining a lot of traction recently. Originally created at Twitter, it is now an open-source project that’s evolving rapidly.
Version 3 came out in August and it has all sorts of lovely new features, including:
- Mobile-first: The framework lets you design your site for mobile first, then effortlessly scale up your content all the way up to widescreen desktop. It’s fully responsive so your pages automatically adapt to different display sizes.
- Really cool grid system: The grid is really nice to use and includes breakpoints for phones, tablets, desktops, and large desktops.
- A lovely optional theme: By default Bootstrap gives your site a very minimal look, but now you can also use and build upon a great-looking theme to add some prettiness to your pages. Check out those gorgeous colours!
- A great new customizer: Use the customizer to tweak almost every aspect of Bootstrap and build a custom version to your taste. It all compiles instantly in your browser and downloads straight to your computer for easy deployment.
I love Bootstrap; right now it’s the first framework I turn to when building new sites. To see more of what Bootstrap can do, check out the examples.
Macaw: An image editor that truly understands code
While every web designer should understand at least a bit of HTML and CSS these days, most web designers would rather be designing than coding. In theory it would be great if their design tool could take their visual designs and output the corresponding HTML and CSS automatically.
Many image editors such as Fireworks have supported HTML and CSS export for a while, but the results are usually pretty bad, with ugly, verbose HTML and non-semantic CSS classes.
Enter Macaw. This code-savvy design app claims to understand your design elements at the semantic level, allowing it to output clear, succinct and understandable HTML and CSS code that’s close to what a real front-end coder would produce.
Macaw’s headline features include:
- Global classes: Create a common style that you use a lot and save it as a global class. You can then easily restyle all the elements that use the class just by editing the class.
- Consolidation: Macaw’s Alchemy engine organizes your CSS selectors in the most succinct, efficient way possible, producing beautiful, easy-to-read CSS.
- Absolute to static conversion: Lay out your page in Macaw as if you were using absolute positioning. Macaw automatically converts element to use standard static positioning in the browser, with suitable margins, padding and floats.
- Fluid grids and responsive layouts: Macaw has a resizable canvas with fluid grids, and you can set responsive breakpoints then adjust CSS properties for different viewport widths.
- Style guide exports: Macaw can automatically generate a style guide page that demonstrates the typography, colours, grids and classes used in your design. Very cool!
Macaw is currently unreleased but there’s a tantalising sneak peek video available. Check it out!
Famo.us: Smooth web interfaces just got real
I think there has been a lot of misunderstanding over exactly what Famo.us can do. Their tech demo makes it look like it’s designed just for creating 3D graphics (albeit super-smooth graphics) as a glorified Flash replacement; however it is just as suited to 2D interfaces, and I think this will be the most common use case for Famo.us in the short term. Think playful, tactile animated app interfaces like we’re starting to see with iOS 7. The video below (running on an iPad) gives a good indication of what’s possible.
I can’t wait to see how developers use this technology in the future to create web apps that compete with the smooth user experience currently delivered by native apps. Exciting times!
What new web tech gets you going?
What new or up-and-coming web technology, framework or app gets you excited? Maybe you use one or more of the technologies in this article? I’d love to hear your thoughts in the comments below!