Archive for the ‘Education Web Design’ Category

April 5th, 2012  Posted at   Education Web Design
, , ,    |   Comments Off

HTML5 – The End of PSD to HTML Conversion Providers?

In 2009 the World Wide Web Consortium (W3C) decided to concentrate their efforts on HTML5, a new revision of HTML, rather than XHTML2. HTML5 is strongly supported by Apple, Opera, Mozilla, Microsoft, Google and other leading IT companies and web browser developers. All this means that HTML5 is becoming a mainstream of the Internet.

Among peculiarities of HTML5 there are backwards compatibility and forbearing error handling. In other words, with HTML5 websites written in previous versions of HTML/XHTML-CSS will not need an urgent update to be correctly displayed by even the most modern browsers.

Now the main question for PSD-to-HTML conversion providers:

Doesn’t this all indicate that PSD-to-HTML services will lose their importance?

Really, PSD-to-HTML companies declare “Code compliance with the latest W3C standards” as one of the main promises and advantages, but with HTML5 there will be no need in such a strict validity.

We believe that in the era of HTML5 the role of the professional PSD-to-HTML conversion will only increase.

Firstly, backwards compatibility and tolerance in error handling absolutely don’t imply indulgence towards and support of an ugly – unformatted and unstructured, garbage, hard to understand and maintain, and so forth – xHTML/CSS code.

Secondly, HTML5 puts special emphasis on semantics and document structure and introduces a number of new “semantic” tags.

The aim is to make the Internet more understandable and transparent both for people and search engine robots. A benefit for website owners is that the more correct search engines interpret and assess a website content, the higher the website is ranked, targeted and, as a result, more visible to its audience.

Proliferation of the best xHTML/CSS coding practices and web standards is and will always be among core tasks of professional PSD-to-HTML conversion services and the main reasons for designers to use them. And new HTML standard HTML5 strengthens this role even more.

One more important question is
Will the PSD-to-HTML services remain the same in the era of HTML5?

Our answer is “No”.

Let’s compare the Internet in 1990s and now – it is like apples and oranges:

1990s: In the early 1990s typical Web pages were written in the so-called academic style: it was a simple text decorated with the help of h1-4, b, i, ul/ol tags and a couple of images; technologies – HTML. Then more advanced approaches emerged: table-based websites with distinctive design and color palettes (now they are usually described as obsolete); basic technologies – HTML/CSS plus some JavaScript.

 versus

2010: The Internet is presented with stylish, poly-functional and usable websites with strong interactivity, interoperability, and built-in multimedia components and social media connection; technologies – XHTML/CSS2, XML, AJAX, open source CMS (content management systems) and blog platforms, etc.

It is quite clear that HTML coding for the Web of 1990s and 2010 requires different sets of skills and even different sense of beauty and good design. HTML5 could be a solid background for a new qualitative leap of the Web too.

HTML5 is developed not only as a theoretical platform. First of all it is a generalization of the 20-year hands-on Web practice and is conceived as a flexible tool for building the Web – as we know it now and as it could be in the near future. That is why HTML5 will strongly influence the PSD-to-HTML services and stimulate a new level of:

HTML and CSS technical expertise;
Understanding of web semantics;
Skills to integrate multimedia and social media components/channels;
Usability and website look and feel.

As a result, one may predict appearance of specific PSD to HTML5 conversion and

Deeper differentiation between design, HTML coding and other segments of the web development industry;
More emphasis on new development platforms and CMS including cloud platforms, social media, etc.;
Stronger specialization of PSD-to-HTML conversion companies;
More exacting requirements to coder training and quality assurance.

Whether HTML5 will be the end of PSD-to-HTML or just the beginning of essentially new PSD-to-HTML5 services – time will show. However, what is absolutely clear now is that there will be a lot of exciting work for designers, HTML coders, and back-end programmers.

Professional web developer with 10+ years experience. Chief project manager of HTMLcut.com, a PSD to HTML conversion and XHTML/CSS coding services company.

April 1st, 2012  Posted at   Education Web Design
, , , ,    |   Comments Off

Website design using HTML cutting

It is quite a common practice to develop the website design in the graphic design software first of all. All the pages of the web site are designed using the graphic design software and are then coded in different programming languages to develop the web design. The file format that is most commonly developed using the designing software is that of .psd files. These Photoshop design templates are then worked upon to convert these into different sections of a webpage and coded separately. So, how does the web design services providers go about doing these?

First step is the creation of the design template in photoshop. This is done by the expert graphic artists who are familiar with the nuances of website designing.

Second step involves the creation of files. One is the CSS file which is usually created by the name of style.css.Other is the index.html file which represents the home page of the site. A folder also needs to be created with the name of -images- that would be containing all the images and graphics. This step also involves the initialisation of the CSS file in between the header tags in the coding section of Dreamweaver.

In the third step, each of the broad sections of the web page are clearly defined and named as per DIV classification. For example, you can have DIV # header, DIV #footer etc. There is a container which is first defined and is centred on the web browser and it is this container which will contain all the DIV sections.

Fourth step involves the background colour selection from a small area of the template body using the rectangular marquee tool (M). The selection will show the colour of the template in the hexadecimal coding using the Eye dropper tool (I). After making selection, using the Edit section of the Photoshop file, select Copy Merged and then you need to paste the selection to a new document which you will need to open using Ctrl-N command. If Photoshop does not automatically fill in the size dimensions of the item on clipboard, you can take care to ensure that these are same as the once which you have selected using the rectangular marquee. After copying, it needs to be saved as Save for Web & Devices in the PNG file format in the images folder by the name of background.png.

Fifth step in website designing services involves coding for the background image in the source code editor. This will involve the setting of margin, padding, border, etc. as well as giving the path for background image and defining the fonts and colour codes.

Sixth step would involve the slicing of the title name and coding it. Title is selected with rectangular marquee tool and the same operation is carried out as in previous step of background coy and pasting. Name the file as title.png. Place it in the images folder. The coding will involve the source code editing sheet as well as the CSS stylesheet. In source code, you need to insert another DIV id by the name of –title. And this –title- will be defined in the CSS stylesheet.

Website design similarly follows these steps till the webpage template is cut, sliced and copied.

This article has been written by Website Design City, which is Australia based professional Professional website design services provider & Web Page Design Company.

Please visit us at: http://www.websitedesigncity.com.au/, for more info on Web Design Sydney services in Australia.