You may be wondering why I have an article that contains mostly latin text (see below). I normally remove this content before launching a website but I thought I’d leave it here to explain a very brief part of my development process.
Website development.
I build all my sites with WordPress, a free, open source and highly flexible content management system. As this months .net magazine puts it:
WordPress is the most commonly used online publishing platform on the planet. WordPress is becoming a more and more sophisticated tool and, with more complex demands, developers are bringing some of the most up-to-date development techniques to WordPress sites.
When developing a website with WordPress I always fill one page with the basic elements that may be required by the end user when writing an article. This is to design and style each of them, something I do ‘in browser’ as various browsers will render these elements differently. I begin with a rough draft of how elements may look in Fireworks or Photoshop, but quickly move into HTML5 and CSS3 to finalise the look and feel. By working this way, there are no surprises for the end-user when publishing the article.
Design in browser.
Designing directly in the browser is an integral part of my workflow when developing a website. The above example uses cross-browser variation as the reason to use this technique, but there’s a lot more to it that that.
As I discuss in another article, some agencies still opt for what I believe to be an outdated workflow. Essentially, visuals are produced and signed off before development moves into the browser. But visuals are static, there’s no way to know that a layout produced in Photoshop is going to translate into a good end-user experience. A heavily debated solution is to begin developing in the browser at an earlier stage. This allows for the layout, interaction and user journey to be tested before resolving the finer details of the design. Time is saved on creating visuals and this process generates a more effective end product.
Side note: “design in browser”
There’s a lot more that can and should be discussed on this subject, but that’s for another article. I wanted to demonstrate a small part of my workflow that helps me finalise some of the details of a design.
Chris Thelwell has written a very good article on design-in-browser which resonates with me. Chris also talks about adapting the design process, something that I firmly believe needs to happen.
Below are the typographic elements I style in browser to tie in with the overall look and feel of a design.
Heading 1 (with link)
Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Heading 2, mimimum veniami ex ea con dolor nisi ut aliquip.
Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Heading 3, mimimum veniami ex ea con dolor nisi ut aliquip.
Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Heading 4, mimimum veniami ex ea con dolor nisi ut aliquip.
Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Heading 5, mimimum veniami ex ea con dolor nisi ut aliquip.
Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Heading 6, mimimum veniami ex ea con dolor nisi ut aliquip.
Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Paragraph:
Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat. Link here.
Bold paragraph:
Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat. Link here.
Italic text link
Bold italic text link
Blue Button
Grey Button
Green Button
Orange Button
Forms
Block Quote:
Jonny is easy going yet diligent, a talented designer with a broad range of skills, an innovative mind, and most importantly a good eye for design.
Unordered List
- Unordered list item
- Level 2
- Level 2
- Level 3
- Unordered list item
- Unordered list item
- Unordered list item
Ordered List
- Ordered list item
- Level 2
- Level 2
- Level 3
- Ordered list item
- Ordered list item
- Ordered list item
Ordered List — highlighted
- Ordered list item
- Level 2
- Level 2
- Level 3
- Ordered list item
- Ordered list item
- Ordered list item
Definition List
- Nicely styled term currently being defined in this list.
- I’m a definition description, I’m here to describe the above.
- Nicely styled term currently being defined in this list.
- I’m a definition description, I’m here to describe the above.
- Nicely styled term currently being defined in this list.
- I’m a definition description, I’m here to describe the above.
ALERT! Lorem ipsum dolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
ALERT! Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est.
ALERT! Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam nonummi.
ALERT! Sit amet, consectetuer adipiscing elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat.
ALERT! Lorem ipsum dolor sit amet. Consequat Duis autem vel eum iruire dolor in endrerit, voluptate velit est. Euismod tincidunt ut laroeet dolore magna aliquam erat voluptat.
