Wednesday, 23 May 2012

To make good websites you need good writing skills. Clear writing is good web design. You also need to know some Hypertext Markup Language (HTML) to define your content (text, images, etc) in a way a web browser can understand, and some Cascading Style Sheets (CSS) to control how this content is presented.

Begin by reading the classic article on web design: A Dao of Web Design.

Then:

On the Web

Any of the following resources (I particularly like Simple & Useful) are good ways forward:

Simple & Useful – A guide to web design
Introduction to Web Design – University course from Penn State, material online
1. Syllabus
2. Resources
Designing for the Web – Graphic design basics as applied to the web

The best place to find articles about good web design online is at A List Part and on Jeremy Keith’s journal. Here’s his summary of web design best practices for 2012.

For actually writing code, the best way to learn is by doing. You can learn by writing code inside the web browser itself on websites such as Rendera, or by using a text editor to write the code to files and opening these locally with your web browser on your computer. Here is a list of good, free text editors:

Textwrangler (Mac)
Geany (Linux)
Notepad++ (Windows)

Also see Sublime Text (Mac/Linux/Windows), not free, but you can try before you buy.

While writing code you will often need to refer to documentation. The best source of web design documentation online is the Mozilla Developer Network (MDN). Include the letters ‘mdn’ in web searches for documentation so you get the good stuff first! For example, searching for html mdn yields MDN’s HTML reference page as the first result.

Books

While a paper book is no longer necessary to learn, it is still, I think, one of the most pleasant. I feel objects that you can touch and smell help you absorb things, but learning is a very personal thing. My friend
Bryan, for example, learns by listening, writing and doing. The following are among the best books for learning about web design:

And here’s a good book about thinking and learning.

Later

If your interest in web design continues, you may want to learn more about type and typography and programming¹. You may want to learn about building dynamic websites with databases and web development frameworks such as Django, which tie all of the above together. And if you find yourself often working with computer files, folders and other people, eventually you will fall in love with Git and Github.

Finally, the most important thing is probably this: Be passionate about something and have something to say about it in your own voice. Then, use web design to help you say it. Web design is not an end in itself — it is a medium to communicate your message, whatever it may be.

Un baccione!
Simon

Discuss this article on Hacker News.

See also Learn Python the Hard Way ↩

     __|__
-------O-------
    o´   `o

Sunday, 22 April 2012

Todo #: Don’t ignore your dreams; don’t work too much; say what you think; cultivate friendships; be happy.

     __|__
-------O-------
    o´   `o

DNA, Deus Ex

Thursday, 19 April 2012

     __|__
-------O-------
    o´   `o

Thursday, 19 April 2012

django-bakery #: Serve a site as flat files with Django. The repository is on Github.

Friday, 13 April 2012

Demonstrate Responsive Designs #

ZeroBin #

Minimalist, opensource online pastebin where the server has zero knowledge of pasted data. Data is encrypted/decrypted in the browser using 256 bits AES

Also check out Shortly.

Debugging JavaScript Using Regular Breakpoints #

Git Immersion #: Guided tour of Git internals.

Wednesday, 11 April 2012

Meteor #

JavaScript application framework. David Greenspan, author of Etherpad, is one of the developers.

Thanks to B.B. The King of *x Sysadmin.

Saturday, 7 April 2012

Jeremy Keith: Best Practice For Crafting Websites, 2012 #

Can you sum up, in general terms, the key things you think people should consider when building sites today?

I’ve found that it makes sense to apply the principle of progressive enhancement to everything: layout, images, and content:

Use small images by default.

Don’t apply any layout in your CSS.

Start with the content that is absolutely essential.

Once you’ve got that baseline working well, then you can start to progressively enhance the site:

Load in larger images if the screen size permits it.

Use a grid for page layout, but keep the CSS declarations for the grid within media queries.

Use Ajax to conditionally load non-essential content for larger screens.

Don’t start a design by thinking about the desktop layout. But don’t start by thinking about the mobile layout either. Instead, think about the content. And when I say “content”, I don’t mean “copy.” Your content could be a task, like adding an item to a shopping cart. Focus on the core task that your user wants to accomplish.

Separating out the content (reading an article, buying a pair of shoes) from the delivery mechanism (a desktop browser, a mobile browser, a tablet) requires a different mindset to the way web sites have traditionally been built. But much like the change in mindset that was required when we changed from tables for layout to CSS, it’s incredibly rewarding.

Sunday, 25 March 2012

Do Things, Tell People #

← Before |