Categories
Web Development

Box Model and Floating Elements

In the past years, the box model continuously caused many discussions and frictions among web designers and developers. As an occasional web developer, i used to spend many hours to find a solution for simple problems that i didn’t even bother about in the past….in the past, where web design was about using frames, tables and lots of other old-dated stuff. With responsiveness, adaptability, mobile development a lot of new features of HTML and CSS became available, but browser vendors implemented specifications in different manners and made web development a lot more complicated.

In this article, i would like to point out some important aspects about the use of floating elements and the box model addressing the following (simple) challenges i had way to often:

  • Challenge 1: Parent element of floating elements collapses
  • Challenge 2: Modify the vertically alignment of floating elements within a box
  • Challenge 3: Centering floating elements within a parent box does not work

In the following, i will share and discuss some solutions i collected for these challenges over the years.

Challenge 1: Parent element of floating elements collapses

The problem:

HTML:
<div class="box1">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    float: left;
    margin-right: 0.5em;
}

[..and some formatting of ul, box1, box2..]

The result would look like this:

The parent element “box1” collapses. The desired target situation would look like this:

01-result-snippet-02

There are many solutions across the web shared by various developers i posted my favorites. The ones, that i perceive most elegant.

Solution 1 – overflow property:

HTML:
<div class="box1 wrapper">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    float: left;
    margin-right: 0.5em;
}

.wrapper {
    overflow: auto;
}

[..and some formatting of ul, box1, box2..]

The first solution proposes the use of the CSS property”overflow” with the value “auto” for the parent element. While this solves our problem instantly, a scroll-bar might occur in some cases, which is not desired in all cases. As this is not the stated purpose of the “overflow” property, this solution seems like a hack.

Check out the Fiddle for Solution 1

Solution 2 – CSS micro clearfix:

HTML:
<div class="box1 clearfix">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    float: left;
    margin-right: 0.5em;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

[..and some formatting of ul, box1, box2..]

The second solution proposes the use of a CSS trick. The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher. Known support for Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+. Hence, you don’t need to worry about older browsers failing and it does not use the “overflow” property.

Check out the Fiddle for Solution 2

Solution 3 – inner-block:

HTML:
<div class="box1">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    display: inline-block;
    margin-right: 0.5em;
}

[..and some formatting of ul, box1, box2..]

The third solution transforms the block elements into inner-blocks, which emulates the floating without collapsing the parent element. While inline-block used to make problems across different browsers in the past, it is the most flexible solution (as we are going to see below). However, nowadays it seems as inline-blocks are safe to be used in contemporary browsers.

Check out the Fiddle for Solution 3

Solution 4 – extra clearing element:

HTML:
<div class="box1">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
        <div class="clear"></div>
    </ul>
</div>

CSS:
.float {
    float: left;
    margin-right: 0.5em;    vertical-align: middle;</pre>
<pre>
}

.clear{
 clear:both;
}

[..and some formatting of ul, box1, box2..]

The fourth and last solution presented in this article for the first challenge, uses an extra element within the parent box, which clears the floating to prevent the parent box from collapsing. For dynamic websites an extra element might not always be an option, however an additional css class for the parent box is not necessary.

Check out the Fiddle for Solution 4

Challenge 2: Modify the vertically alignment of floating elements

Having overcome the challenge of floating elements without collapsing the parent element, we consider floating elements of varying sizes.

The problem:

HTML:
<div class="box1 wrapper">
    <ul>
        <li class="float box2" style="height: 30px;">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    float: left;
    margin-right: 0.5em;
    vertical-align: middle;
}

.wrapper {
    overflow: auto;
}

[..and some formatting of ul, box1, box2..]

The result would look like this:

Vertical alignment of the elements does not work. The desired target situation would look like this:

We instantly see, that our first solution for Challenge 1 using the “overflow” CSS property, does not allow the use of the “vertical-align” CSS property. The same applies for the proposed solution two and four. Without using any dirty tricks, i can’t think of any solution to vertically aligning floated elements while using the CSS property “float: left”.

Solution using inner-block:

HTML:
<div class="box1">
    <ul>
        <li class="float box2" style="height: 30px;">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
}

[..and some formatting of ul, box1, box2..]

Vertically alignment works instantly when using the CSS property “display” with inner-block.

Check out the Fiddle for Solution

Challenge 3: Centering floating elements within a parent box

A similar problem occurs, when we aim to center the floated elements within the parent box.

The problem:

HTML:
<div class="box1 wrapper">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    float: left;
    margin-right: 0.5em;
}

.wrapper {
    overflow: auto;
}

ul {
    [..]
    text-align: center;
}

[..and some formatting of ul, box1, box2..]

The result would look like this:

It simply does not work. The desired state is the following:

Similarly to the second challenge, centralizing floated elements is not possible while the CSS property “float” is used to float the elements. You can guess how the solution might look like.

Solution using inner-block:

HTML:
<div class="box1">
    <ul>
        <li class="float box2">One</li>
        <li class="float box2">Two</li>
        <li class="float box2">Three</li>
    </ul>
</div>

CSS:
.float {
    display: inline-block;
    margin-right: 0.5em;
}

ul {
    [..]
    text-align: center;
}

 [..and some formatting of ul, box1, box2..] 

The only solution i came up with, is to again use the “inner-block” for floating the elements.

Check out the Fiddle for Solution

Browser compatibility for the “inner-block” property

As the “inner-block” solution seems to help for all mentioned challenges, we should have a closer look on its browser compatibility.

According to “Caniuse.com”, CSS inline-block is supported fully for all browsers except for Firefox 2, IE 5.5, IE 6 and IE 7.

The CSS property is only supported in IE6 and IE7 on elements with a display of “inline” by default. Alternative properties are available to provide complete cross-browser support. Moreover, the IE 8 has a resize issue with display-inline block.

For more details, please check out the following link.

I would therefore only recommend to use inner-block, if older IEs are not among your target browsers.

Further Reading

Categories
IT Project Management

Rapid Prototyping – Design Process

Websites, Mobile Applications and Graphical User Interfaces (GUIs) directly interact with end users and therefore need to be planned carefully. As the actual layout and design depends on various factors, designers have varying design procedures.

I believe that there is actually no way to standardize a complete process for designing and layouting without loosing some creativity and constraining the minds of designers. A manager of some agency would be looking for standardized processes trying to optimize the process and generating revenues. But there is a clear trade-off to be made between unique passionate design and highly efficient rapid result generation. I personally like the idea of having building block technologies that can support parts of the design process. Depending on the project the screendesigner can simply use pre-defined building block phases in his design process.

In this article,  i try to give an idea about some techniques used in the process of developing software and designing user interfaces and websites.

design-bbs

Wireframes, Sketches, Mockups and Prototypes are technology buzzwords that are often used to create user interfaces that show the end user what the software will look like without having to build the software or the underlying functionality. There are different levels of abstraction and different possibilities to draft concepts for user interfaces and screens, but all share the ultimate goal to improve the actual design process.

Aren’t all these techniques the same?

Terms are used in a confusing manner, actually, most people have a rough idea about the topic and simply mention one or more of these words to sound important. While trying to gather the real meaning of the words i got even more confused. Therefore, i am proposing the following distinctions in my little knowledge network after reading a bit through web resources. I hope it helps you grasp through it..

Sketch

Sketches are not part of  a design process but rather a means of memorizing a quick idea that pops up in somebody’s mind. It is not a visual model and does by no means claim any kind of completeness.

Wireframes

Wireframe are visual models that depict the relationship between information, navigation and user interface elements. Speaking about websites the result is the page layout.  Wireframes are blueprints, they basically represent the skeletal framework of the user interface or website. It answers the question: What does a screen do? not what does it look like. Usually wireframes are part of the design process and get more concrete in several iterations, thus they are used to get clarity on requirements and constraints step-wise.

What do wireframes contain?

  • functionality,
  • behavior,
  • and priority of content

What are not contained in wireframes?

  • typographic style
  • color,
  • or graphics
  • ..

Depending on the level of abstraction or detail, two main classes of fidelity are distinguished for wireframe models. You should however keep in mind that a model is always bound to a purpose. There is no good or bad model, but a purpose-fitting or non-fitting model.

  • Low-fidelity wireframes
    • less detail and quick to produce
    • help a project team collaborate more effectively since they are more abstract
    • UI elements are sample texts, dummy data/pics/elements, symbolic contents
  • High-fidelity wireframes
    • level of detail that more closely matches the design of the actual user interface / website
    • often used for documenting
    • slower creation process

Another distinction can be made among static and dynamic wireframes:

  • static wireframes are rather single independent page layouts or visual models of the UI or website structure (close to mockups)
  • dynamic wireframes are rather functional prototypes, that interconnect single screens with each other interactively (close to prototype in last iterations)

Wireframes are considered a very helpful tool for communication between the different involved actors like designers, programmers, end-user, managers etc. They can further be used for simulation, testing (e.g. usability, functionality, functionality requirements fulfillment), cost estimation, training, code generation.

Mockup

A mockup is a scaled or full-size model or simulation of an object or a design. It is often used to describe an abstract scaffold of a user interface or website. A mockup does not include functionality. Thus, it simulates only the appearance of the original.

There is an often quoted distinction between a prototype and a mock-up.  A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.

Unfortunately, the term is often used a bit wrong in software development, which decreases the differences to wireframes and prototypes. To not confuse all these terms, i suggest to use the term mockup for static high-level wireframes in a very late iteration step. Accordingly, the focus is more on the design and layout aspect. It should already be very close to the final design after a few iterations through wireframes. Moreover, i suggest to cherish the idea of not showing functionality, thus not linking mockups to other mockups or including real data sources and animations.

Prototype

Commonly understood, a prototype is more concrete than a sketch or a wireframe. There is more clairity about requirements and constraints, but the prototype is not the final design. It is a concrete set of defined ideas to be further refined in the final design drafts. Prototypes contain functionality and tend to focus more on usability. They contain interaction or demonstrate functionality rather than pure layout design like mockups.

How does it all fit together?

In my understanding prototyping and mockups can be seen as some kind of wireframe. Thus, wireframes have the broadest definition. I tried to summarize some of my ideas above in the following figure:

 

As is stated above, i like the idea of seeing these techniques as building blocks to help in the communication process with end-users / clients, to meet usability requirements, speed up the design and development process, enable collaboration among designers and software developers and thereby improve quality and reduce costs. A possible way to integrate these building blocks techniques  (as i call them) maybe before actually creating real design drafts (see image below).

possible UI design process
But many people use wireframes also through the whole process until the endproduct is actually delivered as a kind of communication help and documentation that is refined until product delivery. In any case it should be carefully evaluated for each project to what extend these techniques are to be used to not do the same work twice (e.g. refining wireframes parallel to developing the real design).

Alternative rapid prototyping approach: CSS Frameworks

The above introduced techniques are often mentioned in the context of rapid prototyping of websites or applications. The term rapid prototyping actually comes from manufacturing and was applied to software development in a similar manner. It is the same driving force of cost efficiency and process optimization that made the topic popular in webdesin and mobile development.

Wireframes, prototyping and mockups are not the only approach used to achieve this goal. Rapid prototyping with CSS Frameworks is also very popular, as the prototype and the real layout can be developed at the same time:

  • 960 Grid CSS Framework (Link)
    claims to cover the whole design process, but results often look similar (trapped in the grid)
  • YAML (Link)
    more flexibility and easy prototyping with the YAML-Builder
  • YUI Grids (Link)
  • Blueprint (Link)

Well-known software for wireframing

References

  • http://news.softpedia.com/news/KSC-Gets-Orion-Mock-Up-for-Testing-103300.shtml
  • http://bignews.biz/?id=889075&pg=2&keys=sketch-drawing-painting-art
  • http://en.wikipedia.org/wiki/Website_wireframe
  • Web Standards Magazine 03/09
Categories
Web Development

Typography and Fonts in webdesign

Sophisticated, smooth webdesign requires smooth fonts, preferably anti-aliased clear-types. Different Browsers and Operating Systems made it difficult to find a good font, that look smooth and beautiful on all the hybrid systems outhere. In this article, i provide some hints on howto deal with this.

Nathan Olmstead wrote in article about the best techniques for font implementation in webdesign. He introduced four technologies that generally still represent the current possibilities to overcome above described problem:

  • Font Stack
    Describe the order of fonts to use with CSS or HTML
    Due to compability, the result is using the same 8 fonts again, again and again.
  • Image replacement
    Replace a headline by an image with CSS e.g. as a background-image
  • Font Embedding with CSS
    Future techniques for fonts in the web; Guaranteed to display desired font (with css turned on). But be carful not have the rights to use a specific font. Use free/open-source fonts instead.
  • Font Embedding with Javascript
    An alternatice way of embedding fonts; less coding needed.

If you still prefer to use the Font Stack, as decribed by Mr Olmstead in his first paragraph, i recommend the following for a great overview of browser / OS safe font stacks:

Other great articles i found, about hints for embedding own fonts on your webserver:

Moreover, i found a commercial soultion that offers large font collections and all you need to do is to embed some code into the head of your source code.