Smashing Book: Content of the book

7
Aug/09
0

The Smashing Book won’t be published until late September, you can secure your copy today – 20% off the regular price. If you pre-order now, you’ll pay just $23.90 USD. And, of course you will be among the first to get The Smashing Book fresh off the press.



The book cover of the upcoming Smashing Book




The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.



Content of the book

The Smashing Book contains the following chapters:



The Art And Science Of CSS Layouts

The Art And Science Of CSS Layouts

In modern Web design, developing a layout is a craft that requires patience, precision and solid knowledge of CSS. While design elements create flow and hierarchy in the design, Web layouts build up a skeleton of the website, providing a space and structure where design elements can breathe and serve their purpose. However, laying out a page is often a tricky and time-consuming matter that can be undermined by numerous browser inconsistencies and trade-offs between various types of layouts.

There are some practical guidelines to help you approach this issue in a manageable and effective way. This article throws light on various kinds of layouts, discussing their advantages and disadvantages and suggesting situations in which each would work best. It also talks about techniques and related issues that will help you gain a better understanding of CSS layouts in general.


021

User Interface Design In Modern Applications

User interface design isn’t just about buttons and menus. It’s about the interaction between the user and the application or device, and in many cases about the interaction between multiple users through that device. This means that user interface design isn’t about how a product looks, but about how it works. It’s not just about arranging buttons and picking colors, but about choosing the right tools for the job. Does a particular interface even need buttons? If so, what do they need to do? What do you need to provide for the user to figure out how your application works and accomplish what they want with ease?


021

Web Typography: Rules, Guidelines And Common Mistakes

Typography covers a wide range of topics and applications, even wider now with the Web and the digitization of information. Typography is not just about choosing a nice font. It is a complex meta language that brings value to communication, that increases the readability and legibility of content, giving tone to a brand and corporate image, helping to sell products and making information better understood by the audience. However, the poor application of a few common rules of typography is enough to make readers turn away.


021

Usability Principles For Modern Websites

We don’t know a single Web designer who wouldn’t want an outsider’s opinion of their website. Bonus points if you find a designer willing to give you feedback. Keep in mind, though, that a designer’s opinion isn’t your user’s opinion. To identify with our users, we must focus on much more than the outward appearance of our websites, as difficult as that is to do. To complicate matters, modern websites quickly become huge multi-faceted structures. Competing websites often offer similar functionality, but one will win out because it provides a superior user experience. This is where the Web is headed, a sort of evolution of website design.


021

The Guide to Fantastic Color Usage In Web Design and Usability

Considering the cultural implications of the colors on your website is important, especially if you expect international traffic. Green, for instance, a popular color, is taken in Western society to mean environmental consciousness. In China, a green hat could imply that a man’s wife is cheating on him. The color is sacred in the Islamic world, and it has significance in Catholicism. In some African countries, green represents the natural richness of Africa. It has also been associated with money, jealousy, growth, sickness, inexperience, evil, fertility, hope, youth and death. This is just one example of the cultural and psychological implications that color can have for your website’s audience.


021

Performance Optimization For Websites

Slow and unresponsive websites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you, and you will lose money. Hence, optimizing your website to provide a good user experience is important. Yahoo’s Firefox plug-in YSlow provides tips on how to make websites more responsive. We will not settle for YSlow’s tips alone, though, but take two further steps by optimizing MySQL and PHP as well.

In this chapter, we get technical. You will require root-level access to your server machine. If you are in a shared-hosting environment, you may not have this level of access. But the section will still be useful to you because you can check if your Web host’s machine meets your requirements, and if it does not, you will know what to demand from your host.


021

Design To Sell: Increasing Conversion Rates

Most websites are not works of art or things made to be appreciated solely for their beauty or expression. Websites are functional interfaces that serve a specific purpose. If you run an online store, the purpose of your website is to sell goods. If you run a Web application, your website is there to get people to sign up. Whatever industry you operate in and whatever type of business, organization or community you run, you want your website to perform by getting those sales, sign-ups, subscribers or clicks.

“Conversion” is an online marketing term that describes an instance of a visitor to your website performing an action that you deem to be desirable. The main question is, how do you turn a new visitor to your website into a loyal customer? To answer this, we’ll look at what it takes to sell effectively.


021

How To Turn A Site Into A Remarkable Brand

The term “remarkable” means being worthy of notice or attention or, in the context of Web development, naturally persuading the viewer to mention or recommend a website to a friend. Developing a remarkable brand for your website means that people will likely give credit or refer to your website voluntarily, which is a big bonus when you are starting to build and develop your website.

Any niche or industry has hundreds or thousands of websites all based on the same topic, but from the crowd always emerges a bunch of websites that re-appear time and again. These websites are often mentioned in conversation and cited in sources of information or are the homes of highly sought after products. Given their high profiles, they can all be classified as remarkable, but how did they manage to build this great reputation?


021

Learning From Experts: Interviews And Insights

Many of the most successful and well-recognized designers are willing and eager to provide guidance to others who want to improve their own skills. We posed a series of questions to leading designers and developers in an effort to get some answers to common questions. The participants bring a great deal of diversity in skills and expertise, and all have valuable insight that can help those looking to grow.

This chapter contains ideas, insights and tips from Dan Rubin, Jason Santa Maria, Paul Boag, Jeff Croft, Andy Budd, Collis Ta’eed, Wolfgang Bartelme, Keith Robinson, Jonathan Snook, Elliot Jay Stocks, Khoi Vinh, Veerle Pieters, Chris Coyier, Dave Shea, Darren Hoyt, Henry Jones, Kiam McKay, Nick La, Jon Hicks, Larissa Meek and others.


021

The Smashing Story

How did Smashing Magazine come into existence? How do we work, and what happens behind the scenes? What is our secret recipe for success? Our readers are asking, and Smashing Magazine is answering.

The Smashing Magazine story is not the classic story of two guys coming up with a great idea in the right place at the right time. It is a story of dedication, patience and hard work… truly hard work. Perhaps the most unusual thing about Smashing Magazine’s birth is that we never actually sat down together to discuss the whole thing. We never threw up a whiteboard and brainstormed on a groundbreaking concept for a successful magazine with a solid marketing model. In fact, Smashing Magazine is the result of a random experiment, initiated by two like-minded Web workers with shared passion and knowledge, as well as valuable experience (Sven) and energetic motivation (Vitaly).

Top Blogs To Follow If You’re A Web Developer

31
Jul/09
1

smashing-magazineSmashing Magazine

Smashing Magazine is a weblog dedicated to web-developers and designers.

noupe

Noupe

Noupe passionately delivers stylish and dynamic news for designers and web-developers on all subjects of design.

dzine-blog

Dzine Blog

Dzineblog is a blog that provides design inspirations in graphic design,web design, print design, news, and links to help other to improve their design skills. You will find articles on logo design, web design, banner design, business card design, packaging design, blog design, Css, JavaScript’s, WordPress and more.

webdesignwall

Web Designer Wall

Web Designer Wall is a design blog, designed and maintained by Nick La. Topics focus on web design, tutorials, and modern design trends.

alistapart

A List Apart

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices

webappers

WebAppers

WebAppers collects the best open source resources for web developers. So that, we can spend more time on our web development instead of searching for high quality resources. If you are reading this article, I am sure you did not miss this useful blog.

woorkWoork

Woork is a blog about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics related to web design.

readwriteweb

Read Write Web

ReadWriteWeb is a blog that provides Web Technology news, reviews and analysis. It is now one of the most widely read and respected blogs in the world. It is written by a team of Web enthusiasts.

nettuts

Net Tuts

Nettuts is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

Video – CSS Selectors

16
Jun/09
0





Tagged as: ,

What is AJAX?

15
Jun/09
0

AJAX definitions from around the web.

Webopedia

Short for Asynchronous JavaScript and XML, it is a term that describes a new approach to using a number of existing technologies together, including the following: HTML or XHTML, Cascading Style Sheets, JavaScript, the Document Object Model, XML, XSLT, and the XMLHttpRequest object. When these technologies are combined in the Ajax model, Web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page.

Youtube



Answers.com

(Asynchronous JAvaScript and XML) Using an enhancement in JavaScript that allows Web pages to be more interactive and behave like local applications, which are also known as “rich client” applications. AJAX allows the Web page to retrieve small amounts of data from the server without reloading the entire page. More here>>

Wrox

Ajax is the catchy term coined by Jesse James Garrett in his 2005 article for “Adaptive Path” called “Ajax: A New Approach to Web Applications,” which can still be found at http://adaptivepath.com/publications/essays/archives/000385.php. You should read this article if you haven’t already! Ajax is also an acronym, but for the same reasons, let’s defer explaining just what it stands for right now. Ajax didn’t exist before this article, but the features the article described certainly did.

In short, Ajax is a set of programming techniques or a particular approach to Web programming. These programming techniques involve being able to seamlessly update a Web page or a section of a Web application with input from the server, but without the need for an immediate page refresh. This doesn’t mean that the browser doesn’t make a connection to the Web server. Indeed, the original article paints a slightly incomplete picture in that it fails to mention that server-side technologies are often still needed. It is very likely that your page, or data from which the page is drawn, must still be updated at some point by a rendezvous with the server. What differs in the Ajax model is that the position at which the page is updated is moved. We’ll look at the two models in more detail shortly. More here>>

Tips and Tricks from the Masters of CSS

10
Jun/09
0

css

There are thousands of sites out there offering tips and tricks for using CSS. But how do you know where that information is coming from? Who says the people writing these “tips” know what they’re talking about? For all you know, it could be someone who has not clue what CSS even stands for, let alone how to use it effectively.

But that’s not the case with the experts below. They’re all well-known for their mastery of CSS and all that goes along with it. Read on for their tips and tricks with regards to everything from avoiding hacks to understanding the box model.

Read More>>

Tagged as:

Want to learn CSS? and more CSS…

9
Jun/09
0

Want to learn CSS but don’t know where to start… here are some resources as starter points.

Also included in this article… bonus links for advanced css users.

1. CSS BASICS – 18 Step by Step lessons covering basics.

css-basics

2. W3SchoolsLots of examples and with ‘Try-It-Yourself’ editor do real-time learning.

w3css

3. Holy CSS, Zeldman – Really big listing of CSS and general web design-related links.

hcss_banner2

4. Additional reading for advanced users

Divitis: what it is, and how to cure it

CSS Browser Bugs

Learn CSS Positioning in 10 steps

Compress CSS files

Vertical Centering using CSS

Flexible width CSS based buttons with rounded corners