Posts Tagged ‘Techniques’

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

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...

The Power of Adobe Fireworks: What Can You Achieve With It?

Our recent article covering the new features of Adobe Fireworks CS5 provoked a very interesting and intense debate. But because comments ranged from "Fireworks is the best tool for screen design!" to "What exactly is Fireworks?", we thought that another article on this topic might be very useful to Smashing Magazine readers.

Firefox logo, by Jon Hicks

[fblike]

However, this time the article will not focus so much on the tool itself, but rather on what can be achieved with it, and more specifically — what can be achieved with its visual/graphic design capabilities. We also hope that the following showcase of inspiring illustrations, created entirely in Fireworks, will not only be interesting to our readers, but will also help put an end to the common misconception that Fireworks is mostly a prototyping tool – and – that for "serious" design you must switch to other tools, namely Photoshop or Illustrator.

Read more...

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn't matter as one of the most useful places for this module is somewhere that does have a lot of support - small devices such as the iPhone, and Android devices.

dConstruct 2010 website on a desktop browser

In this article I'll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We'll have a look at a very simple example and I'll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

Read more...

Start Using CSS3 Today: Techniques and Tutorials

We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn't make sense to use CSS3 today. Yes, Internet Explorer doesn't support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file).

But it's OK to accept that Web is a dynamic medium, and it's OK to create rich, interactive, beautiful designs for those who are already using a modern browser or will be using one soon. It just doesn't make sense to keep looking back, being afraid of looking forward and therefore avoid experimenting and learning about new CSS3 properties today. And this is why we keep publishing articles about CSS3.

CSS3 Leopard-style Stacks

In this post we present an extensive round-up of CSS3 techniques, tools and resources that will help you learn how to use CSS3 in your designs right away. We have grouped most useful articles by the corresponding properties, described what browsers support what properties, presented alternative JavaScript-based approaches and workarounds for Internet Explorer and added a couple of links to useful CSS3 generators and tools in the end of the post.

You may be interested in the following related articles:

Read more...

↑ Back to top