[et_pb_section fb_built=”1″ _builder_version=”3.22″][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.11″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″]
This post has been republished here from its original source.
As the years come and go, the types technology we use to access the web change and our approach to web design and development changes along with it. What made a good website five years ago does not make a good website today.
When meeting with new clients, one of the first questions I ask is “What sites do you like and what do you dislike?” The answers are all over the board, but what I don’t really see are examples of beautiful, modern websites that represent what it means to have a real online presence today.
It becomes difficult for clients to understand what to expect from a modern website, as most of the sites they are seeing on a daily basis are not the types of sites we are striving to create at MINDSCAPE.
This article aims to describe what I think constitutes a modern website in 2013, highlighting the way web design has evolved over the past several years. My hope is to illustrate to our partners the technology that’s available to us today and why you should be taking advantage of it.
The web no longer lives inside that box on your desk. It’s literally everywhere. We don’t design for your desktop computer. We design for the Internet. That means your phone, your tablet, your television, your computer, etc.
Responsive Design is the practice of creating device-independent sites. These are sites that are optimized for all devices and adapt to provide the best user experience on each of them.
For example, this site will look different depending on the type of device you’re viewing it on. Go ahead, give it a try from your phone and desktop or vice versa.
Forget the fold. Scrolling is back and it’s better than ever.
The fold is something we all used to talk about back in the day. I swear, in 2004 I probably spent two hours every day talking about that stupid fold and trying to cram as much above it as possible.
For those not in the know, “the fold” is the viewable area of your site that gets displayed in your browser window without having to scroll. The old idea was that people wouldn’t scroll to read below the fold. It’s actually a carry over from the newspaper world — the fold was the top half of the paper that was displayed face up on newsstands.
Basically, putting stuff below the fold was career suicide and I saw some really good men go out that way.
Today, the fold doesn’t exist and users are more than willing to scroll. In fact, I’d argue that in the touch screen, tablet and smartphone world it’s much preferable to swipe your finger down a screen than to tap or click through multiple pages. For me, this also carries over to my laptop, where I use gestures on my trackpad and mouse to navigate the same way I do on my tablet and phone.
Check out a few examples of really nice examples of scrolling sites:
Everythings bigger! and Better!
In the desktop world, it’s all gotten bigger. Resolutions are higher, displays are bigger, we can even have our TV be the Internet! We no longer design for 800×600 screen resolutions or even 960×720 for that matter. We design to accomodate all resolutions, and there’s a lot more of it.
Check out a couple examples of sites that are making excellent use of the entire canvas — no matter how large or small that canvas may be.
Content drives design. (for real this time)
Yeah, we’ve been saying “content is king” since 1998, but between you and me, we didn’t really mean it. Content was always secondary to our Flash intros and stock photos. But let’s be honest, nobodyhad good content in 1998.
But today, content really drives the site. And we design for it. In the industry, we call it “content first design” and it basically means we design specially for your content, and not wedge your content into our pretty little headers and footers.
This also means we professionally create content. We don’t have our designers write copy (I’ve written some really terrible copy in my day). We have professionals dedicated to crafting high quality content.
Flash may be dead, but animation is definitely not.
Flash, as an animation tool, is basically dead on the modern web. But animation itself is seeing a resurgancing thanks to jQuery, HTML5 and CSS.
Everything we used to accomplish with Flash back in the day can be done with little more than HTML5, CSS and jQuery. It’s cross-browser compatible and requires no additional plugins to view your beautiful animations.
The Splash Page is back. (kinda.)
Okay, that’s a pretty ballsy statement. I’m not talking about having one obnoxious page dedicated to nothing more than a logo and an “click here to enter our website” button. But in a world were we scroll (or slide) more often than we click, we are seeing these big, beautiful branding elements that occupy the first screenful of content. Basically, the “above the fold” area that I wrote about earlier.
I know, I know… it goes against everything from the general idea of splash pages to the whole “make the logo” bigger craze. But it can be done beautifully and I personally love it.
Here are a few great examples of what I’m talking about:
We used to have like four fonts. Now we have hundreds.
The biggest typography decision of my day 6 years ago was probably “Arial or Trebuchet?” or “Georgia or Times New Roman”. Today, typography is thriving on the web. Thanks to services like Typekit and Google Font Directory, we have access to vast libraries of web-friendly fonts that we can easily integrate into on any of our projects.
Standards really are standard now.
Back in the day, we had these things called standards. They were funny, because they were called standards, but not many people were following them. Today, the standards really are standard. We create accessible, cross-browser sites that don’t rely on proprietary technolgy (ie. we use HTML5, not Flash).
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.27.4″ global_module=”2813″][et_pb_column type=”4_4″ _builder_version=”3.27.4″][et_pb_text _builder_version=”3.27.4″]