Monthly Archives: February 2013

Mobile Reality of PSD to HTML5 CSS3 Conversion


Can modern mobile and Web technologies amaze us ever more? The new HTML5 and CSS3 standards imply the answer “Yes” and promise to make our web and mobile experience much more stunning.

HTML5 is called to take into account vital needs of the modern Web and solve a number of issues not covered in the previous versions of HTML. But presence of such companies as Apple and Google amid the key supporters of the HTML5 development also suggests that one of the central ideas behind HTML5 is as much as possible integration of web technologies and mobile platforms.

The presumable aim is to support web-based and web-oriented mobile devices and systems to provide an effective environment for full-fledged web applications and cloud services. This reflects an increasing tendency of switching from ‘old-fashioned’ desktop PCs to more lightweight and convenient but already high-performance handhelds, netbooks, and tablets that much better satisfy the requirements of a contemporary person and globalized business.

HTML5 and CSS3 Features Useful for the Mobile Web

So what makes HTML5 so attractive for web application development in general and the mobile Web in particular?

Amid the new features of HTML5 which deserve special attention are as follows:

* Inherent audio and video streaming support and playback

E.g., users don’t need to install third-party Flash or audio players to use multimedia capabilities.

* Offline data storage

Now web applications can intensively use data caching on the client’s side. Thus making user experience smoother and increasing the application availability.

* Extended drag-and-drop support

* Web sockets

The interactive connections to the server are made really easy. Chat-like applications benefit here.

* Extended drawing capabilities (Canvas element)

It is useful for flowcharts, 2D games, stunning graphic interfaces which extend beyond the conventional HTML and CSS.

* Geolocation

It will provide location-specific information for users based on Wi-Fi signals or GPS, which can then provide users with content relevant to their physical locations.

CSS3 is another new standard responsive for web design as well as for overall user experience. Its hottest features are:

– Embedding custom fonts

– Translucent page elements

– Multiple background pictures

– Rounded edges for rectangular regions

– Shadows for fonts and regions

– Transform & Transition (available only for WebKit-based browsers such as Safari or Chrome)

HTML5 and CSS3 give a possibility to create more interactive and functional web resources, using less Javascript or AJAX requests and with less need for third-party plug-ins. In their turn, mobile applications based on HTML5 can be more dynamic and integrated than ever before. The major mobile platforms allow using of complex UI elements on the Web now (excluding only some specific native facilities of the operating system) and encourage this approach.

PSD to HTML5 Conversion Services

In the modern web development the gap between design and back-end programming is filled in by so-called PSD to HTML conversion services. Just PSD to HTML conversion providers stay first in line to make websites mobile, constantly keep abreast of the Web novelties and apply them in their work.

Previously a customer of PSD to HTML services asked to cut a separate mobile version of their website. Generally it was a static stump of the desktop version with a layout intended for smaller screens. Now there is a new possibility to make a full website rendered correctly on desktops, netbooks, smartphones or tablets of different device manufacturers. That is why many businesses that gain profits with the help of Web technologies strive to cut their websites cross-platform, so as not to fall behind in today’s competitive business environment.

Though HTML5 and CSS3 are not completely accepted yet (actually the final specification is expected to be finalized by 2014), their features are supported (in fact, only in part) by new versions of the main web browsers – Chrome, IE9, Firefox, Safari, etc. PSD to HTML conversion companies have started adopting the HTML5 and CSS3 possibilities too, to leverage new capabilities and grant smooth transition when standards are finally accepted.


Source link

Web Page Design – How to Get Started With CSS and Stop Using Tables to Design Your Sites


I’ve been working with CSS for a while and tables even longer. Having worked so long figuring out the tricks and workarounds for tables, I’ve mostly used tables for structure and CSS for style. That is not a bad thing. But is only using part of the power of CSS.

Moreover, I had a project recently that required a table free design. If you find yourself in this situation don’t panic. If you can understand the purpose of CSS, and learn or know the basics of CSS syntax, it can be a fairly simple process.

The main thing to keep in mind is that you are trying to end up with a site that has pages that contain mostly just data. You will also have one or more style sheets that contain all the structure and design of the site.

Since there are already books, sites and courses that cover all the details of CSS, I will not be going into the syntax or details of CSS. I’ve never found any aspects of CSS complicated enough to need outside instruction or even a book, but I have wasted time going over the details without seeing the big picture. This article will just cover the main aspects of CSS and what areas of CSS should be understood before you get into the details.

For practice, I took a site that was mostly done in tables, and converted the site to all CSS. The basic lay out of the site is a header, sidebar, main content area, advertising section and a footer. This is a fairly common lay out, but these guidelines will work for almost any lay out or new design.

First you must truly separate all the data from any structure and formatting. This seems obvious if you know anything about the reason for CSS. I only point this out, because it is very easy to throw some formatting in with the data if you are new to the process. That would not be the end of the world, but it would be missing the point of the exercise. Remember, the goal is to change the way you currently build pages and start using CSS wherever possible. The reason: so that major changes to the look and feel of the site can be made without having to make changes to all the pages.

Second always try to think if there is any possibility that you will be reusing the code.

NOTE: This may not make much sense if you have no or limited knowledge of CSS, but make a note of it and keep it in mind as you start using CSS.

If it is code that you will be reusing, make sure you make it a class. Also, try to put it in your main style sheet. As you become more advanced with CSS, you will most likely have multiple style sheets. Having site wide elements in your main style sheet will make them easier to edit in the future. Also, since all pages will be calling the main style sheet file, the class will always be available when you make a call for it.

Now, I’ll go in to the main issues, problems, etc. that I came across as I removed all tables and other formatting from the web pages.

The main problem with CSS is cross browser compatibility. Most designers and users know that browsers display pages differently. Unless you specifically code the site to display the same, or as close as possible, in all browsers, it is almost guaranteed the site will not display the same.

There’s a couple lines of code that should be added to each page.

– First declare a document type. If you are not familiar with a DTD (document type decleration) it looks something like this . The three main types of DTDs are loose, tranistional and strict. I highly recommend strict. Research to see what works best for you, but strict is the safest way to insure cross browser compatibility. It is necessary to declare a DTD or CSS simply will not work the same in the most popular browsers.

– You will also want to add this line: . This helps fix the IE compatibility error and will help with some sizing issues. It is not a must have. I have had no issues with the IE meta tag though. So, I would recommend adding it for now.

Next I recommend studying the box model of CSS. If you are used to using spacer .gifs, tables and the many other workarounds, this can be a tough habit to break. But once you have a good grasp of the box model, you will no longer need these workarounds for formatting and lay out. Also, if you start using CSS without understanding the box model you will most likely waste a lot of time bogged down trying to fix things that you would of never broken in the first place.

I’ve always hated the expression, “Think outside of the box”. I can truly say with CSS not only think inside the box. Learn to work inside the box.

Which brings us to our next fundamental. In CSS, just as HTML, you can use many types of measurement units. Usually working with pixels is fine, but the EM unit seems to be the most reliable. If you do not use a strict DTD for your pages definitely look at using EM instead of PX. Percentages are fine in most cases, but I have seen some small issues with using percentages. As you do your own research on this you will find more information. The main thing to remember is that 16px = 1em, and not all unit types will work in all browsers. Since pixels are most familiar to web developers, and EM is supported by all major browsers, these are the two main units that should be used.

Inheritance is also very important. Basically, colors, fonts and much more can be changed by CSS. The changes are applied via an external style sheet, a style sheet on the page or even a style applied directly into the HTML. Since the last style applied will be used, make sure you understand how inheritance works. Also, any default browser settings will be overridden by an external, internal or inline style.

A good example is the H1 HTML tag. I like to reset the default size and color of the headline tag. Although the default font is usually times and the default color is black, the font size usually changes slightly from browser to browser.

For instance, if I want most of the H1s to be a 20px Arial font and red, I would apply that in my main, most likely external, style sheet. But let’s say I have a page where I want the H1 tag to be a different size. I can override the external style sheet size with some inline style. So for this example, I really want my headline to stand out, and I change the size to 30px. But the headline color is still red and the font is still Arial.

Why? Even though, I reset the size with an inline style tag, the color and font family was never reset. So, until I override the color, or any other parameter defined by another style sheet, the H1s will inherit, in this case, the Arial font and red shading from the external style sheet.

Note: If you import multiple style sheets, it will use the last style applied to the page. When you use external style sheets the page is processed just as if the code were on the page. So if you run into issues, make sure you are not importing multiple style sheets that are in conflict with each other. A best practice is to make sure that you use unique names for all classes and IDs even if they are in separate style sheets.

Lastly, the default settings, such as margins, padding, colors, etc. can vary slightly from browser to browser, and between different versions of the same browser. Also, as new browsers are released and updated, it would be nice to know that your pages will not break. So at the very beginning of my main style sheet, I like to declare some global settings.

Generally, you will want to override the default padding, margins and borders at a minimum. The padding, margin and border are the main things that vary from browser to browser. Once again, it depends upon your needs. But, because of inheritance, this will override the default browser settings on all of your tags and elements automatically. Personally, I like setting everything to zero with a default color of white. I’ve never had any issues with cross browser compatibility using these settings.

As I said, there is a lot of information about CSS available online and from other sources. This is just a guide on the main areas to focus on first as you become the next CSS expert developer.


Source link

Dreamweaver Tutorials


Adobe Dreamweaver is one of the leading software applications for creating and designing web pages and web sites. The application has its roots in allowing the easy design web pages using a WYSIWYG (What You See Is What You Get) environment, but today also supports a wide range of other web technologies as well, including JavaScript and CSS, and server based scripting technologies such as ASP.NET, ColdFusion, JSP (Java Server Pages) and PHP.

Dreamweaver, which was originally developed by Macromedia (who were taken over and merged into Adobe Systems Incorporated in December 2005), is available for both Apple Macintosh computers and PCs using the Microsoft Windows operating systems. Although the program should arguably be a key part of every professional web designer’s toolkit, is probably fair to say that Dreamweaver interoperates especially well with other Adobe (and former Macromedia) tools such as Adobe Fireworks. It should also be noted that templates created in Dreamweaver can also be used with Adobe Contribute, which is a multi-user application that allows several people to work on editing a web site, all at the same time.

Although Dreamweaver does have a very clean and well thought-out user interface, simply because it incorporates some many capabilities, it can be quite to daunting to learn how to use, especially for users who lack extensive previous experience in web technologies. However, there are many excellent web sites, software tutorials, and, of course books, that can help new users to master the program. With the help of these types of resources, you might be surprised how easy it is to learn Dreamweaver.


Source link