Pala 3
Library
The Palagems site has over 3,000 pages of content including newsletters that date back to 2000. In addition there are reprints of rare gemology and mineralogy books and articles from around the world dating back to the 1800's. The design challenge was to make this treasure trove of knowledge accessible and inviting.
Click image to magnify
The previous Learning Vault was a single long list of articles grouped into sections. A few key articles could be opened from the left-side menu.
The current newsletter could be opened from the left-side menu or from the main menu at the top. Back issues could be opened from links inside the current issue.
Click HERE to open an archival version. Please note that most links redirect to the new site.
Click image to magnify
All archival content could be opened from a single Library home page.
A featured article appears at the top. Other featured articles appear below.
Click HERE to open the new site.
Library landing pages
Click image to open the page.
Importing the primary articles into Squarespace
The most important articles such as the Buying Guides were manually imported into Squarespace:
- Drag images from the original version into a desktop folder.
- Create a new Squarespace page within a Squarespace folder that corresponds to the Table of Contents on the Articles landing page.
- Copy the text from the old version into a Squarespace text object.
- Format the text to match the formatting of the original. Insert SQS Line object
- Insert SQS Image object for the first image in the article. Cut and paste the caption (if any) into the object. Resize and reposition as necessary. Repeat for all remaining images.
- Recreate each columnar table from the original article by copying and pasting the original HTML code into a SQS code object.
- Recreate slide shows by copying and pasting the original images into a desktop folder. Insert a SQS Gallery object that mimics the original. Drag images into the gallery object. Format as necessary (and possible) using Squarespace's built-in formatting controls.
- Add article name and description to the Articles landing page. Add URL link to the title.
Some articles required custom CSS, For example, Seeing Red: A Guide To Ruby by Richard Hughes used a black background with red and white text.
Importing all other articles into Squarespace
Time and budget limitations required using another approach to import the remaining articles:
- Duplicate all original articles in a separate desktop folder.
- Delete all HTML code above <div id="bodyColumn"> at the top of the main content.
- Delete all HTML code below the closing </div> for <div id="bodyColumn">.
- Point all images back to the site hosting the ecommerce functionality by replacing <img src="/Images" with <img src="http://store.palagems.com/Images
- Create a new Squarespace page within a Squarespace folder that corresponds to the Table of Contents on the Articles landing page.
- Paste the edited code text into a Squarespace Code object.
In the site-wide CSS there's a special rule that overrides the height and width sizing for images:
@media only screen and (max-width: 640px) {
div#bodyColumn table, div#bodyColumn img {
width: auto !important;
height: auto !important;
}
}The Palagems Reflective Index has been published online since 2000. All issues from January 2014 were manually converted into Squarespace format using the process described above for articles. Each newsletter page on Squarespace has its own page-specific CSS that mimics the original formatting.
Large screen version
Click image to open this issue in a new window.
Small screen version
Click image to open this issue in a new window.
Importing archival issues into Squarespace
Due to time and budget limitations, newsletters published from 2000 to December 2013 were converted into Squarespace code objects using a similar process used for archival articles. Because the newsletter content was contained within the distinct HTML object <div class="gemWrap">, the CSS for formatting the archival newsletters could be stored in the site-wide custom CSS. Ad added advantage is that because Squarespace templates are responsive, archival newsletters could now be viewed on mobile devices.
Large screen version
Click image to open this issue in a new window.
Small screen version
Click image to open this page in a new window.
Project Phases
1) Redesign the User Experience
2) Branding & Graphic Design
3) Organize the Content
4) Update the eCommerce System
Click links to read more detail about that phase