Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Posts Tagged ‘Techniques’.

We are pleased to present below all posts tagged with ‘Techniques’.

Choosing A Responsive Image Solution

If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.

Choosing A Responsive Image Solution

The basics are fairly simple to learn, but once you’ve mastered them, you’ll find that scaling images is only the beginning — you might also have performance and art direction conundrums to solve.

Read more...

How To Build A Portable Design Toolkit

It’s easy to get overwhelmed by the staggering array of resources and options available to designers. In this article, we’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust.

Building A Portable Design Toolkit

Take a traditional craftsman — let’s say a carpenter. While they may have access to a wide range of tools in their workshop, they will take a bag with just a few carefully chosen tools when working away. Similarly, an artist may have a wide range of paints, brushes and accessories in their studio, but will carefully select a limited palette and a few choice brushes when painting in the field.

Read more...

How To Create A Twitter Widget

Twitter needs no introduction. It has become the way to reach audiences for some people and companies and a place to hang out for others. Placing a Twitter feed on one’s website has almost become compulsory.

How To Create A Twitter Widget

Embedding a feed isn’t all that difficult if you are comfortable with Twitter’s default widget, but making your own will enable you to blend it into your website seamlessly.

Read more...

WordPress Functions To Make Blogging Easier

The WordPress functions.php theme file provides an efficient way of modifying WordPress on a theme by theme basis. This file contains mostly theme related functions but it can also be used to enhance or modify default WordPress behavior. This file is saved inside the themes' folder and a limitless amount of modifications can be added.

WordPress Functions.php overview

In this article I'd like to share a few helpful functions that use WordPress default code to modify or enhance our blog's behavior. By relying on default code we can program changes that will work on all versions of WordPress and in all themes. Any modifications added to the functions.php file will only activate on the current theme, giving us control over changes on a theme by theme basis. As opposed to creating a plugin, using this file for customizations allows us to control which theme does or does not benefit from any changes.

Read more...

Adapting To A Responsive Design (Case Study)

This is the story of what we learned during a redesign for our most demanding client — ourselves! In this article, I will explain, from our own experience of refreshing our agency website, why we abandoned a separate mobile website and will review our process of creating a new responsive design.

Adapting To A Responsive Design (Case Study)

At Cyber-Duck, we have been designing both responsive websites and adaptive mobile websites for several years now. Both options, of course, have their pros and cons.

Read more...

Facing The Challenge: Building A Responsive Web Application

We are talking and reading a lot about responsive Web design (RWD) these days, but very little attention is given to Web applications. Admittedly, RWD still has to be ironed out. But many of us believe it to be a strong concept, and it is here to stay. So, why don’t we extend this topic to HTML5-powered applications?

Facing The Challenge: Building A Responsive Web Application

Because responsive Web applications (RWAs) are both a huge opportunity and a big challenge, I wanted to dive in. Building a RWA is more feasible than you might think. In this article, we will explore ideas and solutions.

Read more...

Tips And Tricks For Testing WordPress Themes

Whether you offer free or premium themes, testing should be a major part of your development process. By planning in advance, you can foster a development environment that deters some bugs by design and that helps you prevent others.

Tips And Tricks For Testing WordPress Themes

The aim of this article is to share some of the tricks I use personally during and after development to achieve a bug-free product. This article is split into three distinct sections Setting up, Development phase and Final testing. This should give you a good overview of what you can do over the course of the development cycle.

Read more...

The State Of Responsive Web Design

Responsive Web design has been around for some years now, and it was a hot topic in 2012. Many well-known people such as Brad Frost and Luke Wroblewski have a lot of experience with it and have helped us make huge improvements in the field. But there’s still a whole lot to do. [Links checked February/09/2017]

The State Of Responsive Web Design

In this article, we will look at what is currently possible, what will be possible in the future using what are not yet standardized properties (such as CSS Level 4 and HTML5 APIS), and what still needs to be improved. This article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.

Read more...

Building The New Financial Times Web App (A Case Study)

When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5.

Building The New Financial Times Web App: A Case Study

Given the product team’s passion for the new UI, we rolled up our sleeves and gave it our best shot. We were tasked with implementing a far more challenging product, without compromising the reliable, performant experience that made the first app so successful.

Read more...

Keeping The Big <picture> Small How To Avoid Duplicate Downloads In Responsive Images

The <picture> element is a new addition to HTML5 that’s being championed by the W3C’s Responsive Images Community Group (RICG). It is intended to provide a declarative, markup-based solution to enable responsive images without the need of JavaScript libraries or complicated server-side detection.

How To Avoid Duplicate Downloads In Responsive Images

The <picture> element supports a number of different types of fallback content, but the current implementation of these fallbacks is problematic. In this article, we’ll explore how the fallbacks work, how they fail and what can be done about it.

Read more...

How To Design For A Maturing Android

Android is huge: 480 million people currently use Android devices, and 1 million new devices are activated daily. This means that every three weeks, the number of people who activate new Android devices is equal to the entire population of Australia. (Recent studies by Nielsen show that more Android devices are on the market than iOS devices.)

Designing For A Maturing Android

Popular apps that become available on Android experience huge growth. For example, Instagram grew by 10 million users with the launch of its Android app — in just 10 days.

Read more...

CSS3 Transitions: Thank God We Have A Specification!

This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed.

Thank God We Have A Specification!

Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.” Whereas Alex wrote about achieving particular effects, I’m going to talk about the technical background, especially the JavaScript-facing side. Pitfalls — this article is all about pitfalls.

Read more...

↑ Back to top