Blog: [Blog Home] [Archives] [Search] [Contact]

Posts Tagged ‘Web Design’

A Mobile Friendly Artsnova Blog

Monday, May 4th, 2015

Google Developers Mobile Friendly Test Page
Google Developer Says I’m Mobile Friendly

Last night I held my breath and swapped out my old blog theme files and CSS with the new responsive web design replacements I had just finished coding up. Why? Well, if you follow the news of the web then you are no doubt aware of the big change Google made last month (4/21 to be exact) to its search engine ranking algorithm. The heart of that change was to penalize web sites that are not mobile-friendly – or to put a positive spin on it – to reward web sites that are mobile friendly.

It was last September that I re-coded my main web site using the responsive web design paradigm to make my web site mobile friendly. You can read about that in my post Artsnova Digital Art Gallery – Mobile Friendly At Last. And in December when I launched my Jim Plaxco Photography web site, I did it as a mobile friendly web site from the start. It’s much easier to design a mobile friendly web site from scratch than it is to convert an existing web site!

Tackling my blog was another matter entirely, particularly since I had to first edit all of my previous blog entries to ready them for use with a responsive web design layout. That took time. Plus I had to insure that the responsive design theme I came up with for my blog provided the same look and feel as my separately managed web site. This extra challenge is a consequence of having created my web site first and only later adding a blog – for which I simply used a default theme at the time. With all the other items on my agenda, I really did not want to spend time making this design change but I viewed it as a necessity given Google’s actions. Note that mobile visits to my web site for the last month accounted for 16.9 percent of my traffic.

I’m happy to say that the implementation work is now done. I only have two more tasks. First I must revisit all my posts that contain embedded videos and determine how I will handle them as they use a fixed-width definition (just 425 pixels wide so not a big deal – I just need to create a CSS class for them). Second, I need to revisit every blog post using a combination of browsers and mobile devices to make sure that nothing broke in terms of the page layout. You could say that I’m doing my testing in a "live" environment. This is not considered good practice but given my time constraints, it is a better course of action for me to pursue.

If in the course of wandering around my blog you find something amiss, please contact me so that I can put things right. Thank you.

Happy Surfing!

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It

Artsnova Digital Art Gallery – Mobile Friendly At Last

Thursday, September 25th, 2014

Artsnova Digital Art Gallery responsive design for Smartphone
Artsnova Digital Art Gallery responsive design for Smartphone

One of the projects that I’ve been working on – off and on as time permitted – over the last few months has been to recode my Artsnova Digital Art Gallery web site in order to improve the site’s usability for mobile users. Specifically I was working to create a responsive web design version of my web site.

My old design (which this WordPress blog still uses) used a fixed-size layout so that no matter what your device’s form factor (screen size), the relative size and placement of images and the flow of text was identical across the board. This made design and maintenance a simple matter. Pages would look the same to everyone. This approach works great for the desktop.

As more surfers spend more time using their mobile devices to surf the web, it becomes more important that web sites migrate to a design methodology that is friendly to mobile users. This is because of the way in which mobile device browsers display traditional web pages. If you pull up this blog post on your smart phone’s browser, the entire page will be displayed on your screen – but everything is going to be so small that you won’t be able to read anything or click any of the links without first manually resizing the content. In addition, my site was using the hugely popular CSS dropdown menu method for site navigation. It works great on the desktop but not on mobile devices.

The percentage of traffic my site gets from mobile users is in the teens – up from the mid-single digits of just a couple years ago. As I expect that trend to continue, I felt it was time for me to sit down and create a web site that would be friendly to mobile users.

I opted to go with a responsive web design solution as that would require only a single code base – as opposed to maintaining one code base for desktop users and one or more additional code bases for mobile users. What is responsive web design? Responsive web design uses HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) to create a web page whose layout is dependent on (responsive to) the size of the screen it is being viewed in. That’s it. The main benefit is that responsive web design allows me to create a single web page that gets delivered to all users – as opposed to creating one version of a web page for desktop users, another version of the page for smartphone users, and another version of the page for tablet users. My web site currently has 329 HTML pages (not counting the pages associated with my blog). Responsive web design means 329 pages and one set of CSS definitions. The non-responsive alternative would mean 987 pages and three sets of CSS definitions. That’s a lot of work and means a lot more maintenance in the future. And it’s worth pointing out that I don’t use a CMS (Content Management System) for my site. I’ve coded everything by hand as static HTML pages.

In addition to developing the necessary CSS code to implement a responsive web design, I had to recode and test each of my site’s existing web pages. While for most pages these changes were fairly standard, I have a number of pages that presented particular challenges due to their content.

Another aspect of my design is that it does not use Javascript. Everything is done using HTML and CSS3. I’ve avoided Javascript for two reasons. First and foremost, not using Javascript makes for a faster page load – particularly for mobile devices. Second, not using Javascript means that there is one less component of my site’s code base that I have to maintain. Of course not using Javascript means that my web site lacks the dynamics and interactivity features that Javascript makes possible. However, hopefully you are coming here for the content and not visual bells and whistles.

Last night I put the finishing touches on my new design and took the plunge of rolling it out – even though I haven’t tested as thoroughly as I should. However, my schedule over the coming months has little spare time so better to act now and deal with issues as they arise.

To see a full side by side visual comparison of my standard vs responsive design home page as seen on my Android smartphone, clip on the image below.

Artsnova Digital Art Gallery site comparison image

What About My Blog?

If you’re reading this on a mobile device, you can see that I have not converted my blog to a responsive web design. Converting my blog to a responsive design would take almost as much time as it took me to convert my web site. Fortunately (or unfortunately) I created my web site and blog separately. Later on I created custom WordPress templates in order to visually integrate my blog into my web site. This approach has worked quite well but it means that the two are designed and maintained separately. For the foreseeable future, I will not have the time to spend on converting my blog to a responsive design.


In learning about responsive web design and in coding up my design, the two books that I made the most use of were:

Closing Thought

As a parting shot, I’ll leave you with this quote by Microsoft’s Bob Herbold: "It’s not the technology, folks, it’s the people. When we trace [the errors] back, it’s always human error." Of course what he doesn’t say is that for the most part the people making those errors are Microsoft’s programmers.

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It

Don’t Be Alarmed Now

Wednesday, March 17th, 2010

Old Artsnova Blog
The Old Artsnova Blog

Yes this is the Artsnova Blog. The new look is a result of finally taking the time to modify my old WordPress theme template so that my blog is fully integrated into my web site. While my blog and web site were on the same domain, they had been created separately at different times. While I created my own design for my web site, at the time I set up this blog I just went with the default WordPress theme modified with a variety of my own tweaks over time.

The result was that my blog and web site:

  • had entirely different looks to them
  • had different page layouts
  • had different navigation systems

The bottom line was that for a visitor it was like going to two completely different web sites. This meant that visual branding suffered and that cross traffic (going from blog to web site and from web site to blog) suffered.

The new blog design now matches the Artsnova web site in that it uses the same basic page layout, design, color scheme, and uses the same navigation system. I have deliberately kept a couple of minor cosmetic differences. The purpose of these visual differences is to help visitors distinguish between those pages that are a part of the web site and those pages that are a part of the blog. The visual cues are use of a different background color for the content area (white here on the blog); a slightly different background color for the navigation sidebar (a lighter shade of blue on the blog); and the addition of the text Digital Art and Space Blog Reflections on Art, Computer Graphics, Photography, Space and Astronomy to the masthead for the blog.

I hope that you enjoy the new look and feel of the Artsnova Blog. If you encounter any problems with this new design, please let me know.

Thanks and have a Happy St. Patrick’s Day.

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It