Posts Tagged ‘Web Design’

Converting Photoshop designs to HTML

Published by | Tuesday, December 11th, 2012

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers
When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics
The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS
Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next:
• More courses by Chris Converse
CSS: Core Concepts
CSS: Page Layouts

Twenty Twelve–lean, clean, and ready for your WordPress site

Published by | Wednesday, December 5th, 2012

The Twenty Twelve WordPress theme, responsively displaying itself at mobile resolution.
The past two years have seen the release of two default themes for WordPress, aptly named Twenty Ten (released in 2010) and Twenty Eleven (released in 2011). Now we can add this year’s addition, Twenty Twelve, to the list. And with it we get a new stock theme that redefines what a stock WordPress theme is and sets a new standard for lean and clean design and coding. But like all good things the Twenty Twelve theme is not without controversy, which makes it all the more exciting.

Less is more

Twenty Twelve is at the same time stripped down and sophisticated in a way we’ve only previously seen in sandbox and development themes like Toolbox and _s. But unlike these themes, which were created specifically to be used as baselines for new themes, Twenty Twelve is fully built out and ready to take on the challenges of pretty much any content you throw at it. Twenty Twelve is responsive, conforming to small and large screens and providing custom navigation for smartphones and tablets; it is in line with current ultra-minimalist design trends, putting content and typography front and center; and it has tons of cool features built in for beginners as well as advanced users. All in all it makes for a great theme whether you just want a fresh look for your site or you want a good baseline to start from when you build your own child theme or full-on custom theme.

If you ask me, one of the most important aspects of the Twenty Twelve theme is its simplicity in design, code, and implementation. When the Twenty Ten theme was released, it was a revolutionary shift from the old and stale default themes. Twenty Ten was simple to work with and had lots of advanced features under the hood like custom background color, custom header images, and more widgetized areas people could take advantage of. The next theme in the series, Twenty Eleven, built on this concept and introduced more advanced features like a custom front page template, a featured content slider, and other elements. However, the advancements of Twenty Eleven came at a cost with the theme being far more complex on the back end and far more convoluted and tricky to work with.

Considering this, Twenty Twelve is a step in the right direction. Gone are advanced features that few used in practice, replaced with simpler, more meaningful templates and tools to make customization and use as easy as possible.

Efficient in both code and display, the new Twenty Twelve WordPress theme is simple and powerful.

Twenty Twelve at a glance

The key features of Twenty Twelve include responsive design and custom phone and tablet menus; a custom front page template as well as full-width and sidebar templates for pages; full support for Aside, Image, Link, Quote, and Status post formats; full Theme Customizer support for all the standard WordPress functions; Google Fonts integration; and the standard header image and background color support we have come to expect from modern WordPress themes. Not to mention a clean and modern design with the content front and center.

Even with all this, the true power of Twenty Twelve can be found on the back end. Twenty Twelve is a leaner and cleaner theme than its numerically named predecessors. This is great for novice theme tinkerers and advanced theme developers alike. The theme provides more bang for your brackets, separating out functions and templates in separate files and folders and wrapping up functions in conditional functions, actions, and filters to make modifications and interactions easier. In my opinion, Twenty Twelve could be the new standard from which child themes and full themes should be built.

Controversy abounds

I say “could be” because quite a bit of controversy has stirred up around one decision made by the theme creators: It doesn’t seem to support Internet Explorer 8, at least not the way that is expected.

Twenty Twelve is fully responsive and ships with a custom mobile menu for smaller screens. This much is to be expected from a modern WordPress theme. However, in implementing the mobile menu function the developers of the theme made an interesting and controversial decision: Rather than setting the desktop stylesheet as the default for the theme and making special media queries for smaller screens and mobile devices, they chose to set smaller screens and mobile devices as the default and wrap the styles for larger screens in media queries. While this is no problem for modern browsers that follow the new HTML5 standard, it is problematic for older browsers like IE8 because the provisional media queries that create the layout for larger screens is not understood by these browsers. As a result, users of older browsers like IE8 get the mobile layout on their full-size screens.

The theme developers argue that this is not an issue for two reasons: One, the mobile version of the site is perfectly acceptable even on larger screens, and two, people shouldn’t be using old and outdated browsers like IE8 to begin with.

While I agree with both these statements, I believe our job as web designers and developers is not to police the Internet but rather to provide great experiences for the end users and educate them in the process. And since we have little to no control over what hardware and software the end users choose to access our sites, we need to provide the best experience possible for all of them regardless of their choices.

We can’t let older technologies hold us back from implementing new standards. In that case, providing a suboptimal experience for users with older browsers would be acceptable. However, the IE8 issue in Twenty Twelve is not caused by this type of situation but rather the choice to set the mobile styles as the default and wrap the desktop styles in media queries. In other words, they turned the theme stylesheet upside down on purpose. Had it been turned right side up, this would not be an issue.

These are the types of issues that arise in open source and they are incredibly interesting and frustrating for everyone working in open source. Unfortunately, more often than not the end users are left in the dark about what’s going on and get the impression that things are not working right. That is not the case at all. The great thing is that these issues are usually resolved through a collective effort, and a solution to the IE8 menu problem in Twenty Twelve is imminent.

If you want to read more about the IE8 menu controversy and get an idea of how these things happen and how they are resolved, check out the forum streams Excellent base for child themes and nav bar fails in IE8 as well as the track ticket. They provide for some interesting reading.

Check out Twenty Twelve right now!

Though it may sound dramatic, do not let this minor controversy deter you. Twenty Twelve is a great and forward-looking theme and a excellent basis for child themes as well. If you are itching for a new look for your WordPress or WordPress.com site, you should give it a spin and see what you think. There are lots of customization options and you can easily make it your own. Once you’re done, post your thoughts, ideas, and questions in the comments below.

Interested in more?
• The Twenty Twelve theme at wordpress.org
WordPress 3: Building Child Themes at lynda.com
• All WordPress courses on lynda.com
• All courses from Morten Rand-Hendriksen on lynda.com

Suggested courses to watch next:
WordPress Essential Training
WordPress: Building Responsive Themes
WordPress Mobile Solutions

Meet the new program director for Web & Interactive Design: Cynthia Scott

Published by | Friday, February 19th, 2010

Hello members! I’m Cynthia Scott, the new Program Director for Web & Interactive Design here at lynda.com.

One of the reasons I’m working at lynda.com is that I believe in the power of transformation. I have seen how people can light their own fire by taking advantage of the rich, deep quality of resources at lynda.com. It is an honor to be part of the team.

In my previous work as an educator, I planned media communications curriculum and helped teachers deliver classroom training. As a Center Director for the Multimedia & Entertainment Initiative in California, I worked with a statewide network of educators, developed industry relations, and created strategies to keep education at the forefront of emerging technologies. My last project was working with the New Media Consortium to produce the 2009 Horizon Report: Economic Development Edition.