The number of people visiting this site has increased (but more on that on later posts) and mostly from the United States, probably because of my programming blog. It's reaching 16k since 2011.
In line with the increasing page views, I decided to re-design my site to give it a fresh look and accommodate newer devices. Last night I finished my initial design to mvergel.com. Though it still needs polishing, I have uploaded it already it can be tested and I can be informed about the problems of the new design in different resolutions, devices, or browsers.
The design is minimalist with a hint of inspiration from the metro style. I had a dilemma between light or dark website but ultimately chose a dark theme, aiming to reduce eye-strain.
I took advantage of CSS3 for subtle effects. When you hover in the main menu, you will notice the smooth transition from being gray, semi-translucent image to an opaque, colored one. The bouncing animation of Twitter, Google Plus and RSS, and the way the advertisement follows you were also done using CS3. And the clouds! If you a browser other than Internet Explorer, e.g. Chrome, Firefox or Safari, you should be able to see several clouds moving from right to left. I had fun using CSS3; it enabled me to render effects and animations which, before, were impossible without Adobe Flash.
Speaking of advertisement, I decided to put one advertisement in my personal website so I can experiment on it. You should be able to see this on the right-side panel with the header "My sponsor" if you are using a desktop browser with a large-enough resolution. I placed it in such a way that it's visible without being obstructive or annoying. If it's annoying, feel free to comment about it.
The design is fluid; implemented using CSS3 Media Queries. What does this mean? If you're using a desktop browser, try resizing your browser window to a smaller width. You will see that the menu and content adjusts accordingly as the width becomes smaller as illustrated in the above image. The fluid layout is for better viewing on your mobile devices (iPhone, iPad, Android devices). There are still some quirks, like uneven padding and margin and it will be fixed later.
Lastly, I replaced the photos from my feed and from my "Photos" page with my pictures from Instagram. Instagram has recently opened their API to public, so I decided to take advantage of this opportunity and integrate Instagram to my site. Previously, I used Picasa Web Albums API to stream my photos.
That's it! The new design is still a work in progress, and it will improve over time. For now, I'm happy with the initial one.
In line with the increasing page views, I decided to re-design my site to give it a fresh look and accommodate newer devices. Last night I finished my initial design to mvergel.com. Though it still needs polishing, I have uploaded it already it can be tested and I can be informed about the problems of the new design in different resolutions, devices, or browsers.
The design is minimalist with a hint of inspiration from the metro style. I had a dilemma between light or dark website but ultimately chose a dark theme, aiming to reduce eye-strain.
I took advantage of CSS3 for subtle effects. When you hover in the main menu, you will notice the smooth transition from being gray, semi-translucent image to an opaque, colored one. The bouncing animation of Twitter, Google Plus and RSS, and the way the advertisement follows you were also done using CS3. And the clouds! If you a browser other than Internet Explorer, e.g. Chrome, Firefox or Safari, you should be able to see several clouds moving from right to left. I had fun using CSS3; it enabled me to render effects and animations which, before, were impossible without Adobe Flash.
Speaking of advertisement, I decided to put one advertisement in my personal website so I can experiment on it. You should be able to see this on the right-side panel with the header "My sponsor" if you are using a desktop browser with a large-enough resolution. I placed it in such a way that it's visible without being obstructive or annoying. If it's annoying, feel free to comment about it.
The design is fluid; implemented using CSS3 Media Queries. What does this mean? If you're using a desktop browser, try resizing your browser window to a smaller width. You will see that the menu and content adjusts accordingly as the width becomes smaller as illustrated in the above image. The fluid layout is for better viewing on your mobile devices (iPhone, iPad, Android devices). There are still some quirks, like uneven padding and margin and it will be fixed later.
Lastly, I replaced the photos from my feed and from my "Photos" page with my pictures from Instagram. Instagram has recently opened their API to public, so I decided to take advantage of this opportunity and integrate Instagram to my site. Previously, I used Picasa Web Albums API to stream my photos.
That's it! The new design is still a work in progress, and it will improve over time. For now, I'm happy with the initial one.
No comments:
Post a Comment