Posts Tagged ‘Techniques’

We are pleased to present below all posts tagged with ‘Techniques’.

Web Typography: Educational Resources, Tools and Techniques

Web typography has evolved a lot over the last years. Today we see rich, accessible typography, a plethora of type design choices for the web and a number of remarkable, type-based web designs. It's a great time for web design, and it's a great time for web typography. Still, being as excited as we are, we should not forget about the foundational principles of good type design on the web and use them properly within our projects. Great choice is good, but, most importantly, we should be making meaningful typographic choices in our designs.

A Typographic Anatomy Lesson

In this post we present an extensive overview of educational resources, tools, articles, techniques and showcases all related to web typography. Please notice that the overview presents resources which we have stumbled upon, discovered, collected and reviewed over the last six months. This round-up is quite long, so save some time for a thorough study.

Read more...

Equal Height Column Layouts with Borders and Negative Margins in CSS

"What? Another "Equal Height Columns" article? Enough already!" If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margins. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.

Two column layout

[fblike]

In this post we will build three layouts using CSS: a two column layout with no wrapper div, a two column layout with two vertical borders between the columns and a three column layout with a single wrapper. All layouts have coding examples and demos for your convenience.

Read more...

Transparent CSS Sprites

One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.

Screenshot

[fblike]

Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.

Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials which help you get to grips with the techniques and sprite generators which help you create the graphics themselves.

Read more...

50 New Useful CSS Techniques, Tutorials and Tools

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer "pure CSS images" and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that's a good thing!

Screenshot

[fblike]

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don't hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.

Our job is to promote good, high-quality content and resources. If you wrote or developed something useful, contact us — we will do our best to spread the word and help you out.

Read more...

Five Useful Design Techniques and Coding Solutions For Web Designers

As designers, we have to create an intuitive user experience, solve design problems and provide a beautiful and functional user interfaces. Unlike print design, we don't have the luxury of designing in a static area; rather, our canvas is ever-changing in its content, browser width, page length and more. We do need to be able to code to some extent and be able to build a design around a structure of code. Yet, with these complications comes an opportunity for unique functionality, interactive effects and better user experience.

Bar graph effect for number of comments or tags.

[fblike]

In this article, we'll look at five useful coding solutions that we've stumble upon recently. All of these solutions enhance a website's design, not just the code. These solutions affect the user interface and the user's interaction with the design, and they can make for a more usable and interactive website.

Read more...

Useful Adobe Photoshop Techniques, Tutorials and Tools

As web designers, we always have something new to learn. Over the last decade our workflow has changed dramatically — it's become more sophisticated and highly diversified. Not only do we have a much larger variety of improved tools to use; there's also an endless stream of new techniques emerging and spreading within the web design community via social networks. And this is where the opportunity to learn new useful, practical approaches and techniques comes in.

Create an Awesome Number-Based Illustration

We can learn by exploring the different design approaches other designers have taken, when solving their problems and apply these approaches to our work to become more productive and skilled. Therefore, our editorial team is permanently looking for interesting techniques, tools and tutorials, which we carefully select and present in round-ups on Smashing Magazine. You needn't love our lists, but they often will give you some useful ideas and advice.

Below you'll find an overview of new useful Adobe Photoshop techniques and tutorials that we've found and collected over the last months. We sincerely hope that at least some of the techniques presented there will help you improve your graphic design skills in Adobe Photoshop. And sincere thanks to all designers and developers whose articles are featured in this review. We respect and appreciate your contributions to the design community, folks!

Read more...

Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites

Interactivity can transform a dull static website into a dynamic tool that not only delights users but conveys information more effectively. In this post, we'll walk through five different coding techniques that can be easily implemented on any website to provide a richer user experience. These techniques will allow you to better display difficult content, help users find information more effectively and provide meaningful UI cues without overwhelming the user: on-page text search, drag controls for oversized content, subtle hover effects, comment count bars and a full-page slider.

Drag controls for oversized content

[fblike]

Websites often have search boxes to allow users to find content from their archives. But what if you want to find content on the given page? Information Architects has had on-page text search that provides a great user experience. Let's recreate this using jQuery.

Read more...

↑ Back to top