Helloewy: A blog from Loewy Design » HTML http://www.loewy.com The blog of Loewy Design Thu, 03 Nov 2011 20:36:01 +0000 en hourly 1 By the book http://www.loewy.com/by-the-book/ http://www.loewy.com/by-the-book/#comments Wed, 07 Oct 2009 21:19:45 +0000 David Loewy http://www.loewy.com/?p=563 book_art2

I recently gave a lecture to the advanced web design class at Farmingdale College. When I met up with professor Jack Harris, he informed me that the kids, mostly juniors and seniors,  saw Loewy Design’s page in the Flash/Dreamweaver Genius Guide, and they were looking forward to meeting with me. A bit embarrassed and very flattered, I asked Jack what book was he talking about and where could I get one.

I later found out that the book is published by Imagine Publishing and promises to be the essential guide to dynamic design and development. We were recognized for our website’s approach to animation and design using purely CSS and Javascript, a technological accomplishment but not exactly what I wanted to talk about in my little seminar. My talk was about the real world lessons that you can’t get from a textbook. I wanted to focus on the process of solving business and branding problems with the online medium.

I tried to push their tech questions aside but they kept coming. I eventually got my point across that the technology we’re using today will be completely different when the students immerse themselves in the job market. They’ll need to educate themselves on the latest versions of Flash and Dreamweaver and keep up with always evolving programming languages throughout their careers.

The most valuable information I could share with them was to describe our thought processes, not only about making a website look great but about creating one that will actually help your clients solve their business challenges. I gave them our secret sauce on how we deliver positive results to our clients and improve their bottom lines.  As a take-away, I provided them, and now you, with a list of reference tools organized by each phase of our process.

By no means is this the complete list, since it too is always evolving, but it could serve as a nice resource and good starting point for students, clients and peers.

]]> http://www.loewy.com/by-the-book/feed/ 1 HTML 5 – A new level http://www.loewy.com/html-5-a-new-level/ http://www.loewy.com/html-5-a-new-level/#comments Wed, 09 Sep 2009 18:37:51 +0000 Matt Kaye http://www.loewy.com/?p=401 HTML 5 Preview

There’s been a lot of buzz about HTML 5 lately. I’ve seen a wave of articles talking about the new version of HTML in the RSS feeds I follow. Work on HTML 5, which commenced in 2004, is far from complete, but we’re starting to see some new and exciting features being released in the current draft.

So what’s new? For front-end developers, there are a few improvements in version 5 that aim to make life easier and cut down on development time.

So What’s Different?

Well, a lot, but one of the most significant changes from HTML 4 is that HTML 5 is not based on SGML. It has, however, been designed to be backward-compatible with common parsing of older versions of HTML.

In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like the paragraph tag), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.

HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the specs call it) or “XHTML form.” This gives page authors more flexibility.

Page Structure

HTML 5 brings a whole set of new elements that make it much easier to structure pages. Now, we have tags like:

<header>
<nav>
<article>
<section>
<footer>

HTML 4 lacks the necessary semantics for describing these parts of the page specifically. The new tags should replace the all-too-common “use div” elements, giving each a descriptive ID or class.

Typical markup for an HTML 5 document could look something like this:

<body>
<header>...</header>
	<nav>...</nav>
	<article>
		<section>...</section>
	</article>
		<aside>...</aside>
<footer>...</footer>
</body>

Embedded Media

The popularity of audio and video on the Web is undeniable. Sites such as YouTube, MySpace, and Facebook make it easier than ever for anyone to publish rich content to the Web. HTML 4 lacks the means to embed and control multimedia successfully; many sites rely on Flash to perform those tasks.

HTML 5 promises two tags to aid in the embedding process:

<audio>
<video>

There are many additional attributes available for each of these tags, should the author of a Web page require more-detailed control over its content. But for purposes of demonstration, this would be a typical use:

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

<audio src="sample_audio.mp3" controls>
    <a href="sample_audio.mp3">Download song</a>
</audio>

The optional “poster” attribute can be used to specify an image that will be displayed in place of the video before the video has begun playing. The “controls” attribute is a true-or-false attribute that indicates whether the author wants the built-in controls turned on or off by default.

Regular expressions

HTML 5 extends the input element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.

Enter a US or Canadian Postal Code:</p>
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&amp;#160;B2C" />

The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript.

Canvas

The new Canvas element consists of a drawable region defined in HTML code with “height” and “width” attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of Canvas include building graphs, animation, games, and image composition.

your browser does not support the canvas tag

See the yellow square? That’s being drawn by JavaScript into the Canvas tag. Currently only FireFox, Chrome, and Opera support the canvas tag.

This is an early example of the improvements the Web-development community can look forward to with the release of HTML 5. Of course, not all browsers will be swift to support the new specifications, so don’t throw out that HTML bible just yet!

Do you have any other HTML 5 tips and features you find exciting? We’d love to hear about them!

]]> http://www.loewy.com/html-5-a-new-level/feed/ 0 Tools of the trade http://www.loewy.com/tools-of-the-trade/ http://www.loewy.com/tools-of-the-trade/#comments Tue, 01 Sep 2009 19:24:07 +0000 Matt Kaye http://www.loewy.com/?p=377 firebug

Everyone–designer and developer alike–has a set of tools to rely on that make the day go smoothly. We all have tricks that help us be more productive and more efficient–and take less Tylenol!

Here’s my list of tools that I use on a daily basis:

CSS/HTML/JavaScript Helpers:
Firebug (FireFox Add-on)
This is probably my top choice for front-end development. You can see/edit/remove CSS styles and HTML markup on the fly with this great resource. It also has many built-in features that allow you to debug JavaScript code right from the browser.

Web Developer Toolbar (FireFox Add-on)
This tool is similar to Firebug in the functions it offers. I find the combination of the two to be useful; I choose between them depending on the situation. The Web Developer Toolbar’s auto population of form fields saves lots of time, and the inline ruler is quite handy when comparing designs to markup.

Dust-me Selectors (FireFox Add-on)
This is a helpful tool to keep stylesheets as lean as possible. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. It then stores the data, so when you test subsequent pages, selectors can be crossed off the list as they’re encountered.

HttpFox (FireFox Add-on)
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. This resource is useful if you need to know what files are being requested from a web server and you can’t get that information directly by viewing the source code.

CleanCSS
CleanCSS is a powerful CSS optimizer and formatter. It takes your CSS code and makes it cleaner and more concise.

Tabifier
If you work with messy coders or inherit old code that hasn’t been kept neat, this tool will save you lots of time and eyestrain by correctly indenting the code and making it easier to read.

Browser Testing:
XenoCode Browser Sandbox
You don’t have to keep installing different browsers; XenoCode lets you run the browser of your choice virtually from its servers. This service essentially sandboxes the browser, allowing you to run it without changing any of your computer settings. I usually have IE6 and 7 running along with my installed version of IE8.

IENetRender
Here’s another handy tool; it allows you to see real-time screenshots of your page in many versions of IE.

Browsrcamp
If you develop on a PC, Browsrcamp allows you to see screenshots of what your page will look like in MAC Safari. I’ve found that the PC version of Safari doesn’t always render pages consistently.

W3C Validator
This choice is an obvious one. Validation keeps developers honest and squashes most problems before they become headaches.

Version Control:
Assembla
Assembla offers a nice control panel interface for your version-controlled spaces. This particular one runs on Subversion. Even if you’re coding a project all by yourself, I would recommend some kind of version-control software as a must-have. It will save you hours of time.

Tortoise SVN
This is a great SVN client that ties right in with the Windows Explorer Shell. (Sorry, MAC users.) There are numerous subversion clients out there, but this one is my favorite because it runs silently in the background until you need it.

Server Environment Information:
Builtwith
Builtwith is a web technology information profiler; it lets you find out what a given site is using.

Domain Name Details
The name says it all. This is a good place to find answers to most of your common questions about domain names quickly.

This list is by no means exhaustive. There are lots of great products out there that you may find just as useful. It’s really all a matter of preference and comfort. What tools do you use in your development cycle? Feel free to share!

]]> http://www.loewy.com/tools-of-the-trade/feed/ 0 Designing with CSS3 http://www.loewy.com/designing-with-css3/ http://www.loewy.com/designing-with-css3/#comments Tue, 18 Aug 2009 16:17:49 +0000 Marc Acosta http://www.loewy.com/?p=322 Designing With CSS3

Although CSS3 is still officially in the works, the recent releases of Safari and Firefox have given us a few new CSS tools to experiment with. Designers may specifically be interested in the following features that accomplish with a few lines of code, things that we would normally do with graphics.

Custom Typefaces

Being able to use whatever font we feel like using in a web layout is a pretty much a designer’s dream come true. In the past the only way to do that and make sure that users see it was to create graphics for the pieces of text that you wanted rendered in a particular font. As more browsers include the @font-face property, that should hopefully change. Luckily the inclusion of the @font-face property in Firefox 3.5 now opens up font embedding to a much larger audience.

Using it is pretty simple. First you define the name of the font family and point it to the location of the font file. At this time .ttf and .otf are supported:

@font-face {
font-family: PrettyFont;
src: url(fonts/PrettyFont.ttf);
}

Then you just use the above font-family name in your document as you normally would:

p {
font-family: PrettyFont, Arial, sans-serif;
}

This is a test.

Live example – will only be visible on browsers that support @font-face

This is a test.

Reference image – This is what the above should look like

As always, plan on a fallback incase your users are on an older browser. In this case if the user is using an older browser they will see paragraph text in Arial.

Drop Shadows

I’m pretty sure a book can be written on the history of the drop shadow. Back in the day, designers used to create drop shadows on objects and type by adding a separate layer behind an object and adding some blur. Later versions of PhotoShop made this easier with some built in tools, but all this meant to your site designs was more graphic files and longer download times. The box-shadow and text-shadow properties now allow you to do this all with a line of code to either a box or a piece of text.

div {
box-shadow: 2px 2px 3px #CCC;
}

h1 {
text-shadow: 2px 2px 3px #CCC;
}

What this does is place a 2px to the right, 2px down, add 3px of blur and color it a light gray (#CCC). The best part is that your text stays selectable and can be increased or decreased in size using your browsers built in text sizing function.

This is a test.


Live example – will only be visible on browsers that support box and text shadows

This is a test.


Reference image – This is what the above should look like

Rounded Corners

Another feature that is sure to be useful (web apps come to mind) is the border-radius property. What this does is round the corners on boxes – a feature that previously required a lot of markup and graphics to create. Now you can do it easily with:

div {
border-radius: 8px;
}

This will round the corners of a box with 8px radius.

This is a test.


Live example – will only be visible on browsers that support border radius

This is a test.


Reference image – This is what the above should look like

The nice thing about using these new features is the savings on extra graphics and code and simplifying your stylesheets and preserving the underlying text. All of these features degrade nicely on older browsers too. That being said, remember that CSS3 is still not fully supported on all browsers so be sure to test thoroughly. But Remember… with great power comes great responsibility! There may be a temptation to go over the top so please… use these sparingly :)

]]> http://www.loewy.com/designing-with-css3/feed/ 0 Websites behaving badly http://www.loewy.com/websites-behaving-badly/ http://www.loewy.com/websites-behaving-badly/#comments Mon, 06 Jul 2009 17:12:28 +0000 Matt Kaye http://www.loewy.com/?p=228 websites_behaving_badly

A website is more than just an online presence. Properly created by a professional team, it becomes a valuable investment. Take care of your website, and it will take care of you and your brand for years to come.

So, what are you doing to tend this precious resource? You’ve probably put a lot of effort into coming up with a great design and assembling a marketing team to realize your vision. But have you taken the time to ensure that your site has been built using the most up-to-date standards and best practices?

Many small business owners don’t even consider questioning the coding quality of their websites, simply because they don’t know what to look for. But in a rapidly changing landscape like the web, you’d be well served to stay on top of best practices for a few key reasons:

  1. Using Standards Creates Consistency
    If your site is cleanly and consistently designed, it makes a good impression. As a developer, I know that at some point everything I’ve coded will be looked at by at least a handful of other coders. By using standard naming conventions and familiar patterns, you can make the work of the next coder easier and provide a clear road map. This saves you time and money—and ensures that your enterprise looks professional.
  2. Future Proofing
    Websites built with solid standards tend to look and act much the same for years, even as technology advances. A well-designed site is likely to weather changes in platforms with grace. Once you have created a solid foundation by becoming W3C compliant (more about this below), your site should be able to bridge the gaps between different and newer versions of web browsers, as well as devices such as PDAs and cell phones, with greater ease.
  3. Your Site Looks Great….So should the Technology Driving It
    What use is a beautiful site that frustrates the user with error messages and layouts that are broken from browser to browser? Although it’s easy to get caught up in analyzing the visual aspects of a site, that same quality of critical analysis needs to be applied to the coding. Both parts need to be in sync.
  4. Leaner Code Means Better Performance
    Greater visibility on search engines is key to successful growth. And the less time those search engines spend hunting through your HTML code for your content, the more time they can spend indexing your content and keywords. Separation of style from content by way of an organizational format called CSS (”cascading style sheets”) is the almost universally preferred method of achieving this enhanced visibility.

Now that you know the benefits, it’s time to take action. You can either enlist the services of your favorite web design agency or go it alone. If you do, here are some helpful resources:

Basic Web Standards:
http://www.w3schools.com/quality/default.asp

HTML/CSS Best Practices:
http://www.htmldog.com/
http://www.alistapart.com/topics/code/htmlxhtml/
http://www.alistapart.com/topics/code/css/

W3C Validation:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Website Optimization Tools:
http://www.websiteoptimization.com/services/analyze/

Just One More Note On WC3 Validation
W3C validation is one of the simplest ways to check whether a page is built in accordance with current web standards, and provides one of the most reliable assurances that future web platforms will handle it as designed. Validation actually saves money. Creating web pages or applications according to a widely accepted coding style makes them easier to maintain, even if the maintenance is performed and the evolution is overseen by someone else. And last but certainly not least, validation is a sign of professionalism.

Until next time, check out some of our best practices at www.loewydesign.com/work/recent/

]]> http://www.loewy.com/websites-behaving-badly/feed/ 0