Today the design of the upcoming release of WordPress 2.7 was released, and I really like it.
Mad props to Matt Thomas and Andy Peatling for their visual talents. You can expect these designs to be extended to the rest of the 2.7 screens and implemented over the coming weeks.
The new navigation seems like it is going to reduce number of clicks dramatically.
Not a big update.
John Resig is writing a new selector engine, sizzle, interesting
I wonder when John have the time to write code, write books, write documentation, write for his blog AND work for Mozilla. He is one productive client side coding entrepreneur. Sizzle is Work In Progress, but John claims it is 4 times faster than the jQuery Selector Engine.
YUI has a new Interaction Pattern in their library
I do not know how many times I have been part of discussions about how to implement a sign in procedure the best way. This new pattern from YUI tries to describe the characteristics of the problem. I really like Yahoo’s initiative with YUI trying to help designers and likes from revinventing the wheel time after time.
Parallax scrolling made easy with JavaScript
10 years ago something, we believed DHTML and JavaScript where the solution to everything, and there are solutions I am proud of from that time, and solutions I wouldnt mention even under torture. These days all client side stuff is focused on availability, usability and other non-relevant bilities ;-). Where is all the cool stuff? jParallax is cool, and from a first point of view, somewhat useless, but hey, keep em coming.
I hate CSS. No I like separation of content, design and behaviour. But lets be honest, CSS is repetetive and often you find yourself chasing browser bugs hitting CTRL+S, ALT-TAB, CTRL-R, ALT-TAB …. That is why I believe we must minimize the rows of CSS we are actually writing, just as we try to do that with JavaScript using libraries such as jQuery, Prototype or Mootools. Blueprint CSS is interesting, I am thinking of implementing it into my mindset as the default CSS-library together with jQuery for JavaScript and Smarty for templating.
YAML (Yet Another Multicolumn Layout)
This one looks interesting as well, but the only reason I list this is because the name is the same as the configuration language YAML I will talk about below.
YAML (YAML Ain’t Markup Language)
Before I have used XML for configuration, moving more and more over to JSON, because of the benefits parsing and using it. But YAML is what I have started using for some types of configuration, because of its easiness to read, write and share. Look into it. I love it for configuring navigations.
In this article I will try to dissect how we use CSS in order to design our webs and try to find a model that will make it easier for us to use and create CSS Frameworks that fits all the different problem domains we are facing when designing our websites. The Anatomy of Web Design is essential knowledge in order to create CSS Frameworks that are actually solving the problems we do not want to repeatedly solve over and over again when building websites.
Today no one would even think of writing their own JavaScript library from scratch and use on a site where the audience is diversed, making QA difficult. Libraries such as jQuery and Prototype solves most of the problems that occur on a public website, you only have to write snippets of code for smaller parts that are business specific, if you are writing large chunks of code for your business specific needs you are either solving problems at the wrong level or not thinking in terms of components/plugins. But when it comes to web design and CSS the wheel gets reinvented on each and every site you visit. I bet there are two main reasons for this:
- Design is difficult to quantify and generalize
- Designers do not think as programmers, who always quantify and generalize because they are lazy by nature.
But there are some projects, who have identified the css reinventing the wheel problem, both of them focus on giving designers and developers a generic set of CSS that solves problems that occur, independent from website. The two biggest, and most promising projects are:
They have a lot in common, both focus on first adding a reset CSS to the document and then use a grid for creating all types of design grids you could ever dream up. Blueprint has a module for forms, print and typography, while YUI has modules for fonts and a base css that tries to make a cross-browser-stylesheet from the reset document. YUI offers themes for different widgets/components. No project I have found focus on solving the biggest problem: Specific CSS for specific needs.
As you can see, we have a lot of different keywords (in bold) already, and we could start to quantify and generalize how we look at CSS.
Generalising design is what CSS is all about. CSS is about finding property values that can be altered and combined in order to achieve the desired result in design. We may say that CSS in it self is the first level of abstraction when it comes to design. For a couple of years we have been focused on creating intriguing designs with our bare hands with CSS as our only (mental) tool.
Pretty soon people working with CSS found out that we had to take the abstraction one level higher, separating types of design into different parts of the design, making the stylesheets easier to edit, more modular and easier to redesign. A typical step is to split the applied styles into different parts, such as grid, typography and design. On top of that we possibly added specific styles for specific parts of the website. By making this separation, we made it easier to change and maintain the design of our websites. If we look at the biggest websites today (with a designed frontend) a lot of them uses this separation of design to different degree.
Still we are solving design problems over and over again in these styles. And the next problem is to identify generic components and grids without forcing a specific look and feel onto the user of the framework. YUI and Blueprint takes a couple of steps in this direction. What I would like to see from both YUI and Blueprint is components that are “wireframed” in their look and feel, this in combination with a well defined documentation on how to add look and feel to these components with specific themes/templates would solve a lot of the design problems some people are facing today. After all, when we dissect a page in interface components, we will realize that 75-90% of our look and feel is well defined patterns or components used elsewhere and if we have wireframed solutions for this, we will see better websites with less rendering errors because designers can focus on what they think is fun, designing, and web developers can focus on learning JavaScript, not play Russian CSS-roulette.
I am in the middle of a big redesign, re-gridding of one of the websites I am responsible for the frontend on, and I believe that we have to start using solutions like this for three main reasons:
1. Maintainability. If we use well defined components with a good documentation, it will be easier for people working with maintenance of the website, to create components, pages, flows that we know for sure will fit the graphic profile and will work in all browsers.
2. Quality. By minimizing the number of rows of new code on all levels we will create a better product. By using already tested and verified code, we will of course create the foundation for a better product.
3. Focus. Designers can focus on design, developers on development and people who have written CSS in the past, can start build UI Components in [INSERT_YOUR_PREFERRED_LANGUAGE_HERE] and make sure developers are distanced from the look and feel by creating a good API for creating these design components. But that is another article.
Wordpress has released sneak peaks of the new version of Wordpress. The user interface have had a welcome face lift and the navigation has been adressed.
Jeffrey Zeldman has been involved in the redesigning/rebranding/restructuring of the applications front.
One thing I like from the preview is the new UI for categories where they have added an “Most Used” tab making it easier to check the categories more often used in posts.
I am in the middle of redesigning/designing/coding 3 websites, 2 new and one old. I need to work on the graphical profile on all of these websites. If you are interested in creating the graphical profile for 3 webs and can give an estimate on what the cost would be for the work to be done, please contact me. The sites could be categorized as follow:
Leave a comment and I will contact you via mail if you are interested and could give an estimate on the cost and links to previous work.
Front-End Book is run and primarily written by Mattias Hising, an experienced Lead Developer from Uppsala, Sweden. I try to focus my efforts on Front-End related issues, as I find the problems to solve are more complex and interesting than the ones in traditional back-end development.
Twitter | GitHub | FriendFeed | LinkedIn | StumbleUpon | Facebook | Delicious
