Home > Tags > CSS
Page 3

7 Tools for Responsive Web Design

The move towards developing responsive websites has introduced a set of new tools that help can developers learn the ropes fast and start producing cross-browser and non-device specific websites quickly and more efficiently. Let us see some of these tools and resources that you can leverage as we get deeper into responsive web design: Adaptive Images Your website is increasingly being viewed on smaller screens that consume low bandwidth. In addition to other challenges associated with developing...
Read more

5 CSS Methods for SEO

Development teams and design strategists spend countless man-hours converting the ideas for a website into a crucial tool for business development. They build database tables, track user navigation paths and create stunning graphics to bring a company's products to life on the screen. While the fruits of these efforts are often both visually stunning and technically proficient, they can all count for nothing if no one can find the site in their search results. What is SEO? Search engine optimization...
Read more

W3C ‘Media Queries’ Proposal Boosts Responsive Web Design

Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers. The CSS Working Group's proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation. Media queries consist of a media type (ex. screen or print), combined with defining...
Read more

Use Compass In Your Sass Projects

If you have started to dive into the wonderful world of CSS preprocessors (LESS or Sass), you might have also heard of Compass. If you haven't decided on either LESS or Sass, I would make the investment and learn one, or both, of the technologies. It's well worth the time and will make your coding and development life a lot easier. Today, we're going to look at Compass, an open-source CSS authoring framework built on Sass. Similar to Sass, it is installed via the command line (Terminal in Mac OS X) and is run...
Read more

Using CSS3 Attribute Selectors

Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code. In this tutorial we will outline how to use these new substring matching attribute selectors....
Read more

Introduction to Sass, Part II

In my last post, I introduced Sass (Syntactically Awesome Stylesheets) and getting Sass set up on your machine by installing Ruby, installing Sass, watching a file and compiling via Terminal. Now, we will look at a much simpler way to get set up with Sass. CodeKit. I'll be upfront, I'm a user of CodeKit and I recommend the software to any web developer who works in Sass, LESS, Compass, JavaScript, or any other web language, however neither I nor Developer Drive has any relationship (personal or financial)...
Read more

Using Firebug to Improve your Web Design Skills

Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code? Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs...
Read more

New ‘Adaptive Image’ HTML Tag Stirs Controversy

The rising global popularity of smart phones and other small-screen Internet devices has created a number of dilemmas for web developers. Among the most pressing is the issue of serving the proper image files for widely divergent screen sizes. The industry has responded with a variety of solutions, including separate mobile websites that are much leaner in terms of shown images. A new attribute, <img srcset>, has the potential to resolve some of the issues by enabling the desired image size,...
Read more