This is a short post to announce (and advertise) my latest work: I recently redesigned my professional portfolio Website boutrosabichedid.com. Feel free to take a look at my Old Website for comparison. The improvement is HUGE!
So far I spent 5 weeks and 94.25 hours developing this Website, and of course, as you know for any Website, it will never be finished. There will always be room for improvement and fixes before it goes into maintenance mode.
Some characteristics of this Website:
- HTML5: Website follows HTML5 standards required by W3C.
- CSS3: Website follows CSS3 standards required by W3C.
- Accessibility: Website follows accessibility standards required by Section 508 Federal law, and by the W3C Web Content Accessibility Guidelines 2.0
- Responsive: Website uses the Responsive Web Design approach. The content readjusts based on the screen size of the screen. Go ahead and try it out, Resize your browser´s window and see how the content behaves. This Website not only function on any device, but looks great too, whether it is a desktop computer, laptop, tablet or smartphone.
- Parallax Scrolling Effect: Website uses Parallax Scrolling. This effect is now more often seen as part of the scrolling feature of a Web page. It uses multiple backgrounds that move at different speeds to create a feel of depth and a nice browsing experience.
- Usability: Website tested for usability. Also check the government usability Website.
- Fonts: Website uses 2 fonts chosen from Google fonts. I added these fonts locally in order to minimize HTTP requests.
- jQuery Plugins: Website uses jQuery library and several jQuery plugins to enhance user experience and for better design appeal.
- Compatibility: Website is backward compatible to work on older browsers, such as IE8 and IE9 and it also works OK on IE7. Optimally this Website is made for the latest browsers (IE 10, Safari 5, Chrome 28, Opera 12 and Firefox 22)
- favicon: Added favicon (my picture of course) to the header section. This icon displays beside the URL in the address bar or in the tab of the browser.
- Warning: Website includes warning message for older Internet Explorer browsers (IE8 and IE7).
- Thank you: Website includes a custom response page for the contact form.
- Photoshop: All images and graphics were enhanced, resized, edited or developed using Photoshop CS3 authoring tool. All images were optimized for the Web for better Performance
- SEO: This Website is on-page SEO optimized. It has been coded and content written with SEO in mind. SEO is the process of improving the volume or quality of traffic to a Website from search engines via “natural” search results.
- Search Engine Friendly? Website was developed (code and content) with SEO. However, this is Website is a ONE page website, there is no benefits from internal linking (internal keywords). For instance, if you search for a keyword located in the portfolio section, Google will be display the only page the website has, which is the main page (index.html) and not the Portfolio section. Therefore, I am not sure about the consequences of developing a one page scrolling Website from the SEO point of view. There are no internal pages, just one index.html page. This behavior is somewhat, but not exactly, like a Flash Website.
- Performance: To improve performance, I used tools such as Yahoo! YSlow and Page Speed Online. The score for Yslow is 79/100. The score for Google´s Page speed is 98/100. Please check Yahoo! Best Practices for Speeding Up Your Website.
- Speed: I used WebWait – Website timer tool. The average page loading time after 5 runs is 0.28 seconds. That´s good enough for me.
- Redirection I added redirection code in .htaccess file so that www redirects to a non-www. For example: “www.boutrosabichedid.com/index.html” will redirect to “boutrosabichedid.com/” This step is essential and has SEO benefits.
- Validation: Validated code (CSS, HTML and Accessibility) and fixed as much as I can. Some errors are beyond my control since I am using external jQyery plugins.
- Testing: Website was extensively tested to display and function properly on multiple browsers and multiple versions.
- Testing: This Website was tested to render properly at different screen resolutions: From mobile screen of 320px wide to a wide desktop screen of 1920px.
- Testing: Website was tested for the non-presence of images (when images are disabled).
- Testing: I spent many hours validating and testing this Website. It will be impossible for me to list here. Feel free to read the detailed procedure I follow to test and validate a Website.
Any Known Issues?
There are few known issues with this Website. I am working through them and hopefully I could resolve them. Specifically:
- Menu: The menu item does not exactly match the top of the page, especially when the user is scrolling upwards (from bottom to top). This behavior seems consistent across the 5 major browsers and I suspect that this is a CSS fix of padding.
- Contact Form Input Validation: This turned up to be the most frustrating issue for me. The problem is that this is an HTML5 Website (including the form tag), but I also want to make sure that the form also works on older browsers. Remember that older browsers don´t know how to interpret HTML5 elements so they get disregarded and sometimes with unpredictable behavior. Therefore, I have to be very careful what attributes I can use for the form.
Did you know that HTML5 form, “Input Type: email” attribute check for a valid email address. But the catch is, and I really hope that is just a bug and it will get fixed, that any email that has the format of you@domain passes HTML5 validation. HTML5 does NOT also check for the ‘period’. This is clearly wrong, a proper email is: email@example.com
Contact Form User Input Validation
Do you know that you can use HTML5 attributes to validate user inputs.
On old browsers, this form will NOT validate user inputs unless you add PHP code that validates user input.
Your Turn to Talk
What do you think about my latest work? How do you like the design? If you have something to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam. Enjoy! and I appreciate your feedback.