Discover Yahoo! With Your Friends

Explore news, videos, and much more based on what your friends are reading and watching. Publish your own activity and retain full control.

To get started, first

YOUR FRIENDS' ACTIVITY

    3 Mistakes Web Programmers Need to Stop Making

    Jonathan Goldford is a partner at JG Visual, an Internet strategy company that works with organizations to develop and implement their online presence. You can connect with Jonathan on the JG Visual Facebook page.

    Sometimes as programmers, we forget that 99.9% of the population doesn’t care how a piece of text, a button, an image or a video ends up onscreen. Most people just care that it’s fast, easy to use and gives them the content they want. Otherwise, they get upset -- and rightfully so. Here are three common mistakes we programmers make, and what we can do to fix them.

    [More from Mashable: How To Take Control of Your Next Job Interview]


    1. Forgetting About Conventions


    Ever since they started using the Internet, users have been trained how to interact with a website. Therefore, they often get frustrated when websites don’t meet their expectations. Here are some examples.

    • They hover over an object they think is clickable, but become confused when they see an arrow instead of a hand pointer.
    • They click on blue, underlined text, but find it’s not a link.
    • They click on the logo in the top left, believing it will return them to the homepage, only to find it takes them nowhere.

    Web design doesn’t always meet our expectations. However, developers and designers should always maintain certain rules to avoid user confusion. Here are three.

    [More from Mashable: Top 9 Thanksgiving Apps for iPhone]

    Clickable Elements Should Have the Pointer on Rollover Everything clickable should switch to the hand pointer when a user hovers over it. You can accomplish this using simple CSS. The code would look like this

    div:hover { cursor: pointer; }

    Style Links Appropriately Links should look different than regular text, and should be underlined within a page’s main content. If you really want to stick with convention, make them blue -- research found users engage most with blue links.

    Make Logos Clickable The logo in the header of your website should be clickable, and should take the user to the homepage. This is pretty simple: Just wrap your logo in a tag.


    2. Creating Slowly-Loading Websites


    Users hate slow websites. Studies have shown that 40% of users will abandon a website that takes more than three seconds to load. Here’s how to avoid common speed mistakes by new programmers.

    Resize Images Outside the Browser New programmers will sometimes use a very large image, let’s say 600 pixels wide by 600 pixels tall, but will set the height and width so the image shrinks to the desired size. They use the following code.

    There are two problems with this method: First, the full image still needs to load. Typically, bigger image files mean longer load times.

    Second, shrinking an image using the height and width attributes can render a photo awkwardly, causing the browser to display a photo not nearly as clear as it would be were the image sized 200 x 200 pixels.

    To fix these issues, resize and compress images in an editor like Photoshop or Gimp. Then code the image like we did above. Try to use a tool like Photoshop’s Save for Web & Devices to further shrink the file size.

    Load JavaScript in the Footer Many programmers unnecessarily load all the page’s JavaScript files in the head tag. This stalls the rest of the page load. In almost all cases, except for JavaScript critical to user interface navigation, it’s okay to load script in the footer. Then the rest of the page can load beforehand. Try this code.

    Rest of the page%u2026

    Load CSS Externally Sometimes new programmers load CSS on each individual page using inline styles or an internal stylesheet. For inline styles, code looks like this.

    Hi Mom!

    And for an internal stylesheet, you’d most likely see this code in the head tag.

    You should almost never use CSS in the page that holds your html. Store it externally using code like this.

    There are two advantages to loading CSS externally: First, the user’s computer will save the external stylesheet to be used on every page, instead of retrieving the same styles over and over. This greatly speeds up load time. Second, using an external stylesheet is much easier to maintain. If you need to change the font size of your website’s paragraphs, you’re able change it in one place, without having to access each individual html file. Learn more about good CSS practices at CSS Basics.


    3. Not Accounting for Potential Backend Changes


    Most programmers nowadays are using a content management system like WordPress, Joomla or Drupal to build their websites. This is great because it gives website owners the ability to make changes and updates.

    The problem is that a lot of developers only program for a website’s content at launch time. For example, at launch a developer may only create CSS styles for website headings 1, 2 and 3. What if two months after the website’s launch, the communications director decides to set some text to heading 6, since that’s an option in WordPress’s format? That decision would revert to the default styles of the browser since the developer never styled for it initially. Here is how to avoid this situation.

    Include Styles for All the Common Tags To make sure that the design of your website remains consistent with any backend formatting, programmers should include styles to handle the following html tags.

    • Body ()
    • Heading 1, 2, 3, 4, 5, 6 (

      ,

      ,

      ,

      ,

      ,
      )
    • Link ()
    • Paragraph (

      )

    • Address (
      )
    • Preformatted (
      )
    • Strong ()
    • Unordered list (
        )
      • Ordered list (
          )
        1. Quotes (
          )

      It’s best to check the WYSIWYG that your website owners are using to make sure you have all the appropriate tags covered.

      Basic styling isn’t the only opportunity for your website to break down. Also make sure to prepare for large image uploads and for copy/paste from Word. Although items like these can seem trivial, educating your website owners about how to add content can make all the difference.


      You’re Smart, But It’s Hard To Remember Everything


      The mistakes listed here have nothing to do with a developer's intelligence. Like most jobs, things fall through the cracks, especially when you’re just getting started.

      Do you agree with the items listed above? Are there any others we should have included?

      Image courtesy of Flickr, ...Tim

      This story originally published on Mashable here.

    What do you think?

    Do you think Mark Zuckerberg is a good CEO for Facebook?

    I don't think so He's perfect for the company
    60%

    13,621 people have answered this question.

    40%
    Loading...
     
    • Brandon  •  St. Cloud, United States  •  6 mths ago
      Tee hee, I find it ironic that the article didn't get set to an unparsed format.
    • Randolph  •  6 mths ago
      1. using popup windows
      2. using popup windows
      3. using popup windows
    • Scott  •  Canal Winchester, United States  •  6 mths ago
      How about not proofing your page in the common web browsers? If you fail to do this things like imbedded code my not be displayed or unclosed tags might make the page look like it was written by a hack, just like this article.
    • peppy  •  6 mths ago
      HAHA! Funny how Yahoo's web programmer screwed up on Step 3 and forgot to close the HTML Bold statement: BOLD . Now the rest of the article is bold!
    • Larry  •  6 mths ago
      You left off the web designer/developer that thinks you can maintain the same GUI for web/phone apps. So, instead of showing 1 page to get all the data, it takes 10 pages with lots of buttons. I told the project/business manager overseeing he's an idiot.
    • Damn You  •  6 mths ago
      We are now at the stage of programming crybabies...
    • RPJD  •  Dublin, Ireland  •  6 mths ago
      I'm wondering if the online editor saw this article b4 it was published? It's doubtful by the looks of it.
    • Anyonesane  •  Washington, United States  •  6 mths ago
      Prime error: Checking for the type of browser (Yes, Yahoo! that means you). Don't code javascript for specific browsers. Check for functionality, and if the browser supports it all is well; otherwise, code an alternative. Stop telling me I'm not using Firefox or IE.
    • Lorili  •  Pleasanton, United States  •  6 mths ago
      That what you get when you make software development a low wage job and treat developers like expendable #$%$
    • Internal Server Error  •  6 mths ago
      Nobody mentioned all the exceptions you need to make for Internet Explorer.
      If IE would go away, it would be a better workplace for every site developer.
      Aside from that, this whole article is a bit retro.
    • SpiLLeR  •  Pleasanton, United States  •  6 mths ago
      The phone company love this one: links for something specific like "Rates" or "Unsubscribe" which just returns to the top level--and you just went through 5 layers of menus to get to "Rates" or "Unsubscribe". No wonder these guys started Dilbert.
    • biosumthing  •  Lexington, United States  •  6 mths ago
      I love it!!! Thanks for the post. I'm the Creative Director of a design firm in Lexington, Kentucky and have a BFA in Graphic Design. All of the things you mentioned above are things most good designers do account for and it's really a hack off that most designers in general don't care about end-user experience when it's their job to do so in the beginning when they write and sign their proposals.

      We use a specific group of hosts that are fast, we stay way away from GoDaddy, all site designs and their functionality are reviewed and checked in every modern browser, all images are created at their on-screen size using Photoshop and all JavaScript is compressed. Oh, and we use a custom CMS that is designed for end-users with no knowledge of HTML or code. Can't go wrong...

      I do however despise Wordpress. It's an outdated CMS (in my professional opinion) that places terrible strain an every server to which it's loaded and people simply don't understand the entire left column. Way to go Wordpress for being asenine. I would steer very clear of this application. It's a blog and not a website CMS. It's even in the company's title - Wordpress Blog.

      Custom development comes from experienced designers who have the client and their target market/audience in mind. This means that simplification of already widely utilized conventions and foundations (like the internet) are more than warranted and required, regardless. Sadly very few companies can truly attest to care about others after the "work" is complete.

      Tim Raymer, Creative Director
      Fusioncorp Design Creative Solutions
    • bobby  •  Climax, United States  •  6 mths ago
      what about the constant "Server Error" and the location pop-up that keeps making you choose the location every time you post? What about treating your employees like expendable "human resources", eh yahoo?
    • peppy  •  6 mths ago
      HAHA! Funny how on Step 3, Yahoo's webmaster forgot to close the bold statement , which screwed up the rest of the article with bold text!
      • DustinU 6 mths ago
        This is function of the content creator and the content management system... what you think every page on Yahoo is created by hand?
    • DustinU  •  Tucson, United States  •  6 mths ago
      Wow... this is so like 1990... who the hell is this guy?
    • peppy  •  6 mths ago
      HAHA! Funny how Yahoo's web programmer screwed up on Step 3 and forgot to close the HTML Bold statement: . Now the rest of the article is bold!
    • NSWG-ST6  •  6 mths ago
      And get rid of all the stupid pop-up ads and the crap that Yahoo sticks at the bottom of it's pages that slow the page load down a lot.
    • NSWG-ST6  •  6 mths ago
      Also, how about getting that Post button below to work properly - shouldn't have to click it like 3 times to get it to work.
    • Frank Bacon Pastry  •  6 mths ago
      Good Job.
    • me  •  Dallas, United States  •  6 mths ago
      i can think of a whole more
    [ [ [['A picture is worth a thousand words', 5]], 'http://news.yahoo.com/why-facebook-bought-instagram-4-theories-160400376.html', '[Related: Why Facebook bought Instagram: 4 theories]', ' ', '630', ' ', ' ', ], [ [['He was in shock and still strapped to his seat', 9]], 'http://contributor.yahoo.com/join/yahoonews_virginiabeach', '[Did you witness the jet crash? Share your story with Yahoo! News]', ' ', '630', ' ', ' ', ], [ [['A JetBlue flight from New York to Las Vegas', 3]], 'http://yhoo.it/GV9zpj', '[Related: View photos of the JetBlue plane in Amarillo]', ' ', '630', ' ', ' ', ], [ [['Dick Clark', 11]], 'http://news.yahoo.com/photos/dick-clark-dies-at-82-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/a/p/us/news/editorial/c/21/c217c61aa2d5872244c08caa13c16ec5.jpeg', '500', ' ', 'Reuters', ], [ [['the 28-year-old neighborhood watchman who shot and killed', 15]], 'http://news.yahoo.com/photos/white-house-stays-out-of-teen-s-killing-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/cv/ip/ap/default/120411/martinzimmermen.jpg', '630', ' ', 'AP', ], [ [['Titanic', 7]], 'http://news.yahoo.com/titanic-anniversary/', ' ', 'http://l.yimg.com/a/p/us/news/editorial/b/4e/b4e5ad9f00b5dfeeec2226d53e173569.jpeg', '550', ' ', ' ', ], [ [['He was in shock and still strapped to his seat', 6]], 'http://news.yahoo.com/photos/navy-jet-crashes-in-virginia-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/cv/ip/ap/default/120406/jet_ap.jpg', '630', ' ', 'AP', ], [ [['xxxxxxxxxxxx', 11]], 'http://news.yahoo.com/photos/russian-grannies-win-bid-to-sing-at-eurovision-1331223625-slideshow/', 'Click image to see more photos', 'http://l.yimg.com/a/p/us/news/editorial/1/56/156d92f2760dcd3e75bcd649a8b85fcf.jpeg', '500', ' ', 'AP', ] ]
    [ [ [[' the 28-year-old neighborhood watchman who shot and killed', 4]], '28924649', '0' ], [ [['because I know God protects me', 14], ['Brian Snow was at a nearby credit union', 5]], '28811216', '0' ], [ [['The state news agency RIA-Novosti quoted Rosaviatsiya', 6]], '28805461', '0' ], [ [['measure all but certain to fail in the face of bipartisan', 4]], '28771014', '0' ], [ [['matter what you do in this case', 5]], '28759848', '0' ], [ [['presume laws are constitutional', 7]], '28747556', '0' ], [ [['has destroyed 15 to 25 houses', 7]], '28744868', '0' ], [ [['short answer is yes', 7]], '28746030', '0' ], [ [['opportunity to tell the real story', 7]], '28731764', '0' ], [ [['entirely respectable way to put off the searing constitutional controversy', 7]], '28723797', '0' ], [ [['point of my campaign is that big ideas matter', 9]], '28712293', '0' ], [ [['As the standoff dragged into a second day', 7]], '28687424', '0' ], [ [['French police stepped up the search', 17]], '28667224', '0' ], [ [['Seeking to elevate his candidacy back to a general', 8]], '28660934', '0' ], [ [['The tragic story of Trayvon Martin', 4]], '28647343', '0' ], [ [['Karzai will get a chance soon to express', 8]], '28630306', '0' ], [ [['powerful storms stretching', 8]], '28493546', '0' ], [ [['basic norm that death is private', 6]], '28413590', '0' ], [ [['songwriter also saw a surge in sales for her debut album', 6]], '28413590', '1', 'Watch music videos from Whitney Houston ', 'on Yahoo! Music', 'http://music.yahoo.com' ], [ [['keyword', 99999999999999999999999]], 'videoID', '1', 'overwrite-pre-description', 'overwrite-link-string', 'overwrite-link-url' ] ]
    Should Bill and Donna call a hail marry pass to boost their business? Join the conversation.
    Remake America celebrates moms everywhere.
    Wounded veteran Kyle lost his hand during an explosion in Iraq.