Posts Tagged ‘Layouts’.
We are pleased to present below all posts tagged with ‘Layouts’.
We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.
We are pleased to present below all posts tagged with ‘Layouts’.
CSS grid frameworks can make your life easier, but they're not without their faults. Fortunately, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently plaguing CSS grids.
The biggest complaint I’ve heard from purists since I created The 1KB CSS Grid two years ago is that CSS grid systems don’t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add
.grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.
negative margins. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.
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.
Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.
According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.Read more...
To get you really excited about CSS3, last month we announced the CSS3 Design Contest and encouraged designers to experiment and get creative with CSS3. As expected, we have received many creative and original submissions. To choose the winners of the contest, we considered the originality of the technique or approach and its uniqueness. The idea mattered more than the execution.
This process has taken a lot of time as it wasn't easy, because we received quite a few creative submissions: however, a decision had to be taken and so we thoroughly went from one competition entry to another. And the decision was made. So today, it's time to announce the winners and present the submissions to the contest.
Please notice that the contest results are experimental and may not necessarily look or work alike in different browsers. The techniques presented below should be considered as innovative, creative approaches showcasing what can be achieved with pure CSS3 and a bit of creative thinking. Please feel free to build upon these ideas to create further techniques and design solutions and make them available for the design community.Read more...
In Modern CSS Layouts, Part 1: The Essential Characteristics, you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today's most successful CSS-based web pages.
Just as in the previous article, we're not going to be talking about design trends and styles; these styles are always changing. Instead, we're focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we'll indicate which of the five characteristics it helps meet. To keep this shorter than an encyclopedia, we'll also just cover the basics of each technique, then point you to some useful, hand-picked resources to learn the full details.Read more...
Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.
This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
You may want to look at similar CSS-related posts that we published last months:
Now is an exciting time to be creating CSS layouts. After years of what felt like the same old techniques for the same old browsers, we're finally seeing browsers implement CSS 3, HTML 5 and other technologies that give us cool new tools and tricks for our designs.
But all of this change can be stressful, too. How do you keep up with all of the new techniques and make sure your Web pages look great on the increasing number of browsers and devices out there? First you'll learn the five essential characteristics of successful modern CSS websites. In the second part of this article, you'll learn about the techniques and tools that you need to achieve these characteristics.
We won't talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we'll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS Web pages. But other characteristics of modern CSS Web pages are new or more important than ever. A modern CSS-based website is: progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich.Read more...
HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the 'best markup' trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn't get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there's no reason not to start using it right now. After all, time's proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That's were Progressive Enhancement and Graceful Degradation come into play.Read more...
In May we announced the Typographic Layout Design Contest that aimed to collect beautiful typographic (X)HTML+CSS-based layouts created by the design community and release them for free as a gift for the web design community. The response was overwhelming and we really had a hard time going through the designs, analyzing them and deciding which templates deserve the awards. Unfortunately, many templates were just copies of the current designer's blog and some weren't related to typography at all. So in the end many templates didn't make it to this post.
However, we did receive a number of brilliant typographic templates that we are happy to release for free download and personal and commerical use as the gift for the web design community. We hope that these templates will help you to improve the quality of typography in your future designs!Read more...
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.
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: