background preloader

WebDesign

Facebook Twitter

Announcing The Prezi Player API - Engineering at Prezi. Every embeddable player needs an API. It’s the bridge between your content and the web page you’re embedding it in, allowing them to function as a single, integrated unit. The end goal being a much richer and unified experience for your users, customers, readers, or fellow travelers on the Information Superhighway. Without an API, it’s like you’re trying to mix oil and water. Why would you do that? Having said that, we’ve yet to release an API for the Prezi player. The Prezi Player API allows you to quickly and easily embed a Prezi player into a web page, and then programmatically control it using JavaScript. The API More on that later, but first the API. Next, add a <div> element to your page where you want the embedded prezi to appear and give it an id.

Finally, pick a prezi to display, and look at its URL. The first part of the URL, hp08thgs3ifs, is the Prezi’s id. After you make that call, a Prezi should appear on your web page. Timer. Bootstrap Magic : Generate your own bootstrap theme quickly and easily. Bootstrap-wysihtml5. Viewing snipp | Thumbnails like Bootsnipp. Start Bootstrap - Free HTML Templates for Bootstrap 3.

A Collection of Page Transitions. Sidebar Transitions. Bootstrap 3 Grid Builder. A Responsive Web Design Process | Heliom — Websites Done Right. Despite the huge amount of knowledge being shared on the subject of responsive design, I get the feeling that the workflow is still very mysterious. I’ve been thinking about a right process for quite a long time and finally came up with what I think is a good look at the practical side of designing websites in 2013. 1.

Plan your Content Planning your content is the first and foremost solution to any design project. It is clearly the most underrated part of the job, and it’s not because you are a designer that you shouldn’t be doing it. It’s where the best of the teamwork happens and where the creativity of everyone, from UX designer to back-end developer can be put to the test. Content audit: get everything you can, from text to images and logos.Lay out your website in a Google Doc (or anything similar) starting with the general overview (brand message, site architecture, etc) and detailing every page’s content. These are only the very basic components of a content strategy. 2. 3. 4. 5. CSS 3D Image Flip Gallery With Dynamic Shadows. My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3D works, such as the Origami UI: we live in a world of increasingly diversified screens, with smaller sizes rapidly becoming the norm.

That demands a reconsideration of space: rather than placing captions below photographs, we might want to place them behind the image, to be revealed with a mouseover or tap action. Creating The Basic Gallery The markup for the image flip gallery couldn’t be much simpler: <figcaption>Yacht</figcaption> <figcaption>Bee</figcaption> <figcaption>Queens-town</figcaption> Note the outer div for each figure, which will be used to create a 3D context for the gallery content.

To gain the 3D effect shown in the example, we need to do three things: The Initial CSS div.flip-3d { perspective: 1200px; width: 30%; float: left; Responsive Web Design just got Easier with the Responsive Grid System. Pen. Fluid Grids. Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility.

So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below Over the past few years, this sort of thinking has become more common. Thanks to the advocacy of Mark Boulton, Khoi Vinh, and others, we’ve seen a resurgence of interest in the typographic grid, and how to use it on the web.

And frankly, the idea’s been a smash hit: a million CSS frameworks have bloomed, with sundry tools to complement them, each built to make grid-based design even more accessible to the average designer. However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1. Golden Grid System. GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used.

GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles.