Archive for the 'Web Design' Category

Watch This: The new Instagram logo

3D Touch on iPhone 6S Safari – Enhancing the way we interact or browse websites on mobile devices

Before the introduction of 3D Touch on iPhone 6S / iPhone 6S Plus, the only way to zoom in photos on the websites is to double tab to enlarge or double tab again to zoom out. However, with 3D Touch, you just need to press in a bit more on the screen, and the content will pop up, slide up to reveal more options, or slide down to close it. Furthermore, you can also press in on links to preview the webpages, without actually leaving the current page.

If you own an iPhone 6S / iPhone 6S Plus, you can go to Settings -> General ->Accessibility -> 3D Touch, to change the 3D Touch Sensitivity (Light, Medium and Firm).

IMG_0116

I was browsing tysoh.com on iPhone 6S, and was surprised to see how the 3D Touch has enhance the user browsing experience, without the developer to change any coding on the website. As you can see the screenshot below, there are many thumbnails at the bottom of the page, you can click on any one of them to begin.

IMG_0115

Click on any of the thumbnail, if its an image without link, the image will just pop up, slide up to Save Image or Copy, slide down to close it

IMG_0113

Click on any of the thumbnail, if its an image with link, the 3D Touch is smart enough to pop up a preview of the website, slide up to Open in New Tab, Add to Reading List or just Copy the link. Slide down to close it

IMG_0114

Bringing your Home Page back to basics: Logo, Navi, Intro and Highlights

Sound simple, isn’t it? But the toughest is actually getting the Web looks simple and yet useful for the targeted audience. We are often flooded with lots of information online, so why still flood your visitors with so many data? People usually come to your homepage, its either they like it or leave it, you only got few seconds to let them make the decision.

So how is this going to work? I have break them into 4 sections under the Homepage – Logo, Navigation Menu, Introduction and Highlights.

First of all, lets talk about the Logo, its all about branding here, there is no other way better than here to create a lasting impression or impact for the viewers. If you like, its also good to add some tagline below the logo, it can be the company vision/mission or simply things you are selling.

Secondly, its the Navigation menu, it must be clear and most importantly easy to click. If there are too many links, remember to create more space (targeting touch-based devices) around the texts and make sure it looks neat. Missing any clicks, can be frustrating for the users at times.

Thirdly, its the Introduction, it must be clear and conscise, visitors must be able to tell what you are selling. I would say no more than 3 sentences, however to continue this experience, for example, you can add in a “Read More” or “Contact Us”.

Last but not least, will be the Highlights of the site (it can be rotating banners, news or thumbnails), its always good to keep this section updated and look fresh for returning visitors.

Web Design Trend from 2004 – 2014: Table Layout, CSS, Web 2.0 to Responsive Design

This year will mark my 10 years in handling web projects, looking back, the web technology pace is indeed moving very fast. Since day 1 in 2004 when I started my first website using table layout, until the recent responsive design. I can see that not only the coding structure is changing but the number of platforms we need to cater to have expanded too.

Last time, many designers will have to cater different browsers, from IE6, and then slowly across to IE7, Mozilla (Firefox), Opera, Chrome and Safari. However, with the introduction of Smartphone (iPhone) back in 2007, and then tablet (iPad) in 2010, we observed the trend has once again shifted. We cannot just optimised the web for desktop anymore, as many people are always on the move, so optimising for mobile devices naturally make sense, and I believe this trend shall continue at least for the next 5 years. Maybe until some genius can come out with new “4D” technology.

In terms of the web design trend, I will basically break them into 4 main categories, Table Design trend, CSS Design trend, Web 2.0 trend, Responsive Design trend.

Thinking back table design is the time where many designers need not worry about handling so many different files, all they need to do is to place everything under one HTML file. However, with the increasing demand for more complex or demanding layout, nested tables started to complicate stuff for the designers, and the more nested tables you have, it will basically slow the page loading. Editing the tables can be a nightmare too. So, we know in the long run we need to get rid of table layout soon.

And then when CSS started to pick up, designers started to move the laying out of the page to using CSS. And this managed to make web design easier by separating the content out from the layout, and since its modular, it can be easily applied to other pages as well. I would say CSS is one of the major milestone in Web design history, which continue until today with CSS3 which is now capable of catering to responsive design and even simple animation to replace Flash totally.

Moving on, Web 2.0 trend is actually a combination of using several technology under one website, this consist of CSS, HTML, Javascript or even Flash. I would say this whole Web 2.0 concept is more of simplifying content for the users, and at the same time using Javascript or Flash to do up some mouse-over or eye-candy effect, to increase the interactivity for the users.

However over time, we observed that these effects has become a kind of obstruction for the users to focus on the site content, and so since the introduction of responsive design, which cater to viewing on desktop and touch-based mobile devices, we beginning to see lesser effects, and also because some mouse-over effect simply doesn’t work on touch-based devices. In fact, responsive design is about structuring the site content to make it fluid and more adaptive to different screen sizing, and also an emphasis on using typography. Everything seem larger and more high res in terms of images and texts.

Moving on, I wouldn’t say responsive design is suitable for all kinds of websites, it still have to depend on the targeted audience and the kind of experience the users are expecting. If we simply wanted to make things look consistent across, everything will just look so boring and meaningless.

Nevertheless, its still interesting to see how the Web will evolve in the coming years, especially with more high res display emerging into the market such as Retina display or the latest UHD 4K display. Certainly, it will continue to create more excitement and challenges for the designers. It’s all for a better future, isn’t it?

How to integrate PHP, CSS, jQuery and reCAPTCHA into a contact form (with sample files)

Would you like to integrate a PHP Contact form with the authentication technology (to determine human or computer) from reCAPTCHA, and visual effect from jQuery within your website, just like how I have done it for tysoh.com? You can now download the source files  (View Demo) I have provided and follow the step-by-step walkthrough below:

recaptcha

1) Sign up for a reCAPTCHA account under: http://www.google.com/recaptcha, take note of the public and private keys generated for your account, you will need it later in order for the form to work properly.

2) Open the file – ‘contact_form.php‘. Under row 62, enter your reCAPTCHA public key here.

contact_form1

3) Open the file – ‘ajax.recaptcha.php‘. Under row 3 and 4, enter your reCAPTCHA public and private key here.

contact_form2

4) Open the file – ‘sendmail.php‘. Under row 3 and 5, enter your email address and email Subject title respectively.

contact_form3

4) Last but not least, upload all the files to your server, and point to the file at ‘contact_form.php‘, if everything is working fine, you should see the reCAPTCHA box appearing in the webpage. You can now start testing for the contact page.

5) If its still no good for you, you can proceed to edit the Cascading Style Sheet (CSS) under ‘style.css‘, to modify the look of the form to fit your website theme.

References:
http://jquery.com
http://www.google.com/recaptcha

Integrate Google Custom Search in your website using Two page Layout

I have started using Google Custom Search (Version 1) back in 2009, and until recently after re-launching tysoh.com, I have decided to give it a try for Version 2, however after trying it out for a while, I find that its still very difficult to use, the documentation provided is not clear enough, and I have to do many trial and error before getting to what I intended. Furthermore, many customisation options are still missing, for example the option to remove the google watermark logo, the option to change background colour for the Adsense Block, the option to move the search button to the next line. These are just some of the limitations I have encountered so far…

gsc_0

In case you haven’t heard about this service by Google. Custom Search Engine is a tailored search experience, built using Google’s core search technology, that prioritizes or restricts search results based on websites and pages you specify. Your Custom Search Engine can be tailored to reflect your point of view or area of expertise.

Nevertheless, if you are still interested to have GCS in your website, I have figured out a straight forward method called Two page layout, and below is the step-by-step guide to get your started:

1) Go to: www.google.com/cse/‎ and sign up for an account

2) Create a new Search Engine, and you will be brought to the screen below, just click on ‘Look and Feel’ link located on the left hand sidebar, and select Two page layout. Click on ‘Save and Get Code’ link below the page:
gsc_1

3) Copy and paste the following code into your web page where you wanted the search box to appear:

gsc_2

4) Click on the Search Results Details button located near the top of the page, and enter the URL of your desired search results page.

gsc_3

5) Last but not least, click Next to proceed to the next screen to get your code and paste it into your Search Results page, remember that the name of this Search Results page must be the same as the one you specify in Step 4.

gsc_4

6) If its not good enough, you might want to click on the ‘Customize’ tab and set the colour for the search box, search results page:

gsc_5

Absolute or Relative values to set font size for your web pages using CSS?

Sometimes, the web technology is just moving too fast for us to catch up, and we human are so resist to changes and spoilt for choices. And this resulted in the topic I gonna cover today, when it comes to do font sizing for your websites, it can be quite confusing which is the best practice we should follow, in order to provide the best experience for the users.

Today there are basically 4 ways that you can set font sizes for your web pages, there are known as PX, PT, EM and Percentages. PX and PT are known as absolute values, while EM and Percentages are known as relative values. I have been using PX since I have started doing web design backed in 2004.

However, due to the dominance of touch-based smart phones, as well as tablets in the recent years. People are using different screen resolution, so the tendency for the browsers to rescale the font according to screen-size is unavoidable.

I have recently moved on to switch all the CSS to using relative values (EM and Percentages) instead, as its not based on absolute units, meaning the web pages resolution is not fixed on the user screen, they can adjust it accordingly.

So how do I actually use it? Percentage is only use once, which is set under the Body as 100%. The font-size: 100% is used to specify a “base” size and have all the subsequent HTML elements font-size set relative to it. Below is just an example:

body {font-size:100%;}
P {font-size:1em;}

That way, people who visited your site will see the text at the right size for what they have set in their browser preferences. For example, people with low vision may set the text size larger. If your font-size is set to 100%, they should see it exactly as desired. After that, you could set the sizes on your h1, h2, p, etc. with em

The only tip for using relative font sizes, is to use as few font-size changes as you can, to avoid too many nestings.

Travel to top