How We’ll Design and Develop Websites In A Few Years

Posted: 19 Feb 2015 05:30 AM PST

Are you excited about the future of designing and developing websites? Are you looking forward to working with something like flexbox? Maybe it’s CSS masking, filter effects, or blend modes that you can’t wait to use.

Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes

After recording last week’s show on responsive layouts, I started thinking about how designing and developing websites has changed since I’ve been part of the industry these last dozen or so years.

I’d like to talk about a few things on the way and how I see them changing the way we do our work. If you were part of the industry when it shifted from table-based layouts to CSS driven layouts (or even the more recent shift to responsive layouts), you might have noticed those who are first to use these new techniques are often able to use them as a competitive edge.

It probably makes sense to start learning some of what’s coming, if you haven’t already started. Since I’ve been talking layouts, let’s start there.

Improved Methods for Layouts

Floats have been the predominant method for site layout for quite a few years. They’ve been that way nearly all the years I’ve been been building sites. Floats aren’t really an ideal solution, though.

They’re better than what came before, but in all honesty and where layouts are concerned, floats are as much of a hack as tables were. Neither was created with the idea they’d be used for site layouts. Floats are really there to allow text to flow around around other content.

They’ve worked well enough, but they’ve always had problems and some new problems specifically now that we’re working with responsive layouts. Fortunately, new and better things are on the way.

Some of you probably remember an article that appeared on .Net Magazine a few years ago on The future of CSS layouts. The article, now on a new domain, talked about some of what was coming in CSS.

I’ve written about all of these in the past. Check the links directly above if you want the details for how to work with them. Maybe I’ll revisit some to see if and how the spec has changed since I last covered them.

Flexbox is the closest to being ready. It has good support and can be made to work with all the browsers and versions you likely need to work with. It’s a little extra effort for some browsers, but flexbox can work where you need to support it.

I think flexbox is going to replace our current float-based approach to layouts soon, probably within the next year or two. I’m pretty sure the next version of this site will be built with flexbox.

They solve one problem we’re running into with responsive layouts, that of being tied to our HTML source order. With floats, when your layout is a single column, elements will display in the order they appear in the source. Flexbox solves this problem and of course they’re flexible. It’s right there in the name.

CSS multiple columns also has good support if you don’t mind using vendor prefixes. Multiple columns don’t work everywhere. The usual culprits have no support, but every other browser does, again with vendor prefixes.

They’re an easy way to have multiple columns of text without having to build multiple columns in the layout.

I suspect multiple columns will become more popular on wider screens when we have to decide what to do with all the extra space. We’re thinking lean and mean with our content now that we’re thinking mobile first. How do we fill the space on the widest screens. I think multiple columns will prove to be a good solution and the fallback is a single column.

We’re certainly not going to use multiple columns of text on the smallest screens, but I can easily see how, as the layout grows wider to accommodate a wider screen, we’ll use multiple columns to fill the horizontal space

I think CSS grids will prove to be even more valuable than flexbox. I took a quick look a couple of years ago and thought they were very promising. I’m going on memory, but assuming I’ve remembered correctly CSS grids offer everything flexbox does and more.

Once I worked out how to use CSS grids in practice , I could easily look at my CSS and instantly understand how the grid was set up visually in the design.

Unfortunately CSS grids still don’t have much support. IE10+ works with an older version of the spec and I was able to get CSS grids to work in Chrome Canary, but that was it. I’m guessing this is still 5–7 years down the road. I am looking forward to the time when it happens.

Exclusions are what we wish we could do with floats. Imagine having something in the center of a block of text, and have the text flow around it on both sides. That’s one of the things exclusions can do.

Combined with CSS Shapes, they also help us break out of the rectangle. Elements today are all part of the CSS box model which is a rectangle regardless of how an element appears. Create a circle with rounded corners and as far as your other elements are concerned, it’s still a rectangle. Other elements will flow around the rectangle and not the circle.

Exclusions and shapes will change this. The outline of a circle will be a circle and not a rectangle. Exclusions will be fun and useful. I think we’ll all enjoy working with them once we get the chance.

Note: In the recording I mention exclusions as being what breaks us free from rectangular boxes. My memory was off and it’s really the CSS shapes module that breaks us out of the box.

Regions are another layout method, though I’m not sure if we’ll ever see them. There’s little, to no, current support and the Chrome team has no plans to add any. I don’t think Firefox has plans to add regions either, but don’t hold me to that.

Regions are probably not going to arrive. At least it doesn’t look that way.

Graphic Editing is Moving to Browsers

Layout changes aren’t the only changes coming. I think a lot of what we do with graphic editors is moving to browsers.

Whenever I talk about responsive images or images in general, I mention the need to reduce bitmap images on the web. They’ve always been a bottleneck and are usually among the biggest drags on a site’s performance.

I typically suggest we should replace images with code where possible. CSS is giving us more opportunities all the time. It’s moving a number of things we think of as belong to a graphic editor to a browser.

All of the above are possible with code (at least in some browsers). We can’t yet replicate with code everything that a graphic editor can do, but the CSS side is getting better.

It’ll be interesting to see what else comes along and it’s probably good news for anyone making a graphic editor that runs in a browser.

Improved Tools

WYSIWYG tools have existed for a long time. The biggest problem with these tools has been the code they ultimately produce. It’s generally not the most performant code. It’s redundant. There will usually be excess markup and leftover CSS. The tools aren’t good at cleaning up and optimizing.

The tools are improving though. Compare something like Macaw to the first version of Dreamweaver. Compare the latest version of Dreamweaver to its older self for that matter. On the Mac, there’s an app named Hype 2 that effectively replaces Flash. Adobe’s own Edge does the same. Adobe is reworking a lot of their tools now on Creative Cloud.

The tools are getting better. I’d argue that in time hand coding will only be practiced by a few. It will be there more to fix and maintain sites and hand coders will be the exception rather than the rule.

If you don’t believe me ask the programmers you know how many of them work in assembly language or directly in machine language. Ask them when was the last time they used punch cards to write programs. Things change. They evolve and become more accessible to more people. There are more visual interfaces involved with programming than there were years ago.

WYSIWYG editors make developing websites more accessible to more people. It’s the same as what’s happened in programming and web development tools are likely to evolve in a similar way.

New Processes and Deliverables

Processes are something that are, or at least should, always be evolving. They’re often different for different people and teams, projects and clients.

We’ve gone through a major change the last few years with the coming of responsive layouts. I think some of the process changes are settling a bit, but our processes will continue to evolve.

Here are few things that are either part of your process now or will be before long.

Version control everywhere
More agile development
That’s modular and iterative
Deliverables in the browser
More prototyping

We’re realizing the connection between design and development and that both should be working together throughout the process instead of design coming first and development coming after.

New Devices

What about new devices like smartwatches? Will they gain mass appeal? I have no idea, but assuming they gain enough appeal what will it mean for how we think about websites?

I saw an article recently about designing websites so they can be viewed and interacted with on a watch screen. I’m doubtful.

I’m not so sure looking at a website is going to to be something we reach to smartwatches for, certainly not websites as constructed today. Even the narrow layouts we’re creating for phones will be too big to see on a watch screen.

A smartwatch doesn’t say keyboard to me. It suggests more audio for input and maybe a handful of important gestures. I’m sure there are more input methods I can’t yet see or imagine.

I can see how we’ll be thinking very different about interfaces in a few years, though. If you think designing and developing for smart watches will be more than five years in the future let me remind you the modern smartphone, with the introduction of the iPhone is barely eight years old.

Content

How will we think about content in the future? Will it still be in the context of a page or screen? Will it be something different.

How we’re thinking about content is already changing. Content will become more modular. We’re asking if content needs to be on every device. If so, does it need to be in the same form? Maybe we have short, medium, and longer versions of some content for different devices.

Does content need to be organized the same way on every device? Probably not.

More sensors will ideally help us better understand a visitor’s context beyond the resolution or orientation of their screen. I’ve seen ux designers talk about moving from personas to use cases and workflows.

There will probably never be a single answer to some of these questions. Perhaps more personalization is the answer. Search has moved this way and maybe websites need to as well in order to accommodate all the differences in people and contexts who visit our sites.

Designing Systems

I think this is good way to think about future of web design. We aren’t going to be designing pages as units and then connect those pages through navigation and other links across the site.

We’re going to be designing systems that are capable of grabbing smaller units (chunks) of data and information and combining them in the “best” way for a particular context.

I can see personalization here too. Perhaps this is where we’re heading, systems built to reconfigure themselves based on the desires and conditions of the person interacting with the system.

The future of web design seems more about designing systems that can build “pages,” (for lack of a better term) on the fly from modular pieces of content. It sounds challenging, but also interesting.

Closing Thoughts

It might not feel like it as you’re reading or listening to this, but odds are how you design and develop websites in five or ten years time will be very different than how you do it today.

How we do it today is very different than how I was designing and developing sites just three years ago, not mention another five to seven years before that when I was moving from tables to CSS driven layouts.

In the dozen or so years I’ve been creating websites I’ve completely reworked how I build sites at least twice. It stands to reason that the next dozen or so years will bring even more change.

I haven’t even mentioned mobile apps. Where will apps fit in all of this. I don’t think every site needs an app today, but perhaps that will change in the future.

It’s likely that a website won’t mean quite the same thing it does today. It may not be the end all and be all to someone’s online presence. It may be just one way to interact with information, data and functionality.

While some of the things I’ve talked here about are still a few years away, a lot you can work with now and there’s no time like the present to start learning and start asking questions. Think about where the industry is going as opposed to being comfortable where it is.

Let me remind you again that people who are ready when technology is ready often gain a competitive advantage and can possibly make a name for themselves at the appropriate time.

Download a free sample from my book Design Fundamentals.

The post How We’ll Design and Develop Websites In A Few Years appeared first on Vanseo Design.