Page 1 of 14012345...102030...Last »

The BBC’s Programmes website

by daan on June 4, 2014

in Uncategorized

source: smashingmagazine.com

Responsive Design Begins With The URL

The BBC’s Programmes website is huge, and is intended to be a rolling archive of everything that the BBC broadcasts on television and radio. Originally released in 2007, it now has pages for over 1.6 million episodes, but that’s barely half of the story. Surrounding those episodes is a wealth of content, including clips, galleries, episode guides, character profiles and much more, plus Programme’s newly responsive home pages.

The new responsive home pages, known as “brand” pages, join the schedule and A–Z lists in a broader responsive rebuild. 39% of users (and growing) now use mobile and tablet devices to visit these pages; so, making the pages responsive was the best way to serve a great experience to everybody while keeping the website maintainable.

This article is a case study of the responsive rebuild of the BBC’s Programmes pages, and it actually begins back in 2007, at the conception of the project.

URLs

The core principle in creating a potentially enormous website that will last forever is to get the information architecture right in the first place. This involves knowing your data objects and how they fit together. It should also determine the URL structure, which for Programmes is the most important aspect. Take the URL for Top Gear’s home page:



http://www.bbc.co.uk/programmes/b006mj59

After the domain name comes the word “programmes,” which is a simple, unchanging English word. It is intended to describe the object, and is not a brand or product name. Plurals are used so that the URL can be hacked backwards to retrieve an index.

Next is the programme identifier. Note the lack of hierarchy and the lack of a title. Titles change over time, and many programmes do not have a unique title, which would cause a clash. Hierarchies also change — a one-off pilot could be commissioned for a full series. Understanding your objects allows you to recognize what is permanent. In this case, nothing is particularly guaranteed to be permanent, so a simple ID is used instead. Users aren’t expected to type these URLs, though. They will usually arrive through a search engine or by typing in a friendly redirect that has been read out on air, such as bbc.co.uk/topgear. But the key principle of a permanent URL is that inward links are trusted to be shareable and work forever.Cool URIs don’t change.

A clear information architecture defines the URL scheme. A piece of content is given a clear canonical home, where appropriate. Links and aggregations between them then clearly appear.

01 url scheme 500 The BBC’s Programmes website
A clear information architecture defines the URL scheme. (Large preview)

  [click to continue…]

bulk resize media 15 Effective Image Optimization Plugins for WordPress

No doubt WordPress is one of the most popular and best CMS (content management system) for developers, designers and bloggers. WordPress developers create myriad of WordPress plugins to empower WordPress platform, such plugins are useful for integrating numerous features to your website such as chat, social media, speed optimizing, image optimization and many more.

In this article, I have gathered 15 Useful and Effective WordPress pluginsto optimize images performance. Following plugins are capable of optimizing and resizing your images without losing its image quality. These WordPress Image Optimization Plugins would not only optimize your images but also speed up and enhance the overall beauty of your websites. I hope you will find the list handy and useful for your WordPress blog.

1. PB Responsive Images

pb responsive 15 Effective Image Optimization Plugins for WordPress
The PB Responsive Images plugin automatically reformats all images in the post content into a format similar to the picture tag proposed by the Responsive Images Community Group on w3.org.
 
Download

[click to continue…]

Source: WDL

As a web designer or developer, it’s nearly impossible to remember multiple programming languages, frameworks, and keyboard shortcuts to various applications. This is where cheat sheets can be a life saver. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. So to make your life easier, we’ve rounded up a selection of cheat sheets that you will surely find useful.

The Web Developer’s SEO Cheat Sheet 2.0

cheatsheet01 8 Must have Cheat Sheets for Web Designers and Developers

cheatsheet01a 8 Must have Cheat Sheets for Web Designers and Developers

Bootstrap Cheat Sheet

cheatsheet05 8 Must have Cheat Sheets for Web Designers and Developers

[click to continue…]

8 Fresh Free Fonts for your Designs

by daan on October 6, 2013

in Design, Typography

Braxton

ffonts01 8 Fresh Free Fonts for your Designs

ffonts01a 8 Fresh Free Fonts for your Designs

ATF Lorem

ffonts02 8 Fresh Free Fonts for your Designs

ffonts02a 8 Fresh Free Fonts for your Designs

[click to continue…]

Dense Regular

freefonts01 8 Fresh High Quality Free Fonts
freefonts01a 8 Fresh High Quality Free Fonts

PHANTOM

freefonts02 8 Fresh High Quality Free Fonts

[click to continue…]

Source from: smashingmagazine

Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.

However, some steps can be repeated for every project. These are steps we know and should make as quick as possible in order to have more freedom to experiment with new solutions.

This article presents a collection of toolstips and tricks that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project.

Ready? Here we go!

Tips And Tricks

DESIGN WORKFLOW

My Secret for Color Schemes
Erica Schoonmaker shares her trick for matching up colors and creating a nice color scheme. Read more…

colors mini Powerful Workflow Tips, Tools And Tricks For Web Designers

Useful Aligning and Spacing
Kris Jolls creates squares for the various spaces he has between elements. This cuts down time and makes sure everything is aligned and spaced properly. Read more…

space squares mini Powerful Workflow Tips, Tools And Tricks For Web Designers

The Ultimate Photoshop Web Design Workspace
Jacob Cass shares his set-up for the ultimate Web design workspace in Photoshop. Read more…

ultimate ps workspace mini Powerful Workflow Tips, Tools And Tricks For Web Designers

[click to continue…]

100 top tools for graphic designers 100 Top Tools for Graphic Designers

While the Adobe Creative Suite of tools is pretty much the industry standard software for graphic designers, there are plenty of other tools available online, as web apps, mobile apps, or even desktop software, to meet the specific needs of artists and designers working in any niche. Typography is one of the most useful design elements on the web, and there many font builders, font compares, and font identification programs for designers seeking the perfect look and feel for the type on their online or printed product. Color comparison, stock imagery, textures, and Photoshop brushes are all assets that visual creatives use regularly, and there are many available online for cheap or free. One of the best parts about the online community of graphic designers is how willing they are to provide feedback and even build free tools for other designers to use.

The sites listed here aren’t ranked in order of quality, they are all amazing! They’re categorized and numbered for ease of use. Happy designing!

source: http://graphicdesignclasses.net/design-tools/

Graphic Design

Some of the most powerful tools at a graphic designer’s disposal are also the most basic. From stylistically matched icon sets to small code library to make it easier to design data-driven documents, even the smallest tools can make a job a thousand times easier. On the other end of the spectrum are the widely used, taken-for-granted, must have programs like PhotoShop, without which many designers would be out of a job.

  1. Adobe Creative Suite

    Adobe Creative Suite 100 Top Tools for Graphic Designers

    Adobe Creative Suite is one of the highest-regarded programs for designers, producers, and photographers. Adobe Creative Suite is an entire portfolio of programs, ranging from Photoshop and Dreamweaver to After Effects and Encore.

    Explore: FAQ

  2. Dribble

    dribbbble 100 Top Tools for Graphic Designers

    Dribbbble is an online community where artists and designers of all stripes can get constructive feedback from other.

    Explore: Current Exhibition

  3. Forrst

    Forrst 100 Top Tools for Graphic Designers

    Forrst is a community of developers and designed who upload their designs for feedback to make improvements.

    Explore: Discover

  4. deviantART

    DeviantArt 100 Top Tools for Graphic Designers

    One of the largest online art communities, deviantART has over 200 million artist-uploaded pieces including fan art, skins, and other unique drawings and photos. Users can save, share, and shop for art as well as support other local and aspiring artists.

    Explore: Film and Animation

[click to continue…]

40 Excellent Free Fonts For Minimal Web Design Creation

Minimal web design has become a big trend in 2010. You won’t find large pictures or glossy buttons in minimal designs, but fonts are some of those rare accents they can have. Carefully chosen fonts can really enhance your design. Usually minimal web designs tend to have clean, light fonts, but not always it’s the best solution. You can, instead, pick a nice bold font to give your design a niche. That’s not true that you have to pay for the good-looking fonts.

There are plenty of free, great looking fonts around the web. In this article you’re going to find 40 clean, crisp and, of course, free fonts for your minimal web design.

1. Raleway

raleway free fonts minimal web design 40 Excellent Free Fonts For Minimal Web Design Creation

2. Extravaganzza

extravaganzza free fonts minimal web design 40 Excellent Free Fonts For Minimal Web Design Creation

3. Caviar Dreams

caviar dreams free fonts minimal web design 40 Excellent Free Fonts For Minimal Web Design Creation

[click to continue…]

Page 1 of 14012345...102030...Last »