boutrosabichedid.com – New and Improved
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.
I hand-coded this Website using several languages: HTML5, CSS3, jQuery, JavaScript and PHP.. Also I used Photoshop extensively. This Website follows the RWD approach with Parallax Scrolling effect.
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.
- JavaScript: This Website requires JavaScript to function. In case JavaScript is disabled, Website displays proper warning message.
- 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.
- Errors:Website includes a custom error page for the contact form. It also includes a custom 404 Not found page and an Error message when JavaScript is disabled or not supported.
- 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.
- Google Analytics: Website includes Google Analytics code. Google Analytics requires Javascript and first Party cookies to function.
- Contact Form: The user´s input in the contact form is validated using JavaScript and also HTML5 tag attribute. The contact form is processed using a local PHP script and not a Web service.
- 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.
- Drop-down Menu: For smaller screen sizes, when the menu is displayed as Drop-down, the menu continues to open and close and it does not stop until the page is refreshed. This behavior is intermittent between browsers and sometimes in the same browser. I suspect that this is JavaScript fix.
- 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.
Therefore, in addition of the HTML5 input validation, I am also using JavaScript validation that mimics the behavior of HTML5 validation attributes. Because of this combination, I am getting very weird results. I spent several hours already on the user´s input validation, and so far without success, I did not find a common ground for the contact form between satisfying New browsers and Old browsers at the same time. Stay tuned! [June 16, 2013 — SOLVED. Read below for details.]
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: you@domain.whatever
Contact Form User Input Validation
Do you know that you can use HTML5 attributes to validate user inputs.
My goal is to have an HTML5 form that validates user inputs on NEW browsers but it also has a fallback mechanism for older browsers by using JavaScript code to validate user input. JavaScript code will activate in OLD browsers.
After many hours of testing and trying to get the HTML5 form to work on both HTML5 and NON-HTML5 supported browses, turned up to be catch 22. To submit the form, if I put for the input tag type=”submit” then HTML5 validation will kick in and submits the form without going through JavaScript validation. But if I put for the input tag type=”button” then JavaScript code is activated but the form will not be submitted, since the HTML5 doc is looking for input tag of type=”submit” to submit the form. The form will not be submitted Otherwise. Therefore, user input validation with JavaScript is not feasible, you can´t get the form to work with HTML5 validation and also validating in old browsers.
For old browsers that do NOT support HTML5 attributes, these attributes will be disregarded and the form will be submitted without going through user input validation. To require user input validation on old browsers, you need to add PHP code, instead of JavaScript, to validate user input.
To Reiterate: The HTML5 Contact form works very nicely only in HTML5 supported browsers with input validation. Older browsers require PHP code for user input validation (and NOT JavaScript validation). You will never get this form to work, with input validation, for both HTML5 and NON-HTML5 supported browsers by using JavaScript validation. I tried for several hours.
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.
