Flexbox explained by Thomas Duda

Flexbox: The future of CSS and the demise of frameworks?

 Flexbox: A useful CSS tool or a fad?

world wide web consortium
world wide web consortium W3C sets the standards for developers of the WWW

For a number of web developers Flexbox is a word they ignore and continue with their framework or something they put off learning.  It is only recently that I put in the time to explore it and get a grasp of what it’s. Understanding the ambivalence the web design community has towards this part of CSS3 requires a little history.

A brief history of web and graphic design

In the 1990’s graphic design and web design shared a common attribute. They were both pixel perfect.  The resolution issue with computers such as 640 x 480(early 90’s), 800 x 600(mid 90’s) and 1024 x 768(late 90’s) pixels. The web designer would design with a particular resolution in mind. The print designer also would choose a static resolution and the dimensions would  be set for printing. Fixed units of measurement; such as, inches, centimeters and pixies were all that the print designer and the web designer had to be concerned with.

The split of print design and web design

Print design did not change and it is still common to venture into a print studio and specify the dimensions in which a particular graphic should be output. However, the internet and computing devices have changed drastically.

Up until the early 2000’s there were Desktop computers and Laptop computers and there were basically three resolutions that the screen was set to. Small (640 x 480 pixels), (800 x 600 pixels) and (1024 x 758 pixels). A design choice was usually would shoot for the middle and websites usually filled the entire screen or would be centered should the screen be larger then the exact width.

Times have changed. Websites were now in demand on different mediums such as: big screen TV’s, Tablets and smart phones, desktops, laptops and sometimes even watches. A website designed for a computer would look ridiculous on a cell phone where the user would continuously scroll horizontally to view all of the content. On a large monitor, a website would look like a vertical line splitting center of the screen.

Web designs had to adapt to the vast number of mediums that keep coming at the consumer. The answer is “responsive design

Therefore, Print designers still have their inches, centimeters and pixels.

Web designers have entered into the age of relativity. No, nothing to do with Einstein, time and space, E=MC^2 or not even aunts cousins and uncles.

I am talking about relative units of measurement. Web designers now rely on percentages, number of units relative to other units (called em’s) and a whole host of other terms that is beyond the scope of this article.

The Birth of Responsive Design

Earlier versions of CSS up to and including 2.1 were concerned with a fixed-size layout. Mobile phones and later smart phones were everywhere. For the first decade of the new millennium no two browsers were able to agree on standards and finally CSS3 was officially released in 2011

From 2011 till today internet traffic has seen an increase to over 50% of all websites viewed on a medium other then a computer.  CSS3’s answer is called media queries. basically new style rules are created depending on the size of the width of the view-port. These are placed within the @media screen and(max-size/min-size x number of pixels){.some-class{ properties: value;}#some-id{properties: value;} …ad nausium}

Unfortunately, many designers find it tedious using media queries. Rewriting rules for many screen types, especially for  large websites, can be quite time consuming.

Frameworks

Front-end frameworks (also called grid systems) have been and continue to be very popular. Twitter’s Bootstrap and Foundation have the largest user base.  Frameworks have pre-written: HTML CSS and JavaScript code.

Frameworks have a very low learning curve. A complicated layout can be done as simpily be done by placing different classes in the HTML tags. Usually one for a cell phone, tablet and a computer. CSS and Flexbox does not provide that level of simplicity. In fact, Frameworks are written in HTML, CSS and JavaScript. However, frameworks have one major problem. It is called overhead. Huge style sheets and JavaScript libraries get loaded along with a website. Load-time is critical for any website as if a user can’t get information within seconds, they will just go to the next link.

Internet Explorer. Friend or foe of the internet?

Internet Explorer is a hurdle that web designers have to cross when considering browser comparability. It has lagged behind Chrome, Firefox, Opera and Safari even before the need for responsive design.

Unlike other browsers that use open source rendering engines(Chrome – Webkit, Firefox – Mozilla, etc) Explorer uses a proprietary engine, relies extensively on the archaic active-x control and comes with the operating system. Useful updates are few and far between and Microsoft does not care about the W3C standards. Why should they? IE comes with the windows operating systems, so many newcomers to the internet think that IE is the web.

Also, since Internet Explorer comes pre-installed across all Windows operating systems. It is frowned upon by many office managers to download other web browser software due to security issues and the predominance of viruses. CEO’s want to keep things simple and Explorer is the perfect marriage between Microsoft and the rest of the corporate world.

Internet Explorer and Flexbox

Flexbox is new. Unfortunately, the web design community awaits Internet Explorer 8 – 11 to lie in the virtual casket before web designers can use Flexbox with confidence.

Nevertheless, Flexbox is extremely important to learn and use. However, until the dirges start playing for the archaic IE and Microsoft has to conform to the necessary W3C standards we may just need to use a lot of browser prefixes in our code to tell our style sheets when Explorer is watching.

Duda

About the Author

About Thomas

Thomas Duda is a web designer who lives in Bakersfield, CA with his wife and dogs. He is also interested in: Blogging, Writing, Vaping, Fishing, Swimming and Drawing.

Leave a Reply