Uphams Corner News - Technical Upgrade - New Design and Functionality

May 2014 was retrospectively designated Technical Sabbatical Month for Uphams Corner News.  Many in a long list of outstanding technical issues were addressed.  The website design was modernized and the "back office" cleaned and sorted (styles).  This has generated an improvement in both the developer's workload and the reader's browsing experience.

Maintaining the technical foundation of the Uphams Corner News website is important to ensure a quality customer experience as well as a more error-free development environment.   

Evolving over time, the UC News website has achieved a robust design that works well for publishing "the news" and that rarely presents problems for the developer.

Outstanding Technical Issues

As with any ongoing enterprise, technical / design issues arise over time.  Generally, publishing the news wins out over auditing website performance.  However, as the number of outstanding issues grows, the priority to do techie work increases.  Following is a list of outstanding issues as of May 2014. 

Too many styles in the CSS stylesheet files
Inline styles
Too much use of inline styles and HTML attributes
Page layout
Too much dependence on tables for page layout
Use of Div vs Span with classes
No room left in the main navigation bar
UC News needs e-commerce capability
Uphams Arts
Need to add Uphams Art pages distinct from UC News pages
Uphams News Blog lacking functionality
News Index out-of-date and Link page inadequate

Of these, the highest priority was adding Uphams Arts to the UC News website  That meant adding more CSS styles, navbar options, new templates (Uphams Arts look and feel) and e-commerce (at a minimum).  Doing so on top of a website that was crying for maintenance was not a good idea . 

"Fixing" the existing structure then emerged as the top priority.  And that is how May 2014 was declared a technical sabbatical for UC News - lots of tasks and a great outcome in the offing. 


It's now the end of the month and Technical Sabbatical May has come and gone with all of the outstanding issues addressed and many small challenges handled along the way as well.  Not only is the website and journalism work easier to administer as a result but the reader may experience an upgrade to the look and feel of both Uphams Corner News and the Uphams News Blog.  Actually, the presentation is smooth and most readers won't notice much of a change.

UC News Logo and Navbar 5/28/14

Technical Upgrade Details

The table below details the work done by issue identified above.


Identify styles used in 2014 HTML, SHTML and infrastructure files
Assess appearance and content of Uphams News blog. 
  • Research other themes consistent with news/magazine design.
  • Identify "Expound" as suitable and it was free
  • Convert Uphams News to new theme
  • Export site (115 posts) to backup site, then delete many posts from production site
  • Begin using Uphams News as blog site
Plan contents of new drop-down menu
  • Review the drop-down menu under test and determine it was not appropriate
  • Research the Internet for additional drop-down menus
  • Identify ... which looked promising
  • Revise drop-down menu three times until stable then implement
  • Add Uphams Arts to navbar
  • Note:  Blog entry describes some of this effort
Style sheets
Create new stylesheet (V2) based on research earlier in the month
  • Reconfirm styles based on 5/7/14 research
  • Develop new templates using V2 stylesheet
  • Identify existing production HTML for testing (approx 15 files)
  • Convert HTML to use V2 stylesheet, test and move to production
Begin researching shopping cart software.
  • Talk with PayPal regarding their 3rd-party recommendations
  • Research on internet and via forums
  • Narrow the options to approximately six (6)
E-commerce Make decision to use Mal's E-Commerce
E-commerce Complete the basic implementation of Mal's on the Greeting Cards page
  • Create shopping cart
  • Create Add to Cart buttons
  • Add thumbnails to Order Page
  • Add multi-item click
  • Connect to PayPal API
Page layout
Identify changes to HTML to reduce use of tables
  • Perform page structure autopsy
  • Identify essential table layout structure
  • Identify superfluous tables
  • Create new template (V3)
  • Identify method for upgrading from V2 to V3
Page Layout
Inline styles
Div vs Span
Convert files to V3 and remove inline styles
  • Use Kompozer to copy WYSIWYG code to new template and save
  • Use Coffee Cup to identify HTML and inline styles
  • Replace DIV with SPAN where appropriate
  • Research / identify CSS to accomplish the same
  • Add styles to V3 stylesheets
  • Move files to production
Page Layout
Research how to create article page layout without using tables
  • Tested Display: inline-block
  • Developed article template (V4)
  • Converted files to V4 and uploaded to production
Page Layout Use inline-block to create front page design and test
Page Layout Redesign front page using inline-block to a three column format
  • Create new styles, new stylesheet
  • Test front page thoroughly
  • Combine new styles into V4
  • Create final front page template
  • Assess how best to locate article teasers and ad space
Revised News Index
Revised Links page
May 2014
Uphams Arts
Create new design pages for Uphams Arts
  • Theme
  • Template
  • Navbar
  • Pages


Click here to Add Comment - Your comments will be posted here and in the Letters to the Editor after processing.

Posted: May 28, 2014    Nancy J Conrad