Filed under Coding by Sam Collins
The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.
The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.
Continue Reading "Zocial Button Set: 72 CSS3 Buttons"
Today at 12:39 pm Comments (0)
Filed under Coding by Phil Leggetter
The Web has become increasingly interactive over the years. This trend is set to continue with the next generation of applications driven by the real-time Web. Adding real-time functionality to an application can result in a more interactive and engaging user experience.
However, setting up and maintaining the server-side real-time components can be an unwanted distraction. But don’t worry, there is a solution.
Continue Reading "How To Build A Real-Time Commenting System"
May 9, 2012 at 1:08 pm Comments (0)
Filed under Articles, Coding, CSS, css3, Design, generators, interface, links, Resources, roundup, Tips, Tools, Web Design by Chris Spooner
With the latest advances in CSS3 many of the effects that were once only achievable in Photoshop can now be replicated in CSS code, but it’s sometimes difficult to visualise the appearance of these effects when staring at a few lines of syntax. This is where CSS generators come in handy, this roundup of tools [...]
Continue Reading "Handy Roundup of CSS3 Generators and Tools"
May 7, 2012 at 7:00 am Comments (0)
Filed under Coding by Jacob Cook
Welcome to the first in a new series of interviews called “How I Work”. These interviews revolve around how thinkers and creators in the Web world design, code, and create.
The goal is not to get into the specific nuances of their craft (as that information already exists online), but rather step back and learn a bit about their habits, philosophies, and workflow for producing great work.
Continue Reading "How I Work: Yahoo!’s Doug Crockford On JavaScript"
April 27, 2012 at 3:27 pm Comments (0)
Filed under Coding by Alessio Atzeni
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.
But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation.
Continue Reading "A Pure CSS3 Cycling Slideshow"
April 25, 2012 at 2:10 pm Comments (0)
Filed under accessibility, Coding, CSS, Design, dribbble, HTML, Portfolio, standards, techniques, Tips, Tutorial, Tutorials, Web Design by Chris Spooner
Continue this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this second and final part of the series we’ll go through the process of building the Photoshop concept into a working HTML/CSS web page then add the jQuery plugins to [...]
Continue Reading "Build a Basic Dribbble Fed Portfolio Website (Part 2/2)"
April 23, 2012 at 7:00 am Comments (0)
Filed under Coding by Jonathan Snook
For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean.
CSS Zen Garden proved that we can alter a design into a myriad of permutations simply by changing the CSS. However, we’ve rarely seen the flip side of this — the side that is more likely to occur in a project: the HTML changes. We modify the HTML and then have to go back and revise any CSS that goes with it.
Continue Reading "Decoupling HTML From CSS"
April 20, 2012 at 2:26 pm Comments (0)
Filed under Coding, css3, Design by Tom Giannattasio
This year’s experiment: a 3D pop-up book á la Dr. Seuss. If you haven’t seen it yet, hop on over and take a look. The website was a test to see how far SVG and CSS 3D transforms could be pushed. I learned a lot in the process and wanted to share some of the techniques that I found helpful when working in 3D space.
Before we jump in, please note that explaining everything about the website without boring you to death would be damn near impossible. For your sake and mine, I’ll provide just brief takeaways. As you skim through the code snippets, be aware that jQuery is being used and that a lot of code has been removed for simplicity (including browser prefixes).
Continue Reading "Beercamp: An Experiment With CSS 3D"
April 17, 2012 at 12:32 pm Comments (0)
Filed under Coding by Varvara Stepanova
This article is the sixth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts, the fourth covered a free plugin called GuideGuide and the fifth presented Erskine Design’s responsive grid generator Gridpak. Today, we are happy to feature a toolkit devised by Yandex: BEM.
BEM stands for “Block”, “Element”, “Modifier”. It is a front-end methodology: a new way of thinking when developing Web interfaces. This article will elaborate on the theory as well as the practice of building websites at Yandex—one of the leading internet companies in Russia.
Continue Reading "A New Front-End Methodology: BEM"
April 16, 2012 at 4:25 pm Comments (0)
Filed under Coding by Niels Matthijs
I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003.
Still, the CSS sprite hasn’t truly found its way into the everyday toolkit of the common Web developer. While the theory behind CSS sprites is easy enough and its advantages are clear, they still prove to be too bothersome to implement, especially when time is short and deadlines are looming. Barriers exist to be breached, though, and we’re not going to let a couple of tiny bumps in the road spoil the greater perks of the CSS sprite.
Continue Reading "CSS Sprites Revisited"
April 11, 2012 at 2:07 pm Comments (0)
Filed under Animation, Articles, Coding, CSS, css3, Design, keyframes, links, Resources, Web Design by Chris Spooner
We started seeing experimentation and articles about CSS3 @keyframes animation in 2011, but back then support was limited to webkit browsers. As of mid 2011 Firefox 5 gained support, and we can expect the next incarnation of Internet Explorer (10) to also show support, so now is the perfect time to get to grips with [...]
Continue Reading "Useful Links for Learning CSS @Keyframes Animation"
April 9, 2012 at 7:00 am Comments (0)
Filed under accessibility, Coding, CSS, html5, Web Design by Jacob Cass
This is a guest article contributed by Vail Joy. As Opera evangelist Bruce Lawson puts it, “Everyone’s talking about HTML5”. It’s perhaps the most hyped technology since people started putting rounded corners & gradients on everything. In fact, a lot [..]
Read More
Continue Reading "7 Facts and Myths of HTML5"
March 27, 2012 at 1:27 pm Comments (0)
Filed under Coding by Thierry Koblentz
This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.
Let’s start our journey by looking at the online tools such as Responsive Design Testing, Responsive.is, Responsinator and BriCSS. These pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss even goes one step further and allows you to “customize” viewports by setting any dimensions you want.
Continue Reading "Device-Agnostic Approach To Responsive Web Design"
March 22, 2012 at 3:05 pm Comments (0)
Filed under Coding by Erskine Design
This article is the fifth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts and the fourth shared with us a free plugin called GuideGuide. Today, we are happy to present Erskine’s responsive grid generator: Gridpak.
In the near 18 months since A List Apart published Ethan Marcotte’s article Responsive Web Design much has changed in the way we approach our design process. The new responsive attitude described in the article embraces device agnostic design, flexibility and the undefined canvas. Whilst John Allsopp’s A Dao of Web Design laid the foundations for change, Ethan’s article—alongside a maturation in technologies and a coinciding mass movement towards mobile browsing—really set the scene for a new design ethos.
Continue Reading "Gridpak: The Responsive Grid Generator"
March 19, 2012 at 3:12 pm Comments (0)
Filed under Coding, CSS, css3, Design, interface, layouts, media queries, responsive, techniques, Tips, Tutorial, Tutorials, Web Design by Chris Spooner
If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure. If you cast your mind back [...]
Continue Reading "Create a Responsive Web Design with Media Queries"
March 12, 2012 at 8:00 am Comments (0)
Filed under Coding by Zack Grossbart
When my WordPress plugin had only three users, it didn’t matter much if I broke it. By the time I reached 100,000 downloads, every new update made my palms sweat.
My first goal for the WordPress Editorial Calendar was to make it do anything useful. I was new to JavaScript and PHP and didn’t really know what I could pull off. In a few days I had a proof of concept. In a few more I had a working version and was asking friends to install it. The calendar worked… sort of.
Continue Reading "Writing Unit Tests For WordPress Plugins"
March 7, 2012 at 3:02 pm Comments (0)
Filed under Coding by Zack Grossbart
When my WordPress plugin had only three users, it didn’t matter much if I broke it. By the time I reached 100,000 downloads, every new update made my palms sweat.
My first goal for the WordPress Editorial Calendar was to make it do anything useful. I was new to JavaScript and PHP and didn’t really know what I could pull off. In a few days I had a proof of concept. In a few more I had a working version and was asking friends to install it. The calendar worked… sort of.
Continue Reading "Writing Unit Tests For WordPress Plugins"
March 7, 2012 at 3:02 pm Comments (0)
Filed under Coding by Zack Grossbart
Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. A couple of others are up and coming, and you can always use Flash, but these three work well with HTML5 and have the widest support among browser vendors.
Choosing the right framework will determine the success of your project. This article covers the advantages and disadvantages of each, and the information you need to make the best choice.
Continue Reading "Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael"
February 22, 2012 at 11:49 am Comments (0)
Filed under Articles, Coding, Design, guides, links, Resources, roundup, theme, Tutorial, Tutorials, Web Design, Wordpress by Chris Spooner
WordPress is one of the most popular applications in the web design community not only for its ease of use as a blogging platform, but for its versatility in any kind of content managed website. Building custom themes for WordPress is pretty straight forward, making it one of the easiest templating systems to master. This [...]
Continue Reading "15 Tutorials To Help You Build WordPress Themes"
February 20, 2012 at 8:00 am Comments (0)
Filed under Coding by Jeremy Hixon
Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming.
But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.
Continue Reading "Progressive And Responsive Navigation"
February 13, 2012 at 11:53 am Comments (0)
« Older Posts
