{source}<?php
tab Getting with the Web Design Times: Your Site is so 2005use Joomla\CMS\Uri\Uri;
tab Getting with the Web Design Times: Your Site is so 2005// Get the current view
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$input = $app->input;
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$view = $input->get('view');
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$layout = $input->get('layout');
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005// Get the page title
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$pageTitle = $document->getTitle();
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005// Initialize category title variable
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$categoryTitle = '';
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005// Check if the view is an article or a category
tab Getting with the Web Design Times: Your Site is so 2005if ($view === 'article' && isset($article)) {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005// Get the category id from the article object
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$categoryId = $article->catid;
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005// Load the category
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$category = \JCategories::getInstance('Content')->get($categoryId);
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$categoryTitle = $category->title;
tab Getting with the Web Design Times: Your Site is so 2005} elseif ($view === 'category') {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005// Get the category id
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$categoryId = $input->getInt('id');
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005// Load the category
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$category = \JCategories::getInstance('Content')->get($categoryId);
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$categoryTitle = $category->title;
tab Getting with the Web Design Times: Your Site is so 2005}
tab Getting with the Web Design Times: Your Site is so 2005// 
tab Getting with the Web Design Times: Your Site is so 2005// echo "<pre>";
tab Getting with the Web Design Times: Your Site is so 2005// echo 'View: ' . htmlspecialchars($view) . '<br>';
tab Getting with the Web Design Times: Your Site is so 2005// echo 'Layout: ' . htmlspecialchars($layout) . '<br>';
tab Getting with the Web Design Times: Your Site is so 2005// echo "View later: " . htmlspecialchars($viewLater) . '<br>';
tab Getting with the Web Design Times: Your Site is so 2005 
tab Getting with the Web Design Times: Your Site is so 2005// $currentView = $app->get('current_view_for_sourcer', '');
tab Getting with the Web Design Times: Your Site is so 2005// $bodyClassMenu= $app->get('bodyClassMenu', '');
tab Getting with the Web Design Times: Your Site is so 2005 
tab Getting with the Web Design Times: Your Site is so 2005// echo 'Current View Passed: '.$currentView.'<br>';
tab Getting with the Web Design Times: Your Site is so 2005// echo 'Body Class Passed: '.$bodyClassMenu.'<br>';
tab Getting with the Web Design Times: Your Site is so 2005 
tab Getting with the Web Design Times: Your Site is so 2005// echo "<br>";
tab Getting with the Web Design Times: Your Site is so 2005// echo "Current view: " . htmlspecialchars($input->get('view'));
tab Getting with the Web Design Times: Your Site is so 2005// echo 'Page Title: <h1>' . htmlspecialchars($pageTitle) . '</h1>';
tab Getting with the Web Design Times: Your Site is so 2005// echo "</pre>";
tab Getting with the Web Design Times: Your Site is so 2005//
tab Getting with the Web Design Times: Your Site is so 2005// Output the titles and view with conditional HTML elements
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005echo '<div class="container">';
tab Getting with the Web Design Times: Your Site is so 2005echo '<div class="row">';
tab Getting with the Web Design Times: Your Site is so 2005echo '<div class="col-xs-12">';
tab Getting with the Web Design Times: Your Site is so 2005echo '<div class="holder">';
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005//echo "blog/".$article->category_alias;
tab Getting with the Web Design Times: Your Site is so 2005$varURL = Uri::getInstance()->toString();
tab Getting with the Web Design Times: Your Site is so 2005$varURLParts = parse_url($varURL);
tab Getting with the Web Design Times: Your Site is so 2005$varCategoryFlag = null;
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005foreach ($varURLParts as $component => $value) {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005if ($component === 'path') {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$value = substr($value, 0, strrpos($value, '/'));
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005}
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$arrURLComponents[$component] = ucfirst($component) . ": $value";
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005$arrURLValue[$component] = $value;
tab Getting with the Web Design Times: Your Site is so 2005};
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005//echo "<pre>";
tab Getting with the Web Design Times: Your Site is so 2005//var_dump ($arrURLValue);
tab Getting with the Web Design Times: Your Site is so 2005//echo "</pre>";
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005//echo '<a href="'.htmlspecialchars($arrURLValue['path']).'">'.htmlspecialchars($arrURLValue['path']).'</a>';
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005if ($view === 'article') {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005echo '<!--article--><div class="header"><a href="'.htmlspecialchars($arrURLValue['path']).'"> ' . htmlspecialchars($categoryTitle) . '</a></div>';
tab Getting with the Web Design Times: Your Site is so 2005} elseif ($view === 'category') {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005echo '<!--category--><h1 class="header"><a href="'.htmlspecialchars($arrURLValue['path']).'">' . htmlspecialchars($categoryTitle) . '</a></h1>';
tab Getting with the Web Design Times: Your Site is so 2005} else {
tab Getting with the Web Design Times: Your Site is so 2005tab Getting with the Web Design Times: Your Site is so 2005echo '<!--else--><h1 class="header">' . htmlspecialchars($categoryTitle) . '</h1>';
tab Getting with the Web Design Times: Your Site is so 2005};
tab Getting with the Web Design Times: Your Site is so 2005
tab Getting with the Web Design Times: Your Site is so 2005echo '</div>';
tab Getting with the Web Design Times: Your Site is so 2005echo '</div>';
tab Getting with the Web Design Times: Your Site is so 2005echo '</div>';
tab Getting with the Web Design Times: Your Site is so 2005echo '</div>';
?>{/source}

Outdated UX

Your Site Is So 2005: Getting With The Web Design Times

The internet is a relatively new contraption in technology terms. It has really only been popular with the masses for around 20 years. As any teenager will tell you, being cool 10-20 years ago, or even 3-4 years ago, does not translate to today’s sense of cool.

Right now you’re probably thinking one of two things: “Who cares? I don’t need to be trendy.” Or “I want to be trendy but I don’t want to reinvent my website every 2 years!”

If you aren’t ready for a full overhaul of your website, perhaps consider updating some telltale signs of age:

Carousels

Carousels are everywhere. They typically hold content with arrows to navigate forward and backward, with multiple slides. They can be automated to add some dynamic content to your pages, but they are also, as SideProject.io points out, quite inefficient at engaging users beyond the first slide.

Consider editing down the content enclosed in a carousel and repurposing it on the page. Besides, you likely aren’t reaching your users with those “inside” slides anyway!

Text as Images

In a world before @font-face, customized fonts beyond the traditional Times and Arial were relegated to image embeds. There are a few reasons why this is a bad idea in modern web design: first, it is terrible for search engine optimization. Second, it increases the load time for a page having to download each image rather than text. Third, it is awful for folks with sight impairments who rely on screen readers.

Any modern web designer worth their salt will know how to use custom fonts in a design without defaulting to images. Google even offers a library of free fonts for use on websites.

Page Loading Indicators

Known as “preloaders,” many early sites included a progress bar to tell you how much longer you’d need to wait to get page content loaded in your browser. In today’s world of high-speed connections and optimized content, these preloaders aren’t necessary. They can even turn away users who would like to get started on content before the entire page loads.

Hover Content

Calm down with the hovers, Marty McFly. This isn’t a punky skateboard that helps him escape the dastardly Biff. Hover content is content that pops up with a user hovers their mouse over a section of your website. Quite popular in the pre-mobile era, it simply isn’t a good design element today. It relies on the user having a mouse, which has been completely eliminated in touchscreen devices.

Auto-Play Videos

This was a faux pas back in the aughts and it still applies today. Loading a page shouldn’t mean a user is assaulted with stealthy ninja audio or video. What if they aren’t expecting a video? Perhaps they are at work, or in a study lounge. Auto-play videos are a surefire way to make your users grumpy.

Large Background Images with no Responsive Element

Desktop computers come with large screens, yes. Faster internet connections mean we are able to load larger images. Good photography can make for a beautiful website. But using large images with no thought given to those smaller screens can backfire on you.

In the end, there are two questions SideProject.io suggests when making web design decisions:

  1. What are you trying to communicate?
  2. Are your users best interests in mind?

Written By: Staff  |  June 16, 2015