Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

  • Adaptive CSS-Layouts: New Era In Fluid Layouts?

    By Kayla Knight, June 9th, 2009 in CSS | 108 Comments

    Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

    Fixed-width version of our final result

    If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.

    In this article, we'll discuss effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.

    Also consider our previous articles:

    Read more...

  • Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

    By Kayla Knight, June 2nd, 2009 in CSS | 127 Comments

    The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits.

    Nine Lion Design

    This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.

    Also consider our previous articles:

    Read more...

  • Typographic Layout Design Contest: Join In and Win!

    By Smashing Editorial, May 21st, 2009 in Events | 58 Comments

    As web-designers, we shouldn't underestimate the power of typography. The content is the king and typography is an extremely powerful mean that can help designers to effectively convey their messages to the audience. Recently we presented an overview of useful typographic CSS-tools and 8 Simple Ways To Improve Web Typography. And now it's your turn to show what you are capable of when using these tools.

    Type Trumps

    In this post we announce the Typographic Layout Design Contest, a contest that has the goal to collect beautiful typographic (X)HTML+CSS-based layouts created by you and release them for free as a gift for the web design community. And, of course, we have some nice awards for best designs submitted in the contest.

    Read more...

  • Table Layouts vs. Div Layouts: From Hell to… Hell?

    By Geir Wavik, April 8th, 2009 in CSS | 224 Comments

    Over the last several years, developers have moved from table-based website structures to div-based structures. Hey, that’s great. But wait! Do developers know the reasons for moving to div-based structures, and do they know how to? Often it seems that people are moving away from table hell only to wind up in div hell.

    Photo of a road sign containing heaven and hell

    This article covers common problems with layout structure. The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cleaner and more readable code. The final part looks at what features await in future. Please join us on this journey from hell to heaven.

    You're in table hell when your website uses tables for design purposes. Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website's functionality.

    Read more...

  • Flexible Layouts: Challenge For The Future

    By Smashing Editorial, June 26th, 2008 in How-To | 129 Comments

    The new generation of web browsers — Firefox 3, Opera 9.5 and Internet Explorer 7 — provides a feature which seems to save a lot of work for web-developers in the future, namely the Full Page Zoom. Instead of allowing users to increase and decrease the font size on a given web-site, browsers now enable users to literally scale the rendered layout including visuals and background images. Consequently, every fixed, pixel-based layout becomes "scalable"; the content area always remains within the layout box it is supposed to be in and there is no chance of producing overlapping boxes as we've seen in previous generations of web-browsers.

    However, is the new zoom-technique indeed so advanced that we don't need flexible layouts any longer? With fixed layouts, designers can ensure the exact positioning of each pixel (a dream of many graphics designers comes true!) and the user can adjust the size of the layout with a scaling zoom on demand. No wonder that it's tempting to motivate the switch to fixed layouts. However, as professionals, we need to consider how reasonable it is from the professional point of view.

    In the following let's discuss why we strongly believe that this paradigm won't lead web design to more user-friendly and accessible web-sites, why flexible layouts still remain important today and why they will become even more important in the future.

    Read more...

  • Style Switchers Are Back: Ideas, Examples and a Contest

    By Smashing Editorial, June 5th, 2008 in Design Showcase, Events | 172 Comments

    Design a style switcher and win an Apple Cinema 20 Flat Panel Display with 16.7 million colors, 400:1 contrast ratio, 0.258 mm dot pitch, 16 ms response time and 170-degree viewing angles. Yes, that's that easy. Style switchers are used to provide users with a choice of layouts, fonts, colors and views they can use to adapt the design to their personal needs. Designs with style switchers are more flexbile, more adaptive and more user-friendly as different visitors can quickly modify the design for their personal convenience.

    Apple

    Web designers can achieve significant usability-improvements by adding a simple style switcher to their designs. Style switchers are useful and powerful as they give users a better control of site presentation. However, this technique is almost never used and are sometimes considered to be unnecessary and useless which is simply not true. We would like to change it.

    We want to motivate you to figure out how style switchers work and how you can use them to improve your designs.

    Read more...

  • 25 Useful WYSIWYG Editors Reviewed

    By Smashing Editorial, May 6th, 2008 in Developer's Toolbox | 243 Comments

    When it comes to coding editors, it's damn hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it's important to know which editor is best tailored to your personal needs.

    WYSIWYG-editors are often criticized by real coding ninjas for bloated, dirty and not standards-complaint source code they've been producing over the last years. However, WYSIWYG-editors have become much better recently. Some of them even produce valid and elegant code.

    Screenshot

    Sometimes you need to provide your clients with some simple tools to edit or update their web-sites. And this is where the utility of WYSIWYG-editors comes in. As a web-professional you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor. In this article we've tried to give you an overview of both useful and deprecated WYSIWYG-editors.

    Read more...

  • Footers In Modern Web Design: Creative Examples and Ideas

    By Smashing Editorial, April 8th, 2008 in Design Showcase | 181 Comments

    According to classic principles of web design, everything at the bottom of the page isn't that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren't really able to catch visitors' attention which is why footers are often forgotten or ignored and not given the attention they deserve.

    In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven't found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, "back to the top"-link and contact details. But if most designers forget it, why don't make use of it? Why don't use footers to impress visitors with something they actually don't expect at all?

    Footers - volll

    This post presents creative examples of footers and ideas for footer design. We've tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.

    You might also want to take a look at the posts

    Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.

    Read more...

  • 39 Creative Flash Designs

    By Smashing Editorial, April 2nd, 2008 in Design Showcase | 90 Comments

    Flash is powerful. Using it properly, you can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages. With Flash designers can achieve results which simply aren’t possible with (X)HTML and CSS. Whether you like Flash or not, it empowers the Web with functionalities which make it an incredibly interactive medium.

    Flash Screenshot

    Flash-based web-sites can look not like web-sites at all; Flash-designers tend to use colorful, dynamic, loud and extremely vibrant approaches, with effects and animation, music and videos, stunning visual elements and interactive navigation menus. Below you'll find 39 examples of creative, beautiful, shocking, unusual, but always outstanding Flash-based designs.

    You might also want to take a look at the articles

    Read more...

  • 20 More Free First-Class Wordpress Themes

    By Smashing Editorial, March 25th, 2008 in Graphics | 204 Comments

    Free professional WordPress themes always come in handy. Whether you are looking for some design inspiration or professional coding solutions — in both cases you can learn a lot, you can apply them and you can build customized designs upon them without reinventing the wheel all the time.

    However, to create a unique design, sometimes it's not enough to change colors or increase font-size of a theme designed by other designers. The uniqueness of a theme is all about little details, some personal touches in the play of link colors, footer and header. Therefore in most cases it's useful to think of free Wordpress themes as a playground for your imagination.

    First-Class Wordpress Themes - Stilbruch WordPress Theme

    In this article we present 20 fresh free high-quality WordPress themes. Unfortunately, over the last months they haven't gained the popularity they deserve which is why they are now featured on Smashing Magazine. All themes can be downloaded, customized and used for free — in personal or/and commercial projects. Please read license disclaimers carefully before using the theme in commercial projects — they can change from time to time.

    You might also want to take a look at our previous selections:

    Well, let's dive in.

    Read more...

  • 45 More Excellent Blog Designs

    By Smashing Editorial, February 20th, 2008 in Design Showcase | 220 Comments

    We, designers, are creative folks. And being creative, we permanently strive for inspiration — innovative approaches, crazy ideas, smashing concepts and, in general, unique designs which can help us to observe a given problem from a fresh perspective. This is why we always have some fancy design books laying around on our desk, and this is why we enjoy observing other people's work — basically just because we can learn a hell of a lot from them.

    There are things one can do a number of times without worrying about becoming boring. For instance, collecting and showcasing excellent blog designs. In this post we do it already the third time. Why? Web design lives in blogs; new developments appear there, that's where the music plays. And that's where you need to look for in order to keep up with current trends and developments.

    Screenshot

    This post presents 45 excellent blog designs with a perfect layout and unique personal note. We haven't analyzed the content of the blogs; instead we focused on ideas, approaches, graphics and layouts.

    If you miss some stunning blog designs in this showcase please let us know in the comments. However, it's also possible that these designs have already been covered in one of our previous showcases:

    Read more...

  • 65 Excellent Flash Designs

    By Smashing Editorial, October 30th, 2007 in Design Showcase | 150 Comments

    With Flash you can do more than just displaying videos. You can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages and it empowers the Web with functionalities which make it an incredibly interactive medium. With Flash designers can achieve results which simply aren't possible with (X)HTML and CSS.

    The results can be creative, impressive, beautiful and fascinating. Under two conditions: 1) if designers find the right mixture between graphics, animation, video and sound and 2) if designers follow the guidelines of usability and user interaction.

    However, since there is a number of things that can go wrong in Flash, it's easy to get it wrong. In fact, there are thousands of examples where it is the case. In Flash any experiments with navigation and layouts are possible and in most cases it's extremely hard to find a creative yet intuitive approach. Flash is commonly used by designers, agencies, advertisers and interactive web sites, and not on the sites where simplicity and quick access to information are important.

    Cubamoon

    Flash Screenshot

    In this post we present 65 examples of outstanding Flash designs with excellent use of graphics, visual elements, interface design and graphics motion. This showcase (mostly) presents "pure" web designs; we've tried to avoid Flash-based games and advertising.

    Read more...

  • 21 Fresh, Usable and Elegant Wordpress Themes

    By Smashing Editorial, June 26th, 2007 in Design Showcase | 236 Comments

    Sometimes it's just amazing to see, how developers use creative approaches to design amazing layouts, based upon a simple Wordpress template. Every now and again we take a look around, and select Wordpress themes, which offer thought-out design, flexible template structure and conform to the basic principles of usability. The choice is big enough, but the search is worth it. We invest our time, browsing through dozens of web-sites, news aggregators and design-communities and put enhanced solutions together, so you don't have to.

    Impressive Wordpress Themes - Dark_Black Release at {one more revision}

    Impressive Wordpress Themes - Sharpfolio

    Let's take a look at 21 23 fresh, usable, simple and and elegant WordPress themes, which have been released over the last few months. Among other things, we've also selected some of the new minimalistic solutions - all of them make use of clear and precise typography. They're definitely worth a look. You can also take a look at

    Read more...

  • 11 Almost Perfect Business Layouts

    By Smashing Editorial, April 26th, 2007 in Design Showcase | 101 Comments

    Business companies tend to impress visitors with solid site structures, precise navigation and the credibility of presented content. Therefore business layouts are usually quite unspectacular, mostly informative, but not attractive. It's an appropriate approach if you want to inform your visitors, but what should you do if you want to attract users' attention? How to combine serious tone with attractive design? We've decided to figure it out. And selected 11 almost perfect business designs / layouts used by companies from different countries of the world. Exceel

    What does perfect mean?

    Different tastes result in different understandings of a perfect layout. The examples we've selected stand out, because
    • they are clean. It concerns both code, text and graphics.
    • they have a balanced layout, all site elements have their own place and are consistently placed on all pages
    • they pay attention to small details; the smallest things such as link colors and headings are well thought-out
    • they make use of white space, which places special emphasis on design and content
    • they use modern design elements, but remain moderate, without extreme use of graphics
    • they use intuitive color schemes and high contrasts to make sure the legibility of the text and the perception of visual elements are optimal
    • not all of them are gorgeous, but they don't have to. All of them are descriptive and they work, and that's what really matters.

    Read more...

  • Web 2.0 Tutorials Round-Up

    By Smashing Editorial, March 10th, 2007 in Tutorials | 198 Comments

    Web 2.0 is beautiful. In fact, many designers manage to create really amazing, particularly dark and fresh web-designs, which are visually appealing and make a great first impression. However, if you are planning on designing a web 2.0-project, you probably should know how and where to start from. Badges, Gradients, Mirror and Shadow Effects as well as Shiny and Glassy buttons are trendy. But do you know exactly how to design them? We've collected over 65 tutorials, references and related resources, which are supposed to help you to create graphics in Web 2.0-Look. It's nice to have them ready to hand if you need them. It's nice to be able to look at them if you need a source of inspiration.

    Read more...

  • Free Design Templates

    By Smashing Editorial, February 14th, 2007 in Developer's Toolbox | 192 Comments

    Free design templates don't have to be unattractive, inaccurate and boring. Some web-sites offer high quality templates for the best price you would ever get - for free. You can download Flash-based templates as well as CSS-based layouts absolutely free; furthermore, you can use them for your personal and commercial projects without any restrictions whatsoever. Still, before using some of the templates, throw a glance at the license agreements - they're changing all the time.

    Read more...

  • 30 Dark Designs You Should’ve Seen

    By Smashing Editorial, January 13th, 2007 in Design Showcase | 192 Comments

    Dark designs can be really stunning. I mean, really. In Web 2.0 designers try to do their best to impress their visitors and in many cases they definitely succeed in doing so. As a second (out of five) part of our 50 Beautiful CSS-Based Web-Designs in 2006 collection we'd like to present some stunning, but rather unknown dark designs, which you really should have seen if your aim is to develop web-sites in the modern "Look & Feel"-style. Important: if you like this article, please let us know digging it and/or bookmarking it. Otherwise we'll break this series of articles and will offer you another content.

    Read more...

  • Free CSS Layouts And Templates

    By Smashing Editorial, January 12th, 2007 in CSS | 146 Comments

    As a web-developer you don't have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you'll find many templates, which include basic (X)HTML/CSS-markup.

    You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you'll find a list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.

    Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides.

    Read more...

  • Crème de la crème of CSS: List of CSS Galleries

    By Smashing Editorial, December 21st, 2006 in Design Showcase | 95 Comments

    One can discuss whether numerous CSS-galleries challenge our creativity, however they can serve as a quite nice source for inspiration. The galleries of CSS-based designs showcase exemplary design practices, solutions, ideas and templates. Once you have no idea what you should do next with your web-site, it's worth taking a look at some beautiful works - crème de la crème of CSS-designs - out there. Below you'll find a brief overview of css-galleries you can explore inspiration from.

    Read more...

  • CSS: Techniques, Tutorials, Layouts

    By Smashing Editorial, October 25th, 2006 in CSS | 59 Comments

    Since web-development is a quite dynamic field nowadays, new techniques are being developed and updated all the time. A primary example are CSS-related techniques, which emerge almost every day and offer more possibilities for fellows web-developers. We keep an eye on the recent developments and collect new ideas and methods for our readers. A "fresh" round-up of the "fresh" CSS techniques, tutorials and layouts. PS: You might be willing to check out the List of CSS Tools, too.

    Read more...


Page 1 of 212Next »

Advertisement
 

Smashing Jobs

Browse all jobs » Post your jobs now!

Smashing Links

Stay in touch

Popular Posts

All Posts

Follow us on Twitter!
Subscribe to our RSS-feed!

Advertisement

Fresh Bookmarks

22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.

10 New PHP Content Management Systems
All based on PHP.

25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.

Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.

20+ CSS Data Visualization Techniques
Get inspired.

CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.

Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,

Webdesign: Five Minute Upgrade
Making Your Design Pop.

45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.

The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.

Blogroll

  • 9Rules Logo
  • Quicksprout Logo