Proto.io is powerful solution for prototyping native and web apps for use on a variety of devices. The learning curve is a bit steeper than with Axure, but it can be mastered with a little time and practice. Proto.io’s real strength is its built-in support for many device types and native app libraries, and its support for gestures and transitions. The first thing to know is that unlike most prototyping tools, Proto.io is a web application, so you’ll need an internet connection to do your work. Assuming you’ll have access when you need it, Proto.io offers a lot for mobile designers to love, built right into the app.
Read more…
ESI works in a similar way to other methods of including fragments in your pages, such as Server Side Includes (SSI) or PHP include statements, but it has been designed for reverse proxies like Varnish that sit in front of a web server and cache content. In this article Rachel Andrew will explain how you can benefit from using Varnish even when there are parts of your pages that can’t be cached for long periods, using Edge Side Includes.
Read more…
JavaScript is “real” programming. This means you not only have to learn a whole new and complex syntax but also have to “learn how to think.” The barriers to entry are high and prevent many designers from taking the plunge. uilang tries to fix that. In this article Benjamin De Cock will introduce you to uilang’s philosophy and syntax. You’ll start with a simple example to get you comfortable with the basics, before moving to something more exciting. At the end of this tutorial, you’ll be able to code many typical interface widgets, such as popovers, tabs, overlays and much, much more.
Read more…
The total size of media elements on the average web page is increasing constantly. Yet, especially on mobile devices, performance bottlenecks remain, which stem from bandwidth issues, widely varying network latency, and limitations on memory and the CPU. You need solutions for better and faster browsing experiences that work across all devices and browsers. In this article Denis Ryabov & Ugur Kaner will discuss why they should and shouldn’t use Lazy Load, and how to implement it.
Read more…
Something interactive will almost always communicate more than a picture ever could, and you’ll have better conversations because of it. On the other hand, Sketch is an excellent UI design tool, lightweight and quite powerful, and it works great with Flinto, InVision and the like because they live in the borderlands of flat images and HTML or native code. In this article, Joshua Mauldin will talk you through why you should prototype and how you can do it with Sketch and prototyping tools such as Flinto and InVision. He’ll also get a nicely documented freebie Sketch file to help you.
Read more…
Print style sheets is the main thing that comes to mind if you mention printing with CSS. But CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all. In this article, Rachel Andrew will take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. She’ll explain how the selectors, properties and values that they introduce work. She’ll finish up with a working example that you can use as a starting point for your own experiments.
Read more…
The World Wide Web is not static. Quite the opposite: It’s responsive, fluid, evolving and ever changing.
Web designers need to be familiar with HTML and CSS code and front-end technologies when they conceive a website or application’s interface. In Creative Suite version 6, a CSS Properties panel was added to its toolset — a tool that, if used properly, could help both designers with CSS coding experience and beginners alike. By the end of this article, you should have a better overview of this feature and also know how to use it with CSS Professionalzr, a free extension developed by Matt Stow to further optimize the code generated by the panel.
Read more…
Ruth John has met some resistance when talking about this API. People either can’t see a need for it with the web, or they would feel uncomfortable talking to their device — both valid views. However, he hopes he will inspire you to at least give it a go and think about it the next time you are building something. Start welcoming speech: It might be just what you’re listening for.
Read more…
People make all sorts of visual notes. An army of sketchnoters is out there, and everyone has their own style. Some do amazing sketches and lavish letters. Some translate complicated concepts into easy-to-grasp diagrams. But for the sake of this article, let’s keep it simple. Making your notes more interesting doesn’t have to be a huge undertaking. It’s not like learning to play the piano or taking up diving. If you think sketchnoting looks fun, Elisabeth Irgens has some tips to get you started.
Read more…
In this article, Sara Soueidan will go over the prerequisites and techniques for working with CSS in SVG.
She’ll also go over how to export and optimize SVGs, techniques for embedding them and how each one affects the styles and animations applied, and then we’ll actually style and animate with CSS. Make your SVGs accessible! You can do several things to make that happen. In addition to accessibility, don’t forget to optimize your SVGs and provide fallbacks for non-supporting browsers. We hope you’ll find this article to be useful.
Read more…
