Web Design

Why Your Next Website Makeover Should Incorporate Responsive Design

Internet News, Web Design 407 Responses »

Feb 112013

Attention marketing directors, creative directors and everyone else who cares about how well tuned their website is for mobile devices. Uh, that’s everyone, right?

Is your current website properly designed to render perfectly on all mobile devices? If our casual surfing observations are any indication, the answer is a resounding no.

If you haven’t already, you should seriously be considering how to revamp your digital marketing strategy to cope with the mobile takeover. Make no mistake about it, the mobile revolution isn’t coming. It’s already arrived.

Creating a web strategy to deal with the rise of mobile devices boils down to three primary options: Developing a native app, designing a separate mobile site, or recalibrating your primary website with responsive design.

MORE: Why Your Next Website Makeover Should Incorporate Responsive Design.

Make your sites load faster | Tutorial

Tech News, Web Design 384 Responses »

Feb 072013

One of the first things to look at is the size of your HTML code. This is probably one of the most overlooked areas, perhaps because people assume it’s no longer so relevant with modern broadband connections. Some content management systems are fairly liberal with the amount they churn out – one reason why it can be better to handcraft your own sites.

As a guideline you should easily be able to fit most pages in <50KB of HTML code, and if you’re under 20KB then you’re doing very well. There are obviously exceptions, but this is a fairly good rule of thumb.

It’s also important to bear in mind that people are browsing full websites more frequently on mobile devices now. Speed differences between sites viewed from a mobile are often more noticeable, owing to them having slower transfer rates than wired connections. Two competing websites with a 100KB size difference per page can mean more than one second load time difference on some slow mobile networks – well into the ‘interrupted thought flow’ region specified by Jakob Nielsen. The trimmer, faster website is going to be a lot less frustrating to browse, giving a distinct competitive edge over fatter websites and going a long way towards encouraging repeat visits.

MORE: Make your sites load faster | Tutorial | .net magazine.

The best image compression tools

Tech News, Web Design 353 Responses »

Feb 042013

You’ve probably already made sure to choose the appropriate format for each image as well as keeping its size (in pixels) to a minimum. Maybe you’ve reduced the JPEG quality setting as much as you can. (Although if you’re not quite confident in your knowledge of the fundamentals then the Designer’s Guide to Image Compression may help.)

The unfortunate reality is that, no matter how carefully you design your images, the graphics tool you’re using will not save the finished files in the most efficient way. And so passing those images through a compression tool can reduce their size considerably.

Exactly how much you can save is tricky to say for sure as it depends very much on your source graphics. Some JPGs may only drop by 50-100 bytes. It’s not unusual for regular web graphics to be compressed by 10-40%, though, with no loss of image quality (and lossy compression techniques, perhaps reducing colours or reencoding JPEGs can cut file sizes even more).

Which programs are the best, then? Good question. To help provide an answer we’ve pitched 18 of the top contenders against each other.

MORE: The best image compression tools

Getting CSS animations to trigger at the right time

interface, Web Design 413 Responses »

Jan 172013

Karl Schellenberg demonstrates how to stagger full-site animations with CSS3 and JavaScript through page scrolling

When we redeveloped our new website, we decided to use CSS3 animations to provide an impressive and interactive site experience. However, we struggled to time the animations to trigger at the right time.

Because animated elements “below the fold” (depending on the screen resolution) animate on page load, some animations had already played before the user had chance to scroll to them.

To prevent this, we delay the animations until the user can see them. The animations trigger as the user scrolls down and the elements come into view, which creates a staggered effect. To do this we used specific classes for CSS3 Transitions and some JavaScript to trigger the correct elements during scrolling.

MORE: Getting CSS animations to trigger at the right time

Responsive design for dummies

interface, Web Design 415 Responses »

Jan 162013

The concept, in a nutshell, is that websites can be written to adapt to multiple screen sizes. Instead of writing different presentation layers to suit a desktop browser or a tablet or a smartphone, presentations can be created to respond to the screen they are presented on.

This notion seems pretty straightforward, and in some ways content has been adapting to platforms for a few years. But this approach is revolutionary in how it abstracts form from function and the flexibility it provides designers as well as business owners.

Here are the basics that marketers need to know about responsive design, along with the pros and cons of facets of the concept.

What is responsive design?

We are designers for things we can’t predict. It seems like every month there is a new device — with a new screen size — coming to market, and users want to consume their content on it. One way to address this approach is writing code that adapts content to the page that it’s on.

This approach, called “responsive design,” was coined by Ethan Marcotte to describe code that uses fluid design grids and lays pages out depending on the media, or device type, requesting the information. By using a combination of HTML, CSS, and JavaScript, the system can adapt the look and feel of its content to work in a number of different places. For example, open up Sony.com. Resize the browser window, and see how (and whether) the screen redraws itself. There are three breakpoints in the design where the browsers redraws the content to fit into different screen resolutions.

MORE: Responsive design for dummies

Simplify Responsive Design by Embracing the Flexible Nature of the Web

Web Design 395 Responses »

Jan 102013

There’s nothing “wrong” with using pixels in an otherwise responsive layout, but if you do you’ll likely end up writing more code than you would using flexible units.

Jon Allsopp’s A Dao of Web Design predates responsive design by a decade, but its prescient advice remains perhaps the best way to approach any design, responsive or otherwise: “It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

More than just embracing the nature of the medium, building your sites atop what developer Trent Walton calls “Flexible Foundations” can go a long way to making development easier. As Walton points out in his post, using pixels often means more code since pixel-based type, margins and padding mean you need to add new values at every responsive breakpoint.

“In many ways,” writes Walton, “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

MORE: Simplify Responsive Design by Embracing the Flexible Nature of the Web

For Most, Supporting Older Versions of IE Remains a Necessity

Internet News, Web Design 251 Responses »

Jan 092013

Nothing gets a web developer’s hackles up quite like older versions of Internet Explorer. The web browser we all love to hate still manages to hang around after all these years — in the case of IE 6, the persistence is strong enough that even Microsoft has a website dedicated to getting rid of it.

While almost no one likes older versions of IE, most of us still need to support it to varying degrees. Mobile web expert Peter-Paul Koch recently ended an informal survey of web developers asking them which versions of IE they supported, tested in and whether or not they charged extra to support older versions of IE.

The results — from nearly 18,000 replies (1,150 for the least answered question) — are surprising in several ways, like the fact that 2 percent of web developers surveyed still support IE 5.5.

MORE: For Most, Supporting Older Versions of IE Remains a Necessity

5 Tips for Responsive Builds

Web Design 212 Responses »

Jan 092013

If design and content strategy stops when the build phase starts it’s time to rethink your process. The role of a modern front-end developer goes beyond following pre-defined blueprints. An iterative, agile-like approach is vital to account for responsive design challenges that inevitably arise as a website takes shape.

With that in mind here are my 5 tips for responsive builds:

1. Utilise breakpoint zero

Start by writing HTML in a semantic and hierarchical order. This is dictated by content priority, and a bit of common sense.

MORE: 5 Tips for Responsive Builds – David Bushell – Web Design & Front-end Development.

Is Java Losing Its Mojo?

Tech News, Web Design 350 Responses »

Jan 082013

Java is on the wane, at least according to one outfit that keeps on eye on the ever-changing world of computer programming languages.

For more than a decade, it has dominated the Tiobe Programming Community Index — a snapshot of software developer enthusiasm that looks at things like internet search results to measure how much buzz different languages have. But lately, Java has been slipping. In fact, it’s been overtaken by the C programming language — a 40-year-old dinosaur that’s still popular with Unix developers and people who develop software for simple embedded systems like DVD players or alarm monitors.

“C is not number one because it is rising, but it is because Java is falling down,” says Paul Jansen, managing director with Tiobe Software, writing in an e-mail interview. Jansen’s company compiles the programming index.

According to Jansen, Java — once the hottest of the programming languages — took a serious detour when Oracle bought it, along with its creator-company, Sun Microsystems, three years ago.

MORE: Is Java Losing Its Mojo? | Wired Enterprise | Wired.com.

20 top web design and development trends for 2013

Internet News, Web Design 299 Responses »

Jan 072013

Predicting the future is tough, but with the fast-moving nature of the web, it’s good to know what lies ahead. Craig Grannell talks to top industry figures about the web design and development trends you should be mindful of over the coming 12 months

In our 15 top web design and development trends for 2012 we suggested 2012 would be a year of ongoing economic hardship and attempted internet censorship, and guessed web design and development would also be turbulent. Such predictions proved accurate, with the web industry battling censorship, native apps, and fragmented, rapidly evolving technology.

2013 won’t be any quieter. Our industry figures predict a year of design shifts, evolving device usage, and web consumption adjustments, all of which will impact on designers and developers. However, there’s also potential for an exciting year as RWD utterly takes hold, standards evolution brings more scope for layout and type, and tools wrench themselves free of print.

All these things and more are explored in our 20 must-know web design and development trends for 2013…

MORE: 20 top web design and development trends for 2013

Older Entries Newer Entries