Do the questions you ask when working with code decode your level of expertise?

As a beginner in any specific web tech, your first concern when working with any code is “what is this and how does it work?” As you level up, those concerns change. You may still learn about about how it works as you dive deeper, but other concerns will emerge the more you know, the more you use it, and the more work of others you are exposed to.

CSS

Beginner

• How do I make stuff look how I want?

Intermediate

• How can I keep this under control?
• Can/should I use frameworks/libraries?
• How do I deal with cross-browser problems?
• Should I be using a preprocessor?

Expert

• How can I write less of this?
• Can/should I create frameworks/libraries?
• Is testing possible?
• How can I improve the tooling? Continue…

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a simple grid.

If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Continue…

A Beginner’s Guide to HTML & CSS

LESSON 1 • Terminology, Syntax, & Introduction
LESSON 2 • Elements & Semantics
LESSON 3 • Box Model & Positioning
LESSON 4 • Typography
LESSON 5 • Backgrounds & Gradients
LESSON 6 • Unordered, Ordered, & Definition Lists
LESSON 7 • Images, Audio, & Video
LESSON 8 • Building Forms
LESSON 9 • Organizing Data with Tables
LESSON 10 • Coding Practices & Additional Resources

A Beginner’s Guide to HTML & CSS is led by designer & front-end developer Shay Howe. He also offers an advanced guide with lessons being posted weekly into March 2013- http://learn.shayhowe.com/advanced-html-css/

Click here to begin: A Beginner’s Guide to HTML & CSS.

Making responsiveness only about grids, responsive images and media queries is a disservice to customers and brands. It needs to be about providing readable content for any device, and that means starting with type.

The pervasiveness of mobile devices today means audiences want to consume content on whichever browser or device they prefer. As a result, web designers and publishers have rallied behind the idea of responsive design to reach the widest possible audience and promise the reader a great experience no matter what their screen size. But in our rush to make sites work well across a plethora of mobile devices, tablets and desktops, many of us have overlooked a crucial concept: we should be designing for the reader, not the device. Continue…

If you aren’t already implementing these useful CSS3 properties on your websites, you should be. If you are not already using CSS3, know that CSS3 is not nearly as intimidating as you may think. These are easy to implement and bring tons of flexibility and features to designing your future website.

Diligent designers stay up to date with the latest in web design and development. Staying on the cutting edge of the web can give you an advantage in your web design business and can even make your design work substantially easier and better. Most web designers know and use CSS to create beautiful websites that are browser-​​friendly and consistent across all platforms. Having said that, there are some CSS3 properties that aren’t used as often as you would expect. Despite their rarity, they are extremely useful.

CSS3: Multiple Backgrounds

Many designers don’t realize that you can implement multiple backgrounds into your website designs. This could have many creative and practical uses. Imagine using this with absolute positioning to align certain elements to different sides or corners. This could turn into an interesting design technique if used properly. Continue…

Programmers like me are often intimidated by design – but a little effort can give a huge return on investment. Here are one coder’s tips for making any site quickly look more professional.

I am a programmer. I am not a designer. I have a degree in computer science, and I don’t mind Comic Sans. (It looks cheerful. Move on.)

But although I am a programmer, I want to make my sites look attractive. This is partly out of vanity, and partly realism. Vanity because I want people to think my work is good, and realism because the research shows that people won’t think a site is credible unless it also looks attractive. Continue…

As a web designer, what do you think? Do we need to change the way we thing about web design and make it “device independent?” I tend to think so. When I design a site I prefer to think about how it will morph for each user on their device rather than “breaking” at certain points in order to serve a particular screen size. For some reason the design process flows more freely that way. But the code requires that we analyze how our web designs perform across numerous platforms.

It’s time to stop thinking about the Internet and online communication in the context of a device, be it desktop, tablet or mobile. Advances by Google and Apple have heightened consumer expectations, which now require stricter focus from us to create seamless online communications — communications that work everywhere and that get their point across. We need to embrace a device-agnostic approach to communicating with connected consumers and forget the idea of a “mobile Internet”. There is only One Web to experience.

(Smashing’s note: If you are looking for a good book on mobile, this is the one. Our brand new book on best design and coding practices for mobile, Responsive Web design and UX design for mobile. Get it now!)

A Quiet Change
At the beginning of June, Google published on its Webmaster Central Blog its “Recommendations for Building Smartphone-Optimized Websites.” Its recommendations are that responsiveness — or, where necessary, device-specific HTML — is the way to build websites for today. Both methods are based on all devices accessing one URL, which in Google’s words makes it “easier for your users to interact with, share, and link to…” Continue…

Here is an interesting design example relating to Responsive Design of a page requiring search filters such as a store or photography gallery. What do you think? Which responsive option would work best from a user standpoint?

I’ve long been interested in design patterns. Common and proven-effective solutions to design problems. Too many settings to display at once and it’s confusing the user? Put them into logical groups and use an accordion design pattern! Patterns got even more interesting with the onset of responsive design. How do these patterns hold up as the available screen space changes?

We might be able to get six or more tabs on a laptop screen, but it’s only really practical to get three on most mobile devices. What do we do? Perhaps converting them into an accordion would work.

Brad Frost has done a great job in keeping a repository of Responsive Patterns. Brad and Dave and I were sitting around after InControl talking about design patterns that hadn’t been explored as much. Dave mentioned “Search with Filters” as an example. There can be quite a lot of UI involved in a search filter, so you have the challenge of displaying that without taking up too much room for the actual results, as well as allowing the user to change those filters without being too disruptive.

On desktop, you can do a split column design with the filters on the left and have plenty of room for results:

Continue…