The Problems With Modern Web Design

Just recently, I made myself research the top web designers of our age.  Having an art history past, I am used to having artists to look up to or gain influence from.  I hadn't really thought about it until the other day when I asked a visiting graphic designer who he gets the most influence from.  And then it hit me,  there's gotta be some web designers that are making most of the content or, atleast, analyzing it.  And then I came across Trent Walton.

I just finished reading Trent Walton's post on "Device-Agnostic" web design and I couldn't agree more with everything he said.  We are in a point in time where designing for the web isn't as easy as it once was.  2.4 billion people are using the web and a lot of them are from developing countries.  This means the web is being accessed by an infinite amount of screen sizes, operating systems, devices, software versions, and connection speeds.  Thus, designing for the web has definitely become a challenge, but the thing to do is focus on the harshest conditions first, and then go from there.  Walton addresses four topics:

Hostile Browsers

Hostile browsers are a real problem.  People are using all sorts of browsers to view the web.  This includes browsers that are a few updates old to browsers that aren't even supported anymore, like the recently discountinued internet explorer 6 (thank god).  Other situations can occur such as javascript timing out or a mobile phone temporarily losing service.  Walton explains that we need to design using the progressive enhancement method.

According to wikipedia,

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

This makes a lot of sense to me, but I am unsure how to provide different experiences based on who interacts with my content.  But I guess advanced browser software can be considered up to date modern browsers and everything beneath that mobile quality.  If that is the case, then designing for mobile first is definitely the smartest thing to do.  I am currently designing a mobile application using the Bootstrap framework.  Bootstrap is advertised as a mobile-first framework and I think there are a lot more of these frameworks popping up. Anyway, while the framework is advertised as a mobile framework, it provides an equal experience on a desktop.  Bootstrap is pretty popular as well, which means more people are designing in this modern way.

Tiny Screens

According to The Verge, mobile and tablet sales are far exceeding desktop sales.  Again, this means that mobile should be the first consideration when designing for the web.  On top of this, the experience needs to stay the same between all screen sizes.  Pages should not act wonky on mobile, fonts should look the same, and interactivity shouldn't be affected.  Furthermore, mobile-sensitive topics like data plans should be considered.  Having large images and HD video can really eat up a data plan.

Another problem is that sometimes the mobile website doesn't have all of the features that the desktop version has.  This is really annoying if you have to visit the desktop version of the site to do something.  This brings up the question: if it doesn't fit or work for mobile, why does it fit for desktop?

Slow Load Times

Nothing kills an experience like slow load times; we don't have time for it.  As designers, we are accustomed to building websites on fast servers around the office or at school.  But in reality, most of the web doesn't have the same quality of internet speed as we do. Since 2010, the average page size has doubled.  This is becoming a big problem, especially if we are in the mindset of designing for mobile first.

The problem lies within us, the web designers.

We need to be aware that everything we add to a page is adding more weight in file size.  We need to question ourselves: is what I just added valuable to the website?  Overall, just be more aware of files sizes.  You can fix this by minifying your code, using low quality jpgs over pngs, and when applicable, using code in the place of images.

Touch Inputs

We need to design with a fat-finger approach.  On desktop, links are often really small and only the size of the text that links. For mobile, buttons need to be a big size so that fingers can accurately press them. Design should be consistent across everything, so this needs to be something to think about.

Conclusion

In 2014, simply coding a site with a responsive framework doesn't cut it anymore.  Mobile pages need to work just as well as the desktop version.  Having a responsive site doesn't eliminate every problem: images still need to be compressed, hd videos shouldn't be on mobile pages, and specific phone orientations shouldn't be required.  In the end, it might be easier to design your website as if you are designing for mobile.  It really should be the first thing you consider when designing for the web in 2014.