On Web Typography

web-type

web-type

Web typography has always been something i felt i need to learn much more about and i would list it as one of my weaknesses – Not good considering that typography is pretty much the most important element in web design. This is why I am especially pleased that my favorite publishers in the web industry are publishing a new book by Jason Santa Maria all about Web typography.

Achieving a thorough grasp of typography can take a lifetime, but moving beyond the basics is within your reach right now. In this book, we’ll learn how to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.

Have a look

Web Design work of 2012

feat

This has got to be the most perfect website i have noticed this year, designed and developed with impecable detail. The presentation layer is looking very polished with the SVG icons and subtle fades but where this really shines is in the design and development layers.

Take a look and re-size the browser to see all the work they have put in. If your a designer or developer i’m sure you’ll notice all those details and im also sure you’ll know of this company and it’s probably a bit cliché to write about it here, but in my opinion it’s the most perfect website i’ve seen this year. Have a look here me ducks.

Vogue launches new responsive website

vogue

vogue

The new site, at www.vogue.co.uk has recently been re-designed. It looks like they have taken a fairly modern approach to this by putting the content first and making sure it embraces responsive web design techniques, both of which seem to work well and keeping the deign fluid between breakpoints works well with the images and text scaling down. Overall i think the Web Designers at Conde Nast have done a great job with embracing responsive web design and the data first approach into a well know publication such as Vogue.

It has been designed by Vogue publisher Condé Nast’s in-house digital team, working with Vogue’s art department. The site took eight months to redevelop.

Condé Nast says the site has also been built to make use of images and Vogue’s archive of content, with the new ‘topic sections’ acting as a searchable showcase of Vogue’s articles, covers and image galleries.

A left-hand browser bar displays current stories, while the site allows for use of a mix of images of different sizes, including catwalk images which can be zoomed in.

Alexandra Shulman, editor of British Vogue, says, ‘The redesigned site offers the Vogue.co.uk user an experience which is closer to that of the print magazine while continuing to capitalise on the timeliness, newsworthiness and excitement of the web.’

Dolly Jones, editor of Vogue.co.uk, says, ‘For nearly 17 years, Vogue.co.uk has been at the forefront of fashion online, and this reimaging is the culmination of all we’ve learnt to date, simultaneously taking advantage of the most sophisticated and innovative technologies available.

‘The visual appeal the site delivers as a result of its expansive and engaging images is immediate.’

Have a look at the new Vogue site here.

vogue

Boutique magento shop with Lightspeed

ls

I recently finished a Magento site for a furniture designer who has recently opened a new studio in Shoreditch. Now, this geezer has designed for the likes of Moroso, Swarovski, Kvadrat and Artecnica, as well as on-offs and exclusive exhibition pieces, so attention to detail and high quality develeopment was at the top of the agenda.

After getting the Magento shop developed i also worked with their Lighspeed Retail system (which they use in their shop) to sync with Magento. The Lighspeed system is a great piece of software to use on iPhones and iPads in the studio to process customers transactions but also their API works pretty well. At the end of the process they had one place to update products (including images, invetory, etc) to controll both their POS system and Magento.

Responsive Magento design & development

I’ve been working on a responsive Magento theme for donkeys years now, never finding the time to put the hard work in and get it done properly. It’s no surprise it’s a big job on the front-end with all the Templates to think about as well as the account pages, extensions and checkout.

After designing 5 or so mobile Magento themes, I’m not far off now from a fully responsive Magento design embracing the latest tried and tested methods (it’s build on Andy Clark’s 320 and up). Everything has been built from the ground up using a Mobile first approach – I plan to keep posting updates….

andy

Coda 2 Launches on May 24th

giant_leaf

The developers over at panic have finally announced the release of Coda 2. Many people who work as web developers/designers rely on Coda for their workflow (including me for the past 4 years) and many have got bored of waiting for Coda2 and moved onto other editors – now Panic are going to win them back. See below for a few features that i like the sound of.

  • Code folding – woo!
  • Built-in MySQL editor
  • Portable – Share clips and sites across macs
  • Air Preview (use your iPad as a dedicated live preview while coding)

Check out the preview video here for more information…

Nominated for the CSS Design Awards

aaaaa

helloEverything Ltd has been chosen as a nominee for the CSS design awards. CSSDA is a collection of most beautiful and inspiring web sites around the world. You can cast your vote for me – it will be taken into consideration by the Jury when it comes to choosing the winner.

After all the work I have done to get this new website up and running and given the fact it still has a lot of work to be done is pretty nice to get some attention from the design community.

If you wanna help me win this award, all you have to do is to go to cssdesignawards.com hover the image and vote for helloEverything!

Changing landscape of Front-end Web Development

doooo

The Changing landscape of Front-end Development (hello Responsive design!)

It’s easy to see why people are getting excited about the way things are changing with the emergence of “Responsive Web Design”. On the off-chance that your interested in such things carry on reading.

There has been a fundamental shift in the way we all think about designing for the web, fluid layouts have been around for donkeys i have done a few sites myself, but now we have properly flexible websites that are properly interactive.

With the explosion of different devices (phones, tablets, etc) out there that we as web designers/developers are called to support these properly flexible ways of designing are much needed and are being embraced by the web community.

This article is regarded as one of the most important in the increasing popularity of responsive web designs.

From one year to the next web design trends come and go, but I’m pretty sure the concept of responsive design is here to stay, in fact i think we’ll all stop talking about it – not because it will go away, but because it will be the standard way in which a modern website is built. I don’t think this will happen in 2012. It’s still too new of a concept, and there are many web designers that are not familiar with it at all.

HTML5 and CSS3 for Web Designers by A Book Apart

thum

After I finished reading both HTML5 and CSS3 for Web Designers by A Book Apart I couldn’t help but write a short article on how much i enjoyed reading both books. Easy to read, practical and inspiring to read the views of industry peers who care passionately about the future of the Web and would like to see it remain as accessible and open as possible. I certainly will be using a large variety of HTML5 and CSS3 in my work for clients ensuring it’s used in a progressive way. For anyone out there who is not quite sure what HTML5 and CSS3 are, here is a short overview.

HTML5
HTML 5 is the next major version of HTML. It introduces a whole bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more.

CSS3
CSS 3 builds upon the principles about styles, selectors and the cascade that we know so well from earlier versions of CSS. It adds loads of new features, including new selectors, pseudo-classes and properties. Using these new features it becomes a lot easier to set up your layout.

CSS3 Media Queries – iPhone + other mobile devices

It’s a well know fact that people are now browsing websites using their mobile phone, they have access to the internet 24/7. So, the need to have a website looking and functioning on the iPhone or other mobile devices is becoming a necessity. A very simple solution to cater for a smaller screen size is to use CSS3 media queries to target some specific CSS or even a different style sheet altogether.

A simple piece of css3 code to target small screen sizes;

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {CSS Specific code goes here!}

Common and simple solutions to making a site look good on a smaller screen, can be something as simple as changing from a two column layout to one column, adding a smaller background image or removing certain sections of a website.

« Older Entries