Web Design « Artsnova Digital Art and Space

Archive for the ‘Web Design’ Category

New Art and the Artsnova Web Site Redesign

Saturday, March 2nd, 2013

Web Site Redesign Before After
Artsnova Web Site Redesign Before (left) and After (right)

Finally after a couple months of somewhat intermittent work I have deployed the redesigned version of my Artsnova Digital Art Gallery web site. One big consequence of the redesign is that I now have a much larger portion of my art online. Prior to the redesign I had 79 artworks on the site. As a part of the redesign I added 117 additional works of art (creating the additional 117 web pages for the art involved more work than the actual redesign!). The art I’ve added spans a number of years – going all the way back to 2002. Much of this is art that I have not previously made available for sale.

I also took this opportunity to remove all the photography from my web site. My plan is to, at some time in the future, create a separate web site for my photography. One site dedicated to art and another site dedicated to photography is a much more appropriate approach from both a business perspective and a search engine optimization perspective. So now I have total of 188 works of art on my site – with yet more to add as I find the time.

Back on the subject of the redesign, my five objectives in redesigning my site were:

to widen the content area to support larger images for the art gallery
to simplify and streamline site navigation
to reduce the number of art gallery subject categories
to give the design a cleaner look primarily by eliminating the sidebar
to prepare the site to be upgraded to a responsive design for mobile browsers.

Widening the Content Area

For me the most important part of the redesign was to widen the content area so that I could use larger images to display my art. In the figure below, you can see a before and after image of one of my artworks – Beyond the Mountains

Beyond the Mountains Gallery Art Before and After

The darkened, desaturated component shows the area of the original image and the larger, colored background image shows the new size. It may not look like much but going from 600 to 670 pixels wide makes for a large difference on smaller screens.

Streamline Site Navigation

The second most conceptually difficult part of the redesign was to simplify site navigation so that I could eliminate an entire category of links. This required a rethinking of how I would organize content – while keeping in mind that the critical factor was making it as easy as possible for visitors to find what they were looking for.

Reduce the Number of Art Galleries

The most difficult part of the redesign was figuring out how to reduce and organize the number of art galleries I had on my site. With the old design, art was organized into the following eight different categories:

Abstract Art
Astronomical Art
Computer Art
Moon Art
Nature Art
Portrait Art
Space Art
Technology Art

Combining the Moon and Astronomical galleries into a Space gallery was easy. How to handle the abstract, nature, and technology categories proved to be much more difficult. For information about the new galleries and an explanation as to the contents of each, see the Art Gallery Index

A Cleaner Look

Giving the site a cleaner look was easy. Shrink the masthead, eliminate the sidebar, reduce the number of top level site navigation categories from five to four, and reduce the overall page width. The serendipitous aspect of this was that by eliminating a navigation category and the sidebar, I was able to decrease my overall page width while simultaneously expanding the content area.

Responsive Design Preparation

One of my many objectives for the coming year is to create a mobile-friendly version of my web site using what is known as responsive web design. The redesign accomplished this by simplifying the html page structure. This should make it easier for me to code up a responsive design. Stay tuned.

Now for the Bad News

The bad news is that I have not yet modified the template files for this blog so my blog is now not one but two generations of redesign out of sync with my web site. One of these days hopefully I will find the time to go in and redesign my blog so that it matches my web site.

If You Find An Error

If you find an error or mistake on one of the Artsnova pages, please consider dropping me a line. You can use the Artsnova Blog Contact Form to reach me.

Thanks and happy surfing, Jim

Tags: art, new, redesign
Posted in Digital Art, Web Design | No Comments »

Bookmark it:

Goodbye Facebook Fan Page Widget

Wednesday, December 12th, 2012

The Artsnova Facebook Fan Page

As a consequence of a change in Facebook policy I’ve decided to drop the Facebook widget promoting my Facebook Artsnova fan page from my blog’s sidebar. I also plan on changing how I use my Facebook fan page. The policy change that has led me to this course of action was Facebook’s decision to limit how many of a page’s fans actually see the posts in their news feed. This was done so that Facebook can monetize posts. You see you can still reach all your fans – if you are willing to pay for it. This is implemented via the relatively new Facebook Promote option.

With this policy change, unless you pay to promote your posts the reach of your posts is decreased by approximately 85 percent on average. Quoting from the article Paying For Promotion (referenced below):

Dave Seligman, founder of popular geeks culture blog Geeks of Doom told me recently that "Of the 18,000 fans of our Facebook page, only about 900 (5%) of them ever have the opportunity to view one of our posts at a given time."

My Solution

My solution going forward will be to use my Facebook fan page only to post announcements of new posts on my blog. Also, instead of creating short original content posts on Facebook, I will move those posts to my blog. Who knows – perhaps Facebook’s policy change is a good thing for me since it will mean more new content on my own blog rather than on Facebook.

Reference Links

Goodbye Facebook widget. Note that I never liked the way you munged my posts to fit your widget anyway.

Tags: facebook, fan page
Posted in Computing, Web Design | No Comments »

Bookmark it:

A New Website Design for Artsnova

Saturday, June 4th, 2011

New Artsnova web site design screenshot
The new Artsnova web site design

Thursday night I rolled out a new version of my Artsnova web site. My primary goal in redesigning my web site was to make the site’s navigation system more user friendly. If you want to know what the original version of the Artsnova web site looked like, look no further for I had designed the templates of this WordPress blog to provide a seamless integration between my website and blog. The only difference between the blog and web site was the content of the sidebar. On the web site, the sidebar consisted of a secondary navigation system and some internal advertisements which varied from page to page.

Whereas in the original design the site navigation was split between a horizontal nav bar below the masthead for section navigation and a vertical navigation menu in the sidebar for intra-section navigation, I combined both into a single CSS driven drop-down menu in the new design. This makes it much easier for visitors to find what they’re looking for and to move around the web site quickly.

Another benefit of the new single menu system is maintenance. The dual menu system meant that there were structural differences from one page to the next. The new single menu system combined with a standardized sidebar means that the header, navigation, and sidebar divs are identical for all my web pages. Since I am not using either a CMS (Content Management System) or SSI (Server Side Includes) to manage my web pages but am instead coding them all up the old fashioned way – by hand – this standardization can save me quite a bit of time when adding new pages or undertaking site-wide changes.

My secondary objective was to clean up and standardize my sidebar elements and add social media linkage. I recently put the addthis.com social media bookmarking tool on a few of my pages for testing. In this redesign I have added the addthis widget to all my pages. I’ve also added the Facebook feed for my Facebook page to the sidebar. The only wrinkle is the Facebook widget which tends to be somewhat erratic in getting data back from Facebook on the initial load.

My final objective was to tweak the aesthetics of the page layout. The changes I made to the divs which control the design were minor but, to my eye, improve the overall appearance of the site.

I actually had two competing designs and the design I’ve gone with is the second. The principal difference between the two designs is that the design-not-chosen uses a vertical drop-down navigation menu in the sidebar to the left of the masthead for site navigation. I really liked the way this Javascript/CSS menu looked and worked. It really created a nice compact design as you can see in the screen shot below.

Artsnova alternate web design
The alternate Artsnova web site design

In the end I decided against this design for two reasons. First I don’t like to employ Javascript for something as crucial as site navigation. If someone has Javascript turned off, while the menu still displays and functions, it does not collapse and consequently becomes a very long string of sidebar buttons. Second, the Javascript did take a small amount of time to actually build the menu and while this was going on, the raw html menu elements were exposed to the visitor – the same as if Javascript were turned off.

Overall I’m quite pleased with the way the design turned out. I hope that visitors to the site find that it is now easier to navigate from one section to the next. At some point I will need to redo my WordPress templates in order to provide seamless navigation between the web site and blog but that will have to wait for another day.

Tags: web site design
Posted in Computing, Odds and Ends, Web Design | Comments Off

Bookmark it:

Disappointment with Chicago Artists Coalition

Wednesday, May 19th, 2010

Screen shot of Chicago Artists Coalition email

Imagine my surprise and disappointment when I opened an email blast from the Chicago Artists Coalition (CAC) and discovered that it contained three photographs taken from my web site. The three photos are part of a set of seven that I had taken at the Chicago Art Open Preview and Benefit Party at River East Art Center on April 20 and used to illustrate an article on my web site – Chicago Art Open Preview and Benefit Party at River East Art Center. For a view of the article in question, see this CAC email screen shot. Of the four photos shown in the screen shot, the group photo in the upper left (deliberately blurred) is not mine while the other three photos are.

Not only was I not asked if the photographs could be used but I was not given credit either. One would think that an organization representing artists would know better than to use copyrighted material without first getting permission. As a rule I’m pretty open about allowing non-profits to use my art at no cost. In fact if I had been asked by the Chicago Artists Coalition, I would have gladly said yes to letting them use the photographs. I used to be a member of this organization but did not renew as their dues continued to increase and their charge to artist members to have art shown on the CAC web site is far too expensive.

The Value of Metadata

As a rule, before posting any image to the Internet, I try to make sure that I have filled in the authorship-related fields in the image’s metadata. This consists of the Title, Author, Author Title, Description Writer, Description (if any), Copyright Status, Copyright Notice, and Copyright URL. In the case of the photographs in question, I did fill in the metadata fields. Saving the images from the CAC email to my hard drive, I opened them in Photoshop and looked at the metadata. Yep – my copyright notice was still present. (See Photoshop Metadata Illustration)

Of course there is nothing to stop someone from either removing or altering the contents of the metadata fields. For an informative article on this subject, see Why Photoshop doesn’t provide secure metadata

Watermarking Images

In the case of these particular photographs, because of their relatively small size (430 by 322) I did not bother to watermark the images. Typically I will place a textual statement on the image that is of the following format:
Picture Title – Copyright Symbol – Year – Jim Plaxco – www.artsnova.com

This watermark is semi-transparent with placement depending on the size of the image. For smaller images I locate the watermark along the bottom margin. For larger images I shift the watermark up so that it is more prominent.

Finding Your Images

A relatively new tool available for publishers of images is a search engine called TinEye. TinEye is a reverse image search tool. The user either uploads an image to TinEye or provides the URL for an image on the net. TinEye then searches its database for images that resemble the image you’ve provided and returns their URL.

Unfortunately TinEye’s database is not comprehensive. In the past I found one of my images being used by a city government (from Brazil of all places) by typing into Google the filename of my original image. Can’t say that I have tried that approach lately. And of course there is always the google image search if you have lots of time on your hands.

In Conclusion

All I can say is to be vigilant and don’t be surprised if your art or photographs show up in unlikely places. It is worth noting that copyrights are far more likely to be violated by your average Joe than by your average corporation.

Tags: copyright, image use, photography, tineye
Posted in Digital Art, Digital Photography, Photoshop, Web Design | 5 Comments »

Bookmark it:

Don’t Be Alarmed Now

Wednesday, March 17th, 2010

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.

Tags: theme, Web Design, wordpress
Posted in Computing, Web Design | Comments Off

Bookmark it:

Online Order Processing Article

Thursday, December 20th, 2007

Diverging from this blog’s standard bill of fare, I just completed an article on online order processing for my Digital Excursions web site. The article How To Lose Online Customers reviews my recent experience attempting to join the IEEE. Needless to say I wound up not joining IEEE. If you are a webmaster doing e-commerce, you might be interested in my observations of the shortcomings of the way in which IEEE implemented the process of purchasing a membership.

Happy Computing, Jim

Posted in Web Design | Comments Off

Bookmark it:

Photoshop for Web Site Design

Monday, July 16th, 2007

Chicago Society for Space Studies web site.

Saturday I completed a total redesign of the Chicago Society for Space Studies web site – which in part explains why I haven’t been posting new entries here lately. And since I was in the process of doing the redesign, I took the opportunity to also write an article outlining the process. That article – A Web Site Redesign – appears on my Astrodigital web site.

The redesign I performed would not have been possible without the use of 2D graphics software. Of course my software of choice is Adobe Photoshop. While I have used Photoshop before to create buttons, logos, banner images, and web page elements, I had never used it to create a total graphic page design. That design, shown above, was actually quite easy to create.

For the banner image, I felt that a night view of the Chicago skyline would be most appropriate since it combines the elements of Chicago and space via the presence of the night sky. The Chicago skyline is a composite of two photographs taken at night from the site of Chicago’s Adler Planetarium. To capture the two images, I set my camera up on one of my tripod’s and shot in manual mode, which allowed me to control ISO, speed, and aperture. I also created a new version of the CSSS logo that fit in better with the banner image color wise.

The most time consuming part of the design process was not the actual creation of the design, but rather coming up with the mental image of the type of design I wanted to create. I was guided in this process by looking through free web site template sites. There is more on that in the A Web Site Redesign article.

Realization of the site graphic/design was accomplished by creating a multi-layered Photoshop document. I started by creating a solid background, the color for which I was sure to note as I would use this color to define the web page’s background color in the CSS (Cascading Style Sheet) file. This was layer one. On layer two I made a rectangular selection of an area of the same size as the page area, feathered the selection, and filled it with a dark gray: this would serve as the shadow area around the page content area. Back to the rectangular marquee, on layer three I selected a rectangle and filled it with white: this would serve as the content area background. On layer four I added the Chicago skyline image. I placed the CSSS logo on layer five. By putting the logo on its own layer, I was free to experiment with positioning the logo and while keeping my options open for any future changes. Next up the layer ladder, on layer six I created a rectangular selection and filled it with gray: this would be the area used to hold the horizontal navigation bar. Layer seven was used to create the frame that serves as the page border. The frame around the page was made by simply creating a rectangular selection, feathering the selection, converting the selection to a border selection, and then stroking the path. I then used a layer style to give the border a 3D effect.

It was all pretty simple actually. The final step was to switch to ImageReady and slice up the image into the appropriate components. It was then necessary to create the CSS that would reassemble the individual graphic components while allowing for content control within each of those individual areas.

Once I had my CSS and XHTML template created, it was just a matter of replacing the old page layout code with the new code. Not mentally challenging but tedious. The worst part of the whole process was validating all the HTML associated with the content as I had decided to change from coding using an HTML doctype to an XHTML doctype.

If you want to take a closer look at the design, and learn a little bit about space in the process, I encourage you to visit the Chicago Society for Space Studies web site.

Ad Astra, Jim

Posted in Photoshop, Web Design | Comments Off

Bookmark it:

My astronomy web site Astronomical Adventures

Saturday, January 13th, 2007

Finally. After years of ignoring my astronomy oriented web site Astronomical Adventures I finally spent some serious time on it performing a complete overhaul of the site. I replaced the ancient HTML tables design (created and not modified since 1999) with a CSS tableless layout conforming to the XHTML 1.0 Transitional standard.

In addition to the redesign, I added three new articles to the site. One article, The Milky Way Galaxy, is a very basic introduction to our Milky Way galaxy. I also wrote an article The Location of the Solar System in the Milky Way which illustrates and explains our location in the galaxy. The final article is a tutorial. The Drake Equation Tutorial explains the Drake Equation and its parameters. The Drake Equation is associated with the search for extraterrestrial intelligence in the galaxy. In addition to the tutorial I have for download both an OpenOffice Calc and a Microsoft Excel spreadsheet version of the Drake Equation so that people can play with the equation for themselves.

I must confess that the driver for this undertaking were the preparations I undertook for my participation in the 2006 Windycon Science Fiction Convention. I wrote about my participation in that convention in the entry Windycon Science Fiction Convention Programming Schedule.

So pay a visit to Astronomical Adventures and let me know what you think.

Ad Astra, Jim

Posted in Astronomy, Web Design | 2 Comments »

Bookmark it:

Hello world!

Friday, October 13th, 2006

Well, at least that is the default name given to this post by the folks at WordPress whose blogging software I have elected to use. While this is my first self-managed blog, my first blog was The Digital Mars Blog hosted at blogger.com. While my Digital Mars Blog is devoted to discussing images of Mars and the current missions to Mars, I hope to use this blog to discuss computer graphics, space art, digital photography, and the digital art that I create for my ArtsNova web site. I may also wander into the fields of astronomy, cosmology, and space exploration – you never know.Are you ready? Then letâ€™s go.Ad Astra, Jim

Update: That was my original message posted here on Friday the 13th. Today is Thursday the 19th and this is now my third install of WordPress the first two having gone south. I can blame the first one on both my own lack of experience and my hosts slightly incorrect domain configuration. The second failure, which occurred yesterday, is a mystery to all.

This post is being done on Oct 19 2006 although I will be dating my lost posts to match their original posting dates.

Ad Astra, Jim

Posted in Web Design | Comments Off

Bookmark it:

Digital Art and Space Blog
Reflections on Art, Computer Graphics, Photography, Space and Astronomy

Blog Pages

Blog Categories

Archive for the ‘Web Design’ Category