Profile

Cover photo
W3Design
35 followers|197,923 views
AboutPostsPhotosVideos

Stream

W3Design

Questions & Answers  - 
 
Over 23‘000 WordPress plugins have been contributed to the WordPress.org Plugin Directory. Millions of websites are powered by these plugins, developed and maintained by an amazing open-source community around the globe. This table showcases the 108 most popular WordPress plugins, ranked by the number of downloads. 
Over 23000 WordPress plugins have been contributed to the WordPress.org Plugin Directory. This table showcases the 108 most popular WordPress plugins, ranked by the number of downloads.
2
Add a comment...

W3Design

Share  - 
 
Website Templates
--------------------------

Website templates are web page designs created by professional web designers that are sold to others for their use. Templates normally have dummy content used as a placeholder so you can see what a finished page will look like. A template is an easy way for a novice to create a good-looking professional quality websites quickly and easily.
 
Most of the commercially available templates can be found in a variety of themes and color schemes. Theme templates come complete with appropriate graphic for each theme. If you have some graphic or web design skills and a knowledge of HTML, you can create a customized professional looking website at a fraction of the time it takes to create everything yourself. Just remember you don’t own the copyright to the design.
 
Before selecting a template, you will need to identify the goals you have in mind for your website so you can select the most appropriate template.
 
Advantages of Using Website Templates
 There are several advantages to using templates such as:
Templates provide the basic webpage layout.
Templates can provide a consistent look and feel for the site.
Most come with professional quality graphics.
Most allow you to customize the graphics if desired.
It is usually easy to add your content using almost any HTML editor.
 
 
Disadvantages of Using Website Templates
It can be difficult to make any web design changes unless you are skilled in both HTML and can use a graphics program like Photoshop.
Although features like a login box may be part of the template design, the programs needed to make them work are not included.
Any interactive features have to be integrated into the template.
You do not own the copyright to the design unless you actually purchase it from the designer.
 
 
Features of a Quality Website Template 
The following items are things to look for in a well-designed web template. A template should:
Be easily editable.
Be compatible with most HTML editors.
Upload easily.
Come with complete html files.
Have header graphics provided in psd format for easy editing.
Have their both the fla and swf files if the template uses flash.
Download quickly after the content is added.
Retain the original design no matter how much content is added.
 
Customizing an HTML Web Template 
If you want to customize a web template but don’t have the necessary skills to do it, most template designers and other web designers offer template customization services as reasonable prices. These services usually involve minor design changes, customizing header graphics, adding logos, removing unneeded unattractive elements, etc.
 
Many web developers will be happy to integrate any interactive features into your template. Please keep in mind that the developer will either need to write the necessary scripts or modify existing scripts to make the interactive features work. If an existing script is not freeware, the web developer will have to add the cost of purchasing a license for the script to his labor charges.
 
Customizing a Flash Web Template 
If you want to do anything more than just add text or substitute a graphic file in a flash template, you will either need have expertise in creating flash programs or hire a flash programmer to modify the template.
 
If the fla files came with the template, you can modify it using a flash editing program such as Macromedia Flash or Swish. If the fla files are not available the first thing that needs to be done is to decompile the movie since the swf files are movies. Once the movie is decompiled, the necessary changes can be made and the flash movie recompiled in any flash editor.
 
Summary 
A quality web template can allow a novice webmaster create a professional looking website quickly and easily at a reasonable cost. Since the templates came in a variety of industry specific themes and color schemes, you should be able to find one that is right for your website.
 
Web template can offer the professional designer a lost cost alternative to creating the web design, header graphic, logo and all of the other graphical elements, which will allow them to charge less for their work. In either case, it is important to purchase a quality template.

www.w3design.ir

#w3design   #webdesign   #Maziarmoradpour  
1
Shay C.'s profile photoMark Lee's profile photoW3Design's profile photoRaymond Andrews (SteelToad)'s profile photo
6 comments
 
No, it DOES matter. You're acting like it's a market or a sales presentation, rather than a Community. When you sit and talk with your friends in "real life" do you only tell them about all of the things you've done and seen and heard, or do you discuss each others issues, offering help when you have it, or remaining silent when you don't. The latter is how a Community behaves. Also, in a community, you don't take the work and actions of others and pass it off as your own.
Add a comment...

W3Design

Questions & Answers  - 
 
Graphic Formats
----------------------

Although hundreds of graphic file formats exist web browsers only support a few of them. This article describes the different graphic file formats that are available to web designers and when they should be used.
 
The graphic file formats supported by most popular web browsers are Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics. Some of the properties of graphic files are:
Transparency – this property allows the image to be varying degrees of opaqueness from solid to completely transparent (see-through).
Compression – this property allows the image to be stored in a much smaller file by using a mathematical algorithm to handle groups of pixels as a single item.
Interlacing – Interlacing allows the image to be loaded by first drawing the odd rows and then going back and drawing the even rows. It allows the visitor to see the picture sooner.
Animation – Animation gives the appearance of movement by using a series of successive still pictures. Animated gifs do not require a browser plug-in and can work on almost all devices.
Progressive loading – Progressive loading is similar to interlacing in that it only loads a portion of the picture initially but is not based on alternating rows and allows the user to see the picture quicker.
 
 
GIF
GIF was originated in the 1980 and was adopted by web designers in the early 1990s as the preferred graphic format for web pages. GIF files use a compression algorithm that keeps file sizes small for fast loading.
 
They are limited to 256 colors (8 bits) and support transparency and interlaced graphics. It is also possible to create animated graphics using the GIF format. All browsers can display GIF files.
 
GIF Advantages:
Most widely supported graphic format.
Diagrams look better in this format.
Supports transparency.
 
 
JPEG
JPEG files are compressed but support “true color” (24 bit) and are the preferred format for photographs where image quality matters. JPEG supports a progressive format that allows for an almost immediate image that will improve in quality as the rest of it loads.
 
Unlike a GIF file, the compression for JPEG files can be controlled by the web designer, which allows for different levels of picture quality and file size. All browsers can display GIF files.
 
JPEG Advantages:
Large compression ration mean faster download speeds.
Produces excellent quality for photographs and complex drawings.
Supports 24-bit color.
 
 
PNG 
PNG is a fairly recent format that was introduced as an alternative to GIF files. PNG supports up to 24 bit color, transparency, interlacing and can hold a short text description of the image’s content for use by search engines.
 
Unfortunately, most browsers do not support PNG and the ones that do support it, don’t support all of its features yet. But that will change in the future.
 
PNG Advantages:
Overcomes the 8-bit color limitation of GIF.
Allows text description of the image for search engine use.
Supports transparency.
Diagrams look better than they do in JPEG.
 
Vector Graphics 
Most web graphics are raster images or bitmaps, which consist of a grid of colored pixels. Drawing and illustrations should be created as vector graphics which consist of mathematical descriptions of each element that makes up the lines shapes and color of the image. Vector graphics are created by drawing programs such as Adobe Illustrator and Macromedia Freehand and are the graphic artists choice for creating drawings. Vector graphics must be converted to either GIF, JPEG OR PNG format to be used on a web page.
 
Which Format Should You Use? 
A web designer could choose either the GIF or JPEG format for most uses. But, since the file size of a GIF is usually small than the file size of a JPEG, most web designers will use the GIF format for backgrounds, boxed, frames and any other graphical element that look fine using 8-bit color.
 
Most designers will select the JPEG format for photographs and illustrations where the compression doesn’t compromise the visual quality of the image.
 
As PNG becomes fully supported by most web browsers, it will probably replace GIF as the web designer’s choice for non-photographic page elements. However, GIF will still be used for animation.
 

Bottom Line – GIF and JPEG are universally supported and the web designer’s choice is determined by the graphic element being used.
4
1
Aleh “Fen” Maksimau's profile photoAndrew Smith's profile photoRaymond Andrews (SteelToad)'s profile photo
3 comments
 
+W3Design  With all due respect, you need updated reference information
Add a comment...

W3Design

Discuss  - 
 
*Environmental Design with the Device API
--------------------------------------------------

If you’ve ever stood on a chair holding a cell phone up to get a better signal or refreshed a page that’s been hanging for 30 seconds, you already know that today’s user experiences have a gaping hole. We’re spending thousands of hours crafting interfaces that are the product of countless conversations, user tests, and analytics data piled up to our (virtual) eyeballs—only to have the experience crippled by a weird signal coming from a cell tower.


Maybe your user has switched from 3G to WiFi. Maybe her battery is low. Or maybe it’s simply dark out. Whatever the scenario, real-life factors can easily thwart your best intentions—and leave your users frustrated and angry.

The concept of considering real-world factors while designing isn’t new. [ Environmental design | http://en.wikipedia.org/wiki/Environmental_design ] can be traced back to at least 500 BCE, when the ancient Greeks started creating houses that were heated with solar energy, and it’s based on two simple truths: The real world exists, and you can’t control it.

You can’t control all the factors when a user interacts with your design, but you can certainly plan for them simply by acknowledging that they exist. I call these design conditions. Some design conditions, like the device a person is using, stay the same through a single visit or interaction with your product. But other design conditions—like energy consumption, lighting, and signal strength—have the potential (and tendency) to change during the course of a single visit, or even from page load to page load.

Just a year ago, I wouldn’t have had much of an answer for these user experience problems because the device-level APIs needed weren’t ready for primetime yet. But today, we can start to do something to improve our users’ experiences, even under these dynamic conditions, thanks to the recent buildup of the [ Device API | http://dev.w3.org/2009/dap/ ].

What is the Device API?
The Device API started in July of 2011 when Mozilla and Dr. Andreas Gal created [ Boot2Gecko | http://www.wired.com/gadgetlab/2012/05/hands-on-with-boot2gecko-the-mobile-os-built-entirely-on-web-standards/ ], an operating system entirely based on web technologies. The interesting piece to this OS is that Mozilla was also creating JavaScript APIs that allow device-level access from the browser.

Some of the APIs have stayed contained within the Boot2Gecko operating system, but a lot of the work has been transferred to the W3C for standardization. That’s the work we’ll be focusing on today as we explore these APIs and the potential they bring to improving how our products hold up against real-world and environmental design conditions.

Battery Status and Network Information
Responsive design has saved us a lot of trouble. But it’s also brought new and exciting problems like asset management to the forefront. How do we deal with images in a way that scales to any situation, such as small screens or limited bandwidth?

If it were simply an issue of “small screens get small images,” the responsive images problem would pretty much be solved with the [ picture element | http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/ ]. But this assumes a small screen should be served a smaller image to accommodate its size and potential bandwidth limitation. What we are starting to realize, though, is that the size of a display has very little relation to the amount of bandwidth available.

Under optimal conditions, everyone would have a lightning-fast connection with 100 percent battery life. The more people use mobile devices, the less likely that becomes, and the more often these conditions will affect your users’ experience. If a user is casually browsing over a fast connection, low-resolution images aren’t going to result in the best experience. On the other hand, if a user has a poor connection and minimal battery life, downloading enormous images could leave him with a dead phone.

It’s situations like this that make the [ Battery Status | http://www.w3.org/TR/battery-status/ ] and [ Network Information | http://www.w3.org/TR/netinfo-api/ ] APIs so interesting.

The Battery Status API can tell you how much battery life is left in the device (level), whether the level is going down (discharging) or whether the level is going up (charging). This information isn’t only provided as a snapshot at load time, but also at events that are tied to the battery status. The events that are currently in the specification include: onchargingchange, onchargingtimechange, ondischargingtimechange, and onlevelchange.

This gets a whole lot more interesting when coupled with the Network Information API, which lets you tap into bandwidth information about a device. As the draft is currently written, it returns two pieces of information: the connection speed in MB per second, and a true/false boolean value to inform you if the bandwidth is being metered in any way by the ISP. This is all the information you need to filter assets and manage bandwidth in the browser. To track when a user is offline, this API can also return a connection of 0.

Even though Network Information and Battery Status work wonders on their own, the combination of these two APIs has the potential to help you not just manage assets at initial page load, but also to modify the interface as the connection or battery status changes over time. You can even run energy tests to give a user an estimate about when her battery might die under the current conditions (like “miles to empty” in a car). You won’t be able to get specific information like “Facebook is draining your battery,” but you will know whether there’s enough energy to accomplish a certain task in your application.

These two APIs, and particularly the combination of them, should likely be our first resources for making designs better equipped to handle real-world scenarios. They allow us to detect for performance bottlenecks and craft an experience around them (remember our image management problem?). But there are a couple others that really stand out from the pack as well: the Ambient Light Sensor and Proximity Sensor APIs, which take experiences a little further out of the browser.

Ambient Light Sensor
The [ Ambient Light Sensor API | http://www.w3.org/TR/ambient-light/ ] uses the light sensor of a device to tell us about its current environment. Of course, the limitation of this API is that the device needs to have a [ light sensor | http://lists.w3.org/Archives/Public/public-device-apis/2012Aug/0084.html ], whether it’s filtered through the camera or through another type or sensor. It doesn’t matter where the sensor is, but it does have to exist. The API functions in much the same way as Battery Status in that the light level can be captured at initial load time and also through an event called ondevicelight.

This API might feel a little weird because it doesn’t use a normal web value like pixel, percentage, or em; the API returns values in lux units (lx). A lux unit is an international measurement of light intensity—not something we typically use on the web. In fact, I’d never heard of a lux before I discovered this API, but it makes me feel super-smart when I bring it up. Because this is relatively cutting edge, the device-level support for a lux value is a little hit-and-miss.

The Ambient Light Sensor API would likely improve the experience of using an e-reader, like the Kindle, because it allows access to information about the available light in a room. With this information, you can easily adjust color values, typography, or other design elements to provide a more comfortable reading experience.

Proximity Sensor
The [ Proximity Sensor API | http://www.w3.org/TR/2012/WD-proximity-20120712/ ], which enables near field communication (NFC) from the browser, is probably the furthest from our reach today—not because the specification is behind, but rather because most devices don’t yet have the necessary sensors. Relatively few smartphones contain NFC technology right now, and it could be a couple more releases until we see it in something like the iPhone.

If the user’s device contains a proximity sensor, you can access it to detect nearby objects enabled with NFC information (awesome, right?). The API contains an event called ondeviceproximity, which is triggered when an object is within the range of the sensor.

The W3C doesn’t recommend trying to accurately measure the distance of an object due to the volatility of today’s sensors. But you can still push the limits of user experience with just a few keystrokes by removing yourself from the browser’s constricting environment and unleashing the real world of interactive objects, light sensitivity, connection information, and energy consumption into an interface.

Pushing on with environmental design
Environmental design on the web is simply the concept of taking outside factors into account—something we’re just seeing the beginning of with the Device API.


More APIs are becoming available every day that you can start integrating into your applications in creative ways, but you shouldn’t feel limited by them, either. We know an experience doesn’t have to be the same in every browser, but I would argue it doesn’t necessarily have to be the same in every room of your house, either. As connections, battery life, and other situations change, so can a user’s experience with your site.

Dealing with chaos in the browser is a full-time job for most of us—it’s why we have quality assurance testing. The key to advancing the web and creating a successful experience is to embrace this chaos rather than spend your time fighting against it. Using the madness to your advantage and constantly adding to your UX tool belt will ensure we all help move web experience in the right direction.

www.w3design.ir

#w3design   #webdesign   #deviceapi     #environmental   #multidevices   #mobile   #maziarmoradpour    
4
1
Mark Oelze's profile photo
 
Use device information wisely to provide the best possible experience to the user.
Add a comment...

W3Design

Shared publicly  - 
 
بهترین شرکت های طراحی سایت کدامند؟
-----------------------------------------------

کافیست برای راه اندازی و یا تغییر وب سایت خود به دنبال اشخاص و یا شرکت های فعال در زمینه طراحی سایت بگردید تا آنچه در ادامه می خوانید برایتان ملموس تر باشد.
 ·  Translate
1
2
Add a comment...

W3Design

Shared publicly  - 
 
Due to browser security limitations related to cross-site scripting, this solution works only for iframe page content called from the same domain.
Personal and professional home of Christian web designer Nathan Smith.
1
Add a comment...

W3Design

Questions & Answers  - 
 
Web Design Versus Web Development
----------------------------------------------

The terms web designer and web developer are used interchangeably in the media and advertisements. But, they are not the same thing. Design involves what the visitor sees on your website, development involves the site’s functionality. This article explores the difference between these two disciplines.
 
A website contains several distinct aspects:
Look and feel – primarily the graphics, color scheme, navigation elements, etc.
Content – information, products, etc available on the site.
Functionality – functionality includes interactive features that the web site provides to the visitors and the required infrastructure needed to provide them.
Usability – the site from a visitor’s perspective and includes things like program interactions, navigation and usefulness.
 
 
Look And Feel 
Look and feel includes overall appearance of the website. A Graphic designer decides on what colors and fonts to use and how to layout each of the sites pages.
 
The graphic designer needs to have a good appreciation for aesthetics and feeling for what combinations of colors and imagery will project the image that the website owner wants visitors to have of the site.
 
Content 
Content is all of the text that is found on a website and includes everything from the privacy policy to a very persuasive sales letter extolling the benefits of a product and asking the visitor to part with their hard earned money and everything in between. If it is written text then it is part of the content. You need a copywriter and editor to create good content.
 
Functionality
Functionality includes all of the interactive aspects of a web site and includes animation. The common denominator is that programmers using the various web programming languages that work either on a web server or in a web browser create all of these functions.
 
Flash can be used to animate graphics. Perl, php and java are programming languages used on the web server to create sophisticated dynamic web pages. These pages can work independently but most commonly with a database to create all of the features we have come to expect from a website.
 
JavaScript is used in browser to create a lot of cool effects such as swapping images when a mouse moves over an image, “ticker tapes”, links changing colors, etc. JavaScript works in the user’s web browser rather than on the web server.
 
There are also other “backend” applications that are transparent to the visitor such as form processing, content management and other administration programs that make it possible for non-programmers to maintain some aspects of the website’s data.
 
All of these programs have to be integrated into the HTML code to be used on the webpage.
 
Usability 
Usability is the website viewed from the user’s point of view and involves mostly testing things like:
Does the look and feel are actually portraying the proper image?
Is the navigation is user friendly?
Does the navigation lead the visitor to where the owner wants them to go?
Does the site load quickly?
Do the applications work properly?
 
Design Versus Development
Unfortunately, there is a lot of overlap and integration needed between web design and web development. When you toss in content creation and usability testing, it becomes a real mess.
 
Can a single individual do all of these things? There are some people who can do all of these things but most people only do one or two of the tasks.
 
Web design usually involves content creation and look and feel while web development involves creating the functionality and testing its usability.
 
Web designers need to be proficient with graphic design tools like Photoshop. Most also know HTML so they can implement their designs. However, using animation on the site and layout for the site’s content are also part of the web designer’s responsibility.
 
Many site owners provide the content for the website but a web designer needs to be able to edit and even rewrite the content if necessary. Web designers also normally do the usability testing for the navigation and site loading speed.
 
Web development programmers create the functionality for the website, but all of that functionality must be integrated into the HTML pages on the site. Alternatively, the HTML content could also be integrated into the program. Web developers also do usability testing on the site, at least for the functionality they create. So the programmer also needs to have some HTML knowledge as well.
 
In either case the web designer and web development programmer need to work together to assure that the website does everything that the site owner requested.
 
Bottom Line – Only large companies can afford to hire separate experts in graphic design, content creation, programming and usability testing when building a new website. In most other cases, the web designer and web development programmer are two different people who must work together to create a successful website.

www.w3design.ir

#w3design   #webdesign   #webdevelopment   #maziarmoradpour   
2
Add a comment...

W3Design

Share  - 
 
Web Design Versus Web Development
----------------------------------------------

The terms web designer and web developer are used interchangeably in the media and advertisements. But, they are not the same thing. Design involves what the visitor sees on your website, development involves the site’s functionality. This article explores the difference between these two disciplines.
 
A website contains several distinct aspects:
Look and feel – primarily the graphics, color scheme, navigation elements, etc.
Content – information, products, etc available on the site.
Functionality – functionality includes interactive features that the web site provides to the visitors and the required infrastructure needed to provide them.
Usability – the site from a visitor’s perspective and includes things like program interactions, navigation and usefulness.
 
 
Look And Feel 
Look and feel includes overall appearance of the website. A Graphic designer decides on what colors and fonts to use and how to layout each of the sites pages.
 
The graphic designer needs to have a good appreciation for aesthetics and feeling for what combinations of colors and imagery will project the image that the website owner wants visitors to have of the site.
 
Content 
Content is all of the text that is found on a website and includes everything from the privacy policy to a very persuasive sales letter extolling the benefits of a product and asking the visitor to part with their hard earned money and everything in between. If it is written text then it is part of the content. You need a copywriter and editor to create good content.
 
Functionality
Functionality includes all of the interactive aspects of a web site and includes animation. The common denominator is that programmers using the various web programming languages that work either on a web server or in a web browser create all of these functions.
 
Flash can be used to animate graphics. Perl, php and java are programming languages used on the web server to create sophisticated dynamic web pages. These pages can work independently but most commonly with a database to create all of the features we have come to expect from a website.
 
JavaScript is used in browser to create a lot of cool effects such as swapping images when a mouse moves over an image, “ticker tapes”, links changing colors, etc. JavaScript works in the user’s web browser rather than on the web server.
 
There are also other “backend” applications that are transparent to the visitor such as form processing, content management and other administration programs that make it possible for non-programmers to maintain some aspects of the website’s data.
 
All of these programs have to be integrated into the HTML code to be used on the webpage.
 
Usability 
Usability is the website viewed from the user’s point of view and involves mostly testing things like:
Does the look and feel are actually portraying the proper image?
Is the navigation is user friendly?
Does the navigation lead the visitor to where the owner wants them to go?
Does the site load quickly?
Do the applications work properly?
 
Design Versus Development
Unfortunately, there is a lot of overlap and integration needed between web design and web development. When you toss in content creation and usability testing, it becomes a real mess.
 
Can a single individual do all of these things? There are some people who can do all of these things but most people only do one or two of the tasks.
 
Web design usually involves content creation and look and feel while web development involves creating the functionality and testing its usability.
 
Web designers need to be proficient with graphic design tools like Photoshop. Most also know HTML so they can implement their designs. However, using animation on the site and layout for the site’s content are also part of the web designer’s responsibility.
 
Many site owners provide the content for the website but a web designer needs to be able to edit and even rewrite the content if necessary. Web designers also normally do the usability testing for the navigation and site loading speed.
 
Web development programmers create the functionality for the website, but all of that functionality must be integrated into the HTML pages on the site. Alternatively, the HTML content could also be integrated into the program. Web developers also do usability testing on the site, at least for the functionality they create. So the programmer also needs to have some HTML knowledge as well.
 
In either case the web designer and web development programmer need to work together to assure that the website does everything that the site owner requested.
 
Bottom Line – Only large companies can afford to hire separate experts in graphic design, content creation, programming and usability testing when building a new website. In most other cases, the web designer and web development programmer are two different people who must work together to create a successful website.

www.w3design.ir

#w3design   #webdesign   #webdevelopment   #maziarmoradpour  
2
Add a comment...

W3Design

Share  - 
 
Graphic Formats
----------------------

Although hundreds of graphic file formats exist web browsers only support a few of them. This article describes the different graphic file formats that are available to web designers and when they should be used.
 
The graphic file formats supported by most popular web browsers are Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics. Some of the properties of graphic files are:
Transparency – this property allows the image to be varying degrees of opaqueness from solid to completely transparent (see-through).
Compression – this property allows the image to be stored in a much smaller file by using a mathematical algorithm to handle groups of pixels as a single item.
Interlacing – Interlacing allows the image to be loaded by first drawing the odd rows and then going back and drawing the even rows. It allows the visitor to see the picture sooner.
Animation – Animation gives the appearance of movement by using a series of successive still pictures. Animated gifs do not require a browser plug-in and can work on almost all devices.
Progressive loading – Progressive loading is similar to interlacing in that it only loads a portion of the picture initially but is not based on alternating rows and allows the user to see the picture quicker.
 
 
GIF
GIF was originated in the 1980 and was adopted by web designers in the early 1990s as the preferred graphic format for web pages. GIF files use a compression algorithm that keeps file sizes small for fast loading.
 
They are limited to 256 colors (8 bits) and support transparency and interlaced graphics. It is also possible to create animated graphics using the GIF format. All browsers can display GIF files.
 
GIF Advantages:
Most widely supported graphic format.
Diagrams look better in this format.
Supports transparency.
 
 
JPEG
JPEG files are compressed but support “true color” (24 bit) and are the preferred format for photographs where image quality matters. JPEG supports a progressive format that allows for an almost immediate image that will improve in quality as the rest of it loads.
 
Unlike a GIF file, the compression for JPEG files can be controlled by the web designer, which allows for different levels of picture quality and file size. All browsers can display GIF files.
 
JPEG Advantages:
Large compression ration mean faster download speeds.
Produces excellent quality for photographs and complex drawings.
Supports 24-bit color.
 
 
PNG 
PNG is a fairly recent format that was introduced as an alternative to GIF files. PNG supports up to 24 bit color, transparency, interlacing and can hold a short text description of the image’s content for use by search engines.
 
Unfortunately, most browsers do not support PNG and the ones that do support it, don’t support all of its features yet. But that will change in the future.
 
PNG Advantages:
Overcomes the 8-bit color limitation of GIF.
Allows text description of the image for search engine use.
Supports transparency.
Diagrams look better than they do in JPEG.
 
Vector Graphics 
Most web graphics are raster images or bitmaps, which consist of a grid of colored pixels. Drawing and illustrations should be created as vector graphics which consist of mathematical descriptions of each element that makes up the lines shapes and color of the image. Vector graphics are created by drawing programs such as Adobe Illustrator and Macromedia Freehand and are the graphic artists choice for creating drawings. Vector graphics must be converted to either GIF, JPEG OR PNG format to be used on a web page.
 
Which Format Should You Use? 
A web designer could choose either the GIF or JPEG format for most uses. But, since the file size of a GIF is usually small than the file size of a JPEG, most web designers will use the GIF format for backgrounds, boxed, frames and any other graphical element that look fine using 8-bit color.
 
Most designers will select the JPEG format for photographs and illustrations where the compression doesn’t compromise the visual quality of the image.
 
As PNG becomes fully supported by most web browsers, it will probably replace GIF as the web designer’s choice for non-photographic page elements. However, GIF will still be used for animation.
 

Bottom Line – GIF and JPEG are universally supported and the web designer’s choice is determined by the graphic element being used.
3
Shay C.'s profile photoMark Lee's profile photoOsvaldo Gago's profile photo
4 comments
 
+Mark Lee Damn spammers. At least they could do it with accurate and updated information :-) 
Add a comment...

W3Design

Questions & Answers  - 
 
*Environmental Design with the Device API
----------------------------------------------------

If you’ve ever stood on a chair holding a cell phone up to get a better signal or refreshed a page that’s been hanging for 30 seconds, you already know that today’s user experiences have a gaping hole. We’re spending thousands of hours crafting interfaces that are the product of countless conversations, user tests, and analytics data piled up to our (virtual) eyeballs—only to have the experience crippled by a weird signal coming from a cell tower.


Maybe your user has switched from 3G to WiFi. Maybe her battery is low. Or maybe it’s simply dark out. Whatever the scenario, real-life factors can easily thwart your best intentions—and leave your users frustrated and angry.

The concept of considering real-world factors while designing isn’t new. [ Environmental design | http://en.wikipedia.org/wiki/Environmental_design ] can be traced back to at least 500 BCE, when the ancient Greeks started creating houses that were heated with solar energy, and it’s based on two simple truths: The real world exists, and you can’t control it.

You can’t control all the factors when a user interacts with your design, but you can certainly plan for them simply by acknowledging that they exist. I call these design conditions. Some design conditions, like the device a person is using, stay the same through a single visit or interaction with your product. But other design conditions—like energy consumption, lighting, and signal strength—have the potential (and tendency) to change during the course of a single visit, or even from page load to page load.

Just a year ago, I wouldn’t have had much of an answer for these user experience problems because the device-level APIs needed weren’t ready for primetime yet. But today, we can start to do something to improve our users’ experiences, even under these dynamic conditions, thanks to the recent buildup of the [ Device API | http://dev.w3.org/2009/dap/ ].

What is the Device API?
The Device API started in July of 2011 when Mozilla and Dr. Andreas Gal created [ Boot2Gecko | http://www.wired.com/gadgetlab/2012/05/hands-on-with-boot2gecko-the-mobile-os-built-entirely-on-web-standards/ ], an operating system entirely based on web technologies. The interesting piece to this OS is that Mozilla was also creating JavaScript APIs that allow device-level access from the browser.

Some of the APIs have stayed contained within the Boot2Gecko operating system, but a lot of the work has been transferred to the W3C for standardization. That’s the work we’ll be focusing on today as we explore these APIs and the potential they bring to improving how our products hold up against real-world and environmental design conditions.

Battery Status and Network Information
Responsive design has saved us a lot of trouble. But it’s also brought new and exciting problems like asset management to the forefront. How do we deal with images in a way that scales to any situation, such as small screens or limited bandwidth?

If it were simply an issue of “small screens get small images,” the responsive images problem would pretty much be solved with the [ picture element | http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/ ]. But this assumes a small screen should be served a smaller image to accommodate its size and potential bandwidth limitation. What we are starting to realize, though, is that the size of a display has very little relation to the amount of bandwidth available.

Under optimal conditions, everyone would have a lightning-fast connection with 100 percent battery life. The more people use mobile devices, the less likely that becomes, and the more often these conditions will affect your users’ experience. If a user is casually browsing over a fast connection, low-resolution images aren’t going to result in the best experience. On the other hand, if a user has a poor connection and minimal battery life, downloading enormous images could leave him with a dead phone.

It’s situations like this that make the [ Battery Status | http://www.w3.org/TR/battery-status/ ] and [ Network Information | http://www.w3.org/TR/netinfo-api/ ] APIs so interesting.

The Battery Status API can tell you how much battery life is left in the device (level), whether the level is going down (discharging) or whether the level is going up (charging). This information isn’t only provided as a snapshot at load time, but also at events that are tied to the battery status. The events that are currently in the specification include: onchargingchange, onchargingtimechange, ondischargingtimechange, and onlevelchange.

This gets a whole lot more interesting when coupled with the Network Information API, which lets you tap into bandwidth information about a device. As the draft is currently written, it returns two pieces of information: the connection speed in MB per second, and a true/false boolean value to inform you if the bandwidth is being metered in any way by the ISP. This is all the information you need to filter assets and manage bandwidth in the browser. To track when a user is offline, this API can also return a connection of 0.

Even though Network Information and Battery Status work wonders on their own, the combination of these two APIs has the potential to help you not just manage assets at initial page load, but also to modify the interface as the connection or battery status changes over time. You can even run energy tests to give a user an estimate about when her battery might die under the current conditions (like “miles to empty” in a car). You won’t be able to get specific information like “Facebook is draining your battery,” but you will know whether there’s enough energy to accomplish a certain task in your application.

These two APIs, and particularly the combination of them, should likely be our first resources for making designs better equipped to handle real-world scenarios. They allow us to detect for performance bottlenecks and craft an experience around them (remember our image management problem?). But there are a couple others that really stand out from the pack as well: the Ambient Light Sensor and Proximity Sensor APIs, which take experiences a little further out of the browser.

Ambient Light Sensor
The [ Ambient Light Sensor API | http://www.w3.org/TR/ambient-light/ ] uses the light sensor of a device to tell us about its current environment. Of course, the limitation of this API is that the device needs to have a [ light sensor | http://lists.w3.org/Archives/Public/public-device-apis/2012Aug/0084.html ], whether it’s filtered through the camera or through another type or sensor. It doesn’t matter where the sensor is, but it does have to exist. The API functions in much the same way as Battery Status in that the light level can be captured at initial load time and also through an event called ondevicelight.

This API might feel a little weird because it doesn’t use a normal web value like pixel, percentage, or em; the API returns values in lux units (lx). A lux unit is an international measurement of light intensity—not something we typically use on the web. In fact, I’d never heard of a lux before I discovered this API, but it makes me feel super-smart when I bring it up. Because this is relatively cutting edge, the device-level support for a lux value is a little hit-and-miss.

The Ambient Light Sensor API would likely improve the experience of using an e-reader, like the Kindle, because it allows access to information about the available light in a room. With this information, you can easily adjust color values, typography, or other design elements to provide a more comfortable reading experience.

Proximity Sensor
The [ Proximity Sensor API | http://www.w3.org/TR/2012/WD-proximity-20120712/ ], which enables near field communication (NFC) from the browser, is probably the furthest from our reach today—not because the specification is behind, but rather because most devices don’t yet have the necessary sensors. Relatively few smartphones contain NFC technology right now, and it could be a couple more releases until we see it in something like the iPhone.

If the user’s device contains a proximity sensor, you can access it to detect nearby objects enabled with NFC information (awesome, right?). The API contains an event called ondeviceproximity, which is triggered when an object is within the range of the sensor.

The W3C doesn’t recommend trying to accurately measure the distance of an object due to the volatility of today’s sensors. But you can still push the limits of user experience with just a few keystrokes by removing yourself from the browser’s constricting environment and unleashing the real world of interactive objects, light sensitivity, connection information, and energy consumption into an interface.

Pushing on with environmental design
Environmental design on the web is simply the concept of taking outside factors into account—something we’re just seeing the beginning of with the Device API.


More APIs are becoming available every day that you can start integrating into your applications in creative ways, but you shouldn’t feel limited by them, either. We know an experience doesn’t have to be the same in every browser, but I would argue it doesn’t necessarily have to be the same in every room of your house, either. As connections, battery life, and other situations change, so can a user’s experience with your site.

Dealing with chaos in the browser is a full-time job for most of us—it’s why we have quality assurance testing. The key to advancing the web and creating a successful experience is to embrace this chaos rather than spend your time fighting against it. Using the madness to your advantage and constantly adding to your UX tool belt will ensure we all help move web experience in the right direction.

www.w3design.ir

#w3design   #webdesign   #deviceapi   #environmental   #multidevices   #mobile   #maziarmoradpour  
1
1
Add a comment...

W3Design

Discuss  - 
 
Why Good Website Navigation Is Important ?
------------------------------------------------------


Web surfers are basically an impatient bunch and if a website is hard to figure out because the links are not obvious, they will click away never to return. Website navigation is one of the most crucial elements in determining the effectiveness of a website. This article discuses the basic principle of designing website navigation.
 
To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.
 
As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:
 
Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.
 
When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.
 
Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.
 
I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.
 
Navigation Element Locations
 
Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.
 
Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.
 
Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.
 
Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.
 
Important Navigation Elements
 
Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.
 
Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.
 
Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.
 
Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.
 
Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form
 
       Home-> Articles-> Marketing
 
External Links – external links can be used anywhere but are most frequently used inside the text areas on a website. They may be references to more information located on another site, to recommended products, or to almost anything else.
 
Advertisements – advertisements are usually either a graphic or text with an associated hyperlink. Ads can be placed anywhere on a webpage but are usually used just under the header banner, down the right hand side of the page, under navigation elements on the left margin, across the bottom of the page or even interspersed within the test areas of the page. Studies show that ads “above the fold” are more effective.
(“Above the fold” refers to the area of a webpage that is visible without having to scroll.)
 
Downloadable Items – if you offer downloadable items such as audio, video or pdf files, make sure that you tell the user haw big the file is and whether they need an application to use the file. If they do an application, provide a link to the application. For example, provide a link to the free Acrobat reader if you offer pdf files.
 
Site Map – A site map is a good way to layout your entire site for your visitor. (Search engine spyders like them too.) It is just a hierarchical listing of every page on your site with a clickable hyperlink to that page.
 
Summary 
A good navigation system can increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.

#w3design   #webdesign   #maziarmoradpour   
4
Dirk Feilenberg's profile photo
 
Navigation is most important. And it is important that your Users use Navigation without Javascript. Try to take pure CSS-codes for it.
Add a comment...

W3Design

Questions & Answers  - 
 
Why Good Website Navigation Is Important ?
------------------------------------------------------


Web surfers are basically an impatient bunch and if a website is hard to figure out because the links are not obvious, they will click away never to return. Website navigation is one of the most crucial elements in determining the effectiveness of a website. This article discuses the basic principle of designing website navigation.
 
To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.
 
As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:
 
Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.
 
When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.
 
Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.
 
I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.
 
Navigation Element Locations
 
Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.
 
Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.
 
Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.
 
Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.
 
Important Navigation Elements
 
Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.
 
Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.
 
Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.
 
Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.
 
Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form
 
       Home-> Articles-> Marketing
 
External Links – external links can be used anywhere but are most frequently used inside the text areas on a website. They may be references to more information located on another site, to recommended products, or to almost anything else.
 
Advertisements – advertisements are usually either a graphic or text with an associated hyperlink. Ads can be placed anywhere on a webpage but are usually used just under the header banner, down the right hand side of the page, under navigation elements on the left margin, across the bottom of the page or even interspersed within the test areas of the page. Studies show that ads “above the fold” are more effective.
(“Above the fold” refers to the area of a webpage that is visible without having to scroll.)
 
Downloadable Items – if you offer downloadable items such as audio, video or pdf files, make sure that you tell the user haw big the file is and whether they need an application to use the file. If they do an application, provide a link to the application. For example, provide a link to the free Acrobat reader if you offer pdf files.
 
Site Map – A site map is a good way to layout your entire site for your visitor. (Search engine spyders like them too.) It is just a hierarchical listing of every page on your site with a clickable hyperlink to that page.
 
Summary 
A good navigation system can increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.

#w3design   #webdesign   #maziarmoradpour  
3
Add a comment...
Story
Tagline
صفحه اختصاصی طراحان حرفه ای وب سایت
Introduction
About
[W3Design] Professional web development company, website design company, seo services provider provides you php web development.

Mission
Web Designing, Website Development, Offer Google Services

Company Overview
W3Design is a provider of Total Website Solutions, web application and business integration solutions. Our business technology gives partners and customers the power to efficiently build, deploy, and integrate IT applications.

Description
We are different, because we concentrate on increasing web business success. suited exactly to your business. Your website should be EFFECTIVE for its purpose.
Links
Contact Information
Contact info
Phone
01315536351
Mobile
09113381347
Email
Pager
09355263133