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.

Twitter Gets A Familiar New Look

If you haven't noticed yet, your Twitter profile page has received a makeover.

About a month ago, Twitter announced plans to roll out a new profile page that would make profile pages represent their owner's personality even more.  If you think about it,  the old Twitter profile page was pretty bland and generic.  However, their new page is eye-catching, but it does resemble something.  Twitter perhaps received some inspiration from Facebook because the two profile pages look pretty similar now.  They both have a profile picture nested in the top left corner along with a large cover photo that stretches across the entire top of the screen.  Below all of this rests content.

The new profile page

For Twitter, this now includes best tweets, pinned tweets, and filtered tweets.  Let's check them out!

Best Tweets

Notice the size difference.  The one on the bottom is part of the new best tweet feature

If you take a look at your new profile page, you might notice that certain tweets are larger than others.    This is because they have been labeled as a best tweet.  According to Twitter, the tweets with a lot of engagement will appear larger on your profile page, which makes it easier to find the most important or interesting content.

Pinned Tweets

They sit at the top of your profile page

Have a tweet you are super proud of?  Or perhaps a celebrity interaction?  You can now pin tweets at the top of your profile page so that others can quickly see them.  Ideally, you will want to pin a typical tweet so that new followers will know what you are all about.

Filtered Tweets

Twitter understands the importance of photos and videos.  They are visually stimulating and our eyes automatically fall on pictures over text.  If you want to just look at tweets that have pictures or video, you can now filter tweets on your timeline.  Other options include view all tweets and view tweets with replies.

All of this is a lot to take in.  If you don't want to switch right away, Twitter is not pushing the switch just yet.  You can demo these new features, but they won't stick until you tell Twitter that you are ready.  With that said, all of these new features improve an already amazing web experience.  I think I'm finished talking, so if you haven't tried out the new Twitter, visit your profile page and try it out!

How to Write Better Code

Writing code is all about readability.  Even if it's just for you.  When writing code, using some best practices and standards will make your life a lot easier when trying to fix errors, stay organized, or when working with teammates.

1. Use Comments to Help Readability

Comments within code are useful for several reasons.  First, comments are a great way to type out in a conversational language what the code is doing.  Second, they are a great way to organize your code.  If you're scrolling through a long piece of you, it's a lot easier to look for comments than a particular line of code; they stand out more.  Third, it's a great way for team members to understand what you were doing or thinking as well.

2. Use a Standard When Indenting

When writing code, make sure to keep a standard throughout all of your code.  When you indent a certain way, do it for a similar piece of code later on.  It helps improve readability, audience understanding, and it might even help you spot errors.

3. Use a Standard When Naming Files, Classes, Etc.

Take a look at the code in green.  It's in camelCase.

There are several ways to name files and it really just boils down to what you're comfortable with.  A lot of people might be used to doing something like this: Desk_Talk_Blog or DESK_TALK_BLOG, or Desk-talk-blog.  But for me, I like to use a modified version of PascalCase called camelCase.  I will keep the first word lower-cased and for the second word I will capitalize the first letter and so on.  This is what it ends up looking like: deskTalkBlog.  So why do this?  Again, it helps with readability and it just gives you some organization.  I recommend doing it throughout your website down to the folder directories.

4.  Avoid Deep Nesting and Keep Line Length To A Minimum

Don't do this

It's easy to get carried away with nesting.  It is usually a great way to keep organized and matches a standard when indenting, but sometimes it is totallly unneccesary and just adds difficulty when trying to read it.

Furthermore, keep the length of your lines short.  It is so annoying when you're trying to read a line of code and you have to scroll to the right to continue reading it.  There's a reason why newspapers use multiple columns rather than one column; it's much easier to read.

That's it for now.  These tips have mostly been focused on HTML/CSS, but they can extend how to other languages as well.

Web Design Basics

I'll just begin by stating it.  Great web design is tough.  It's a delicate balance of pleasing aesthetics and usability.  You could have an extremely impressive and beautiful website, but if users struggle to navigate through the content, then you have failed as a web designer.  Like with any form of art, there are some basic principles behind the design that have existed for decades.  I really wish to say centuries here, but web design has only existed for the past two decades or so.  However, web design is pretty much art; the principles behind art have existed since the beginning of time.

Anyway, let's not get too caught up in being correct with our wording here.  There are some basic principles behind web design.  Follow these principles and you should be able to make a great interface and web experience (UI/UX).

1. KISS (Keep it simple, stupid)

Simple, flat design

Play KISS music on page load.  Actually, that is an extremely bad idea.

Simplicity is really overlooked with beginning designers.  It's easy to get caught up in adding flash and thrill to a design, but really it's just unnecessary junk that is taking away from your work's usability.  Ideally, beginning artists or designers should work with minimalism for a large portion of their learning experience.  If you are able to make an attractive design with minimal materials/shapes/lines, then you have the potential to be a great designer.  But back to web design, keeping it simple will definitely help make your site easily navigable and it will just flow so much better.

2. Don't Make Users Think

Yeah, I'm going there with the stock photography

This is a continuation of KISS.  Making users have to think about how to use your website is going to cause some negative thoughts about your site, which could potentially harm your brand.  Having a really complicated design might look great, but it could cause problems in some users.  Just because you think something works well doesn't mean everybody else will have the same opinion.  You have to remember, the web plays host to all sorts of skill levels.

3. Remember Conventions

This is like a design principle within a design principle.  Following conventions works because, well, it's a convention; it's just the way something is usually done.  For example, when first loading a page, most users' eyes will travel to the top left of the page because we have been taught to read from left to right.  Most people expect the site's logo or home link to be placed there.  It's really something we are so used to and we don't have to think about it.

Explore a handful of websites and pick up some of the conventions they are utilizing.  However, this doesn't mean you have to play by the book 100%.  Deviating from the norm is actually a good way to explore your creativity, but ignoring several design conventions in doing so could lead towards poor usability.  In other words, the sites that deviate from the norm still apply some of the basic web design conventions.

4. Stay Consistent

For some, a website is just another tool to represent a brand or an idea.  These brands have already made decisions for their color schemes, typography, etc.  These visuals stay consistent across all forms of media and it's comforting because we can still recognize it as the original brand.  Your website shouldn't be any different.  Using 15 different fonts, different spacing rules, different layouts, alignments,  or pages that don't look similar to the original index page can cause users to question if they are even looking at the same website.  It can cause usability issues as well. You want to stay consistent with your page design.  You are creating a set of rules within the first few seconds of a page visit.  Users will understand these rules quickly.  But if you can change the way the site works or feels, you are really causing some problems.

5. Get Inspiration/Explore!

There is no better way to learn than by learning from your peers or competitors.  Visit as many websites as you can within your site's field and see what trends are popular, what conventions the sites share, what layouts are working, and what doesn't work.