Sofie Estolloso Hofmann Designs International

I finished creating a new theme, a new fluid two-column WordPress theme for ISYU.INFO which went online on May 1, 2009. I actually had no intention to do it last month but ever since I finished the web designs for Semirara Dumpsite Issue and Patria Diesel Power Plant Issue, I just thought that I have to make use of the domain name isyu.info.

And so, ISYU.INFO Around the World was born. ISYU.INFO is a micro-blogging news site, and it could also be your daily news resource around the world. ISYU.INFO is a micro-blog where I write about just a few of the world news and issues that I have read on a daily basis.

I already did a fluid one-column WordPress theme for this micro-blog within just a day but eventually changed my mind and came up of this fluid two-column theme which I was able to finish within 3 days because of so much revisions from fluid one-column theme.

There is only one layout for this micro-blog, wherein the main content is on the left side and the sidebar is on the right side. The width is not fixed that is why this is a fluid two-column WordPress theme. But just like how I designed the other fluid WordPress themes, the width of this blog may not be fixed but it was also limited to 900px so as not to expand the content if the screen resolution of the browser is bigger than 1440×900.

As usual, this site using a fluid two-column theme was tested at Safari 3, Firefox 2, Firefox 3, Opera 8.5, Opera 9.2, Internet Explorer 6 and Internet Explorer 7 with screen resolutions like 800×600, 1024×768, 1280×1024 and even bigger than 1280×1024.

The Semirara Dumpsite Issue Website (NO TO SEMIRARA DUMPSITE! – Antique Philippines) was first designed way back in March 07, 2001 to July 01, 2001 after the people’s victory protesting against the proposed semirara dumpsite in Semirara island, Caluya, Antique, Philippines. The site has not been redesigned since early 2001 and was rarely updated when the landfill was not pushed through in Semirara island.

As the site was designed using simple HTML just like the Patria Diesel Power Plant Issue Website, I decided to redesign it using PHP for easy updating purposes. But instead of using simple PHP, I use WordPress as CMS (Content Management System) so the site can be easily and regularly updated. The updates may not be about the issue itself but at least they will be most likely related to the issue concerning garbage problems especially in the Philippines and other topics related to it. The other updates may not be about the issue itself but will still have something to do with Semirara island and its current problems.

The old site used one layout only. The newly redesigned site uses one layout too. The new web design is not exactly the same with the old web design as the sidebar at the old web design was at the right side and the main column for content was at the left side. Other than than, nothing really changed except for the PHP scripting programming language used. The old HTML web design was just converted into a new WordPress theme with fixed width and two columns, but this time, the main column for content is on the right side and the sidebar is on the left side.

The site was tested at Safari 3, Firefox 2, Firefox 3, Opera 8.5, Opera 9.2, Internet Explorer 6 and Internet Explorer 7, even tested it with screen resolutions like 800×600, 1024×768, 1280×1024 and even bigger than 1280×1024. Everything looks fine at all the browsers.

The Patria Diesel Power Plant Issue Website (PATRIA! THE UNDISCOVERED PARADISE! NO TO DIESEL POWER PLANT!) was first designed way back in November 22, 2002 to December 22, 2002 at the height of the protest against the proposed diesel power plant in Patria, Pandan, Antique, Philippines. The site has not been redesigned since then and was rarely updated when the issue somehow ended in early 2003.

The site was designed using simple HTML, and so when I decided to redesign it, I use PHP for easy updating. But instead of just using simple PHP, I use WordPress as CMS (Content Management System) with this site. I especially use WordPress so the site can be easily and regularly updated from now on. The updates may not be about the issue itself but at least they will be most likely related to the issue concerning diesel power plants and other topics related to power and energy, and most especially probably about alternative energies.

The old site used one layout only. The newly redesigned site uses one layout too. The web design is actually still the same, nothing really changed except for the scripting programming language. The old HTML web design was just converted into a new WordPress theme with fixed width and two columns, having the main column for content on the right side and the side bar being situated on the left side.

The site was tested at Safari 3, Firefox 2, Firefox 3, Opera 8.5, Opera 9.2, Internet Explorer 6 and Internet Explorer 7, even tested it with screen resolutions like 800×600, 1024×768, 1280×1024 and even bigger than 1280×1024. So far, everything looks fine at all the browsers.

I started writing for another blog at ProBlogit.com. The blog is all about my new problogging venture. I created a new WordPress theme based on this web design site, Sehdi.com, and my personal site, SofieHofmann.com. The WordPress theme is a fluid three-column theme as the sidebar has two columns.

I actually created this fluid three-column theme last year just within a day as the CSS of Sehdi.com and SofieHofmann.com was ready and available. Just a few tweaks and after a few hours, the ProBlogit.com WordPress theme was all ready for online viewing. The blog and the WordPress theme has been online since January 1, 2009 but I did not write anything about it until I started problogging at ProBlogit.com on April 2, 2009.

The site has one layout, the main column for the content is on the left side and the sidebar with two columns is on the right side. As usual, since the WordPress theme is a fluid three-column theme, I have to make sure that it will look good on different browsers.

ProBlogit.com which is about Problogging Venture Tips and Ideas, Reviews and Opinions was tested at Safari 3, Firefox 2, Firefox 3, Opera 8.5, Opera 9.2, Internet Explorer 6 and Internet Explorer 7 with screen resolutions like 800×600, 1024×768, 1280×1024 and even bigger than 1280×1024. Despite its fluidity, as usual, the width was limited so as not to expand the main column for the content if the screen resolution is bigger than 1440×900.

I finished revising the WordPress Theme for Weggis.net. I did not change the web design of the site except the position of the images on other pages other than the one at the front page and the location page. Internally though, I changed a lot in the scripts.

I finally got rid of the tables containing the menu and the images at the top of the site. I transferred the text to its location now from where it used to be, like the one you see at the front page and the location page.

I made use of calling the photos and videos using the custom field feature of WordPress instead of embedding the photo all the time after uploading the photos and videos of the events. Because of the custom field feature of WordPress, I was able to call the photos and videos at random at the front page from the photos and videos pages. I don’t need to update the front page as well as the photos and videos pages. They will be updated automatically once I upload some photos or videos.

I also made use of the flash image uploader of WordPress. I used to embed the photos individually from a folder outside a WordPress installation. Now a days, I only upload the photos using the flash image uploader, and just changed the titles afterwards.

The filename of the photo is normally the title of the photo. With that, I needed to individually change the title of the photo. I do that because I don’t like to upload a photo with capital letters, without a dash nor underscore at the filename. I always like the filename in small letters but not when you’re looking at it in a page. If only, WordPress would be able to do something about changing the title at once only, unless I just don’t know. You can actually do that by accessing your database but that would be a hassle but that’s what I did anyway. 🙂

One more thing, every time I make a web design, I make sure that it’s XHTML and CSS valid. Weggis.net should have been but if you tried validating the front page and videos page of this site, you will see that they’re not XHTML valid. The reason for that is because of the embedded videos. The embed tag was not part of any standardized version of HTML so it produces an invalid markup. There’s a way to correct this but because the process is a little bit complicated I just opted not to do it. The other pages are valid anyway.

Update: I removed the videos at the front page.

It has been a year since I redesigned my web design site Sehdi.com. I again redesigned this site still using WordPress as a CMS. I just uploaded the new web design (version 3) yesterday. The new WordPress theme for Sehdi.com is a fluid three-column theme where the main content is being positioned in the middle for balance while one sidebar is on the left side and the other sidebar is on the right side of the main content.

Designing a fluid three-column theme where the main content is in the middle is not at all easy as I have to consider if it will look good at different browsers with different screen resolutions. So far, it looks good on different browsers. The site was tested at several browsers like Safari 3, Firefox 2, Firefox 3, Opera 8.5, Opera 9.2, Internet Explorer 6 and Internet Explorer 7.

It looks the same on the browsers that I mentioned with screen resolutions like 800×600, 1024×768, 1280×1024 and even bigger than 1280×1024. But I also limited the width so as not to expand the main content that much, if ever the screen resolution is 1440×900 or bigger.

I also would like to emphasize here that I always consider the 800×600 screen resolution every time I design a site. I think it is still important to do it considering the popularity of netbooks right now especially with 800×600 screen resolution. And if the smart phones have that screen resolution, isn’t that great?

Anyway, just to show you, the two images below are the old web designs of Sehdi.com (version 1 and version 2). If you read what I wrote last year when I redesigned this site, you will also see these images on that entry.

Finally, I was able to redesign Pandan.ph Website, still using WordPress as a CMS, and still based on the old web design of the site. There’s really nothing major that changed externally but internally a lot were needed to be updated. I revised the CSS and PHP scripts to make use of the photo gallery feature of WordPress.

I was using a javascript within WordPress for the automatic slide of the old photo gallery. I removed those javascripts and made use of the gallery feature of WordPress. There are no more automatic slide shows, just a simple gallery but at least site visitors can write their comments now at the individual pictures.

Regarding color, I finally changed the background color from dark blue to light blue. This is one thing that some of the site visitors suggested as they have a hard time looking at the site longer because of the dark blue color. One suggestion was to change the background into green. I use the green color at the bottom and at the main menu instead.

The image below was the old WordPress theme of Pandan.ph Pandan Antique Philippines Website.

Other additional changes are the latest comments on the side bar instead of the web links, and the RSS feed subscription, making it quite really visible, now being linked to feedburner using feedproxy.google.com instead of being at the domain itself.

I now also use the WordPress Plugin FeedBurner FeedSmith to redirect the old RSS feed pandan.ph/feed to the new one at feedproxy.google.com/pandanph, WordPress Plugin ©Feed for copyright notice at the RSS feed, and Simple Recent Comments.

The WordPress Plugins are very useful, so if you like them, just grab them. 🙂

Updated on November 01, 2008

The old web design of Pandan.ph Website had two layouts. The front page, the other pages and its subpages were using a three-column layout while the News section was using a two-column layout, both with fixed width.

The new web design of Pandan.ph have also two layouts. The front page is using a three-column layout but the rest of the pages are using a two-column layout.

The images above are the three-column and two-column layouts of Pandan.ph Website.

Before we went for a vacation on July 7-19, 2008, I finished revising the Website of Philippine Seafarers Assistance Programme. I used WordPress as CMS for the site, and it took me several months to finish it as I was not really working on it regularly. When WordPress 2.5 came out, I started working regularly on the site utilizing WordPress as CMS. WordPress 2.5 has a built-in gallery and I wanted that, not just a Plugin.

I made use of the built-in gallery for the Photo Gallery under Profile section and also for the Ship and Crew of the Month under Seafarers section.

The web design is not at all new, it was based on the original web design of the site. While I was working on the PSAP-PAROLA.ORG theme based on the original web design, I thought of not using any WordPress Plugin. Indeed I did not use any, not a single one, not even Akismet as the comments section for all the articles are all closed.

I just used Post instead of Page for the articles to make the sections dynamic. I used the word section instead of category as the site is not at all a blog. I just created several category and single category pages so the article belonging to a section will only appear in that section. I used category and postname for the Permalinks. I was able to make everything dynamic without using any WordPress Plugin.

I used two lay-outs for this site, a three-column page for the front page using one column for the sidebar positioned on the left, and a two-column page for the other pages in which one column is a sidebar also positioned on the left.

If you navigate the site, you will notice that the background color of the sidebar and the topbar changes in Profile, Seafarers, Volunteers, Resources, and Parola sections. I used the conditional if else for that and it worked. As I’ve said, I did not want to use any WordPress Plugin.

I was proud having been able to redesign the site. The newly redesigned Website of Philippine Seafarers Assistance Programme had been online since then.

I finished redesigning the website of Leocadio Alonsagay Dioso Memorial Public Library a month ago but was not able to write about it. I used two layouts in this site, a two column-page on the front page without a sidebar and also a two-column page for the other pages but the other column is a sidebar positioned on the left side. The website is using WordPress as CMS (Content Management System) for easy website updates.

It took me at least one and a half months to finish the site but in reality it was only two weeks as I was not working on it everyday. For me, it’s good to work on a project not on a daily basis so I will be able to think of something else that would be good for the site upon checking on it again.

The new web design was officially online on November 19, 2007 although the website has been online for probably three and a half years now.

I am always in contact with the founder of the Library and I thought of helping them as I am one of those very proud Pandananons, proud for having this one of a kind library in the Philippines, which is especially located in Pandan, Antique, the town where I grew up.

The Leocadio Alonsagay Dioso Memorial Public Library, located in Barangay Baybay, Pandan, Antique, Philippines, is the only full-service library in the area and the only one serving as an official access point for the Philippine Electronic Library “e-Lib” Project, for advanced researchers.

The Dioso Library was inaugurated on April 2, 2004, and has operated continuously since then, opening its doors to the public six days a week.