Thisismarkantony.com

How To Accessibility 100 Disguised. XP Commands Guys,How To Accessibility 100 Disguised. XP Commands? Here i m presenting a instrument called Disguised. Resources XP. This is great program to do so. Hidden Resources XP allows use of nearly 100 hidden utilities that are not normally available to the normal person. System information, diagnostics, maintenance methods and more in both House windows and Control Series utilities are now easily started out. Hidden Resources XP features availability to 53  windows tools and 43 Control Series utilities.This program is 100% free to obtain. download it by make a search on search engines.

One of the simplest things that HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field when the page loads.     <input type="text" placeholder="Type comments here"> When you click on the input field and start typing, the placeholder text disappears... but what about IE? In a recent design it all looked cool (see pic) - I'd dispensed with labels for my input form and only had placeholder text. This was to save space and make it fit for mobile consumption. But then on testing in IE8 I remembered that it doesn't support placeholder text!! Two choices, a re-design with form labels (ugly) or force IE with some JavaScript to rewrite the input field. Obviously I'm not the first to have a problem, and the solution is already well established. Over at  www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html  there is a great jQuery fix by Nico Hagenburg...

This is a quick review of the three main formats for publishing digital magazines other than our favourite online publishing medium (HTML & CSS).  These formats are primarily designed to be consumed as magazines in an application specific to a device (iPad, Kindle, Galaxy tab, etc.) rather than a web page in a browser. .pdf format  The advantage of using pdf is that the design is "locked in" when it is created.  The user has little control and cannot change font, text or format. For designers this is a bonus as their  baby  can't be mangled by such things as browser version or screen size. However, there is no elastic of liquid layout which can prove a problem given that different devices have different aspect ratios. Users end up moving the document around or zooming in and out to see the whole page. Interactive pdfs can include buttons, hyperlinks, page transitions, embedded swf and videos (see my link at the bottom on making interactive pdfs) .e...

Grid systems can be used as guides when designing the layout of a web page. They help with alignment, placement and sizing of elements across the width of the page. The flexibility of grid systems allows for various permutations of column sizes. In this post I'm going to briefly discuss four basic grid systems - the "traditional"  960 grid system , two  970 grid systems  using  12 columns  and a 970 grid system derived from the  Golden Ratio . Before we start it's probably worth mentioning that the current trend of desktop/laptop website widths are based on the majority of viewers screen size which at the moment sits at around 1000 pixels (I remember when we designed sites with a max width of 800px). Check out my previous post  what is your average viewers screen size   and follow the googlelabs link for the current assessment of the situation. The 960 grid  is based on a page width of 960 pixels that consists of 12 columns. Each...

This is the best thing I've come across for some time - a logical/technical way to pick font sizes in relation to each other. Read on and if you have time, watch the video as Tim Brown gives his explanation (30mins). Essentially this technique is built around using a harmonious modular scale (using the Golden Ratio or any other "beautiful" scale) and applying it to text size (so simple I can't believe I haven't run into this before!!) Once you have settled on a suitable type size for the body text you can use the Golden Ratio to find a modular scale of headings and smaller fonts sizes that are visually in proportion, for example: Golden ratio = 1:1.618 Text size = 16px 16 x 1.618 = 25.888 16 / 1.618 = 9.888 This produces a pixel scale: 41.9, 25.9, 16, 9.9, 6.1 You can also "reverse engineer" an element box width to find the appropriate text/heading size, for example if you have a column of 570px (like this one) then divided by the G...

Following on from the last post about calculating beautifully proportioned text sizes, I thought it would be good to cover the "correct" unit of text measurement rather than just sticking with pixels. The W3C recommends that you use ems for font sizes - why? The "em" unit is the most scalable when it comes to on-screen display (read more from  W3C here ) Basically it gives users the ability to scale up all the font in a web page using their browser settings and see them "grow" proportionally. This is for accessibility reasons. Generally when you are in the design phase using pixels sizes is easier - so in the end you'll need to convert from pixels to ems. So how to convert pixels to ems? Most browsers have a default font size for "medium" text of 16px. In this case 1em = 16px. So if you want a font size of 20px you need to divide 20 by 16 which equals 1.25em - easy. You can use the following widget to calculate em sizes. Another trick...

For most web pages and blogs "content is king" (Bill Gates c. 1996) and in addition to text, content should include images, photos and infographics. I would go so far as to say that images/graphics are even more important now than they were 12 months ago. Just look at the new web apps and design views that are turning up. Thumbnails are the  plat du jour  - mobile phone apps and tablet layouts are navigated using images and thumbnails. So to have an appropriate image or graphic for each web page or article is essential. graphic thumbnails from the web devil blog Great looking graphics will also attract viewers and keep them coming back for more visual feasts. The last thing people want is to wade through paragraphs of text without a visual break. And as the famous saying goes " a picture says a thousand words ". Other benefits of images are in searchability. The number of image searches (google images, flickr etc.) is increasing substantially and relevant...

In a previous post I mentioned the various screen resolutions of popular mobile phones. Today I'll mention how the screen size and viewport may be different! So, what is a viewport? The viewport for web design is defined as the rectangular area (measured in pixels) that is viewable on the screen and determines how the content is laid out and where text wraps or windows need to be scrolled to see the full webpage. Isn't the viewport the same as the screen resolution? For most devices the screen resolution/display size is equal to the viewport. This is true of desktop and laptop computers, however  for mobile devices this may not be true !! Many phone browsers scale web pages down to a wider viewport width to fit them onto the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and scale the pages up to view the bit they want to see. For example, although a device screen might have a width of 320px the viewport can have a width of 980p...

Infographics or information graphics are visual representation of data and are a great way to explain complex information in a clear graphical way. These usually take the form of maps, charts and diagrams that are both interesting and appealing. There is a great article over at  submitinfographics.com  that looks into the eight factors that make a good infographic. I've summarised Amy's work into the following points and a simple infographic (that breaks some of these "rules" - click image to enlarge) 1. Data Visualisation Must be data driven - not just fancy looking text (think chart, map etc.) 2. Clean Colour Pallet Must compliment the website, colour must be significant - no MS Paint style colour pallets. 3. Clear Story Should tell a story with pictures - and contain more than one piece of information (good infographics weave different facts and data together). 4. Dimensions Don't make the infographic too big. It has to fit on the average viewers monito...

I've tried to include a comprehenisve list of all solutions to this common problem. It is one of those web design problems that every web designer runs into eventually. You have two or more columns that have auto height (so it expands to the content) but you want to have both columns take the height of the tallest one. You may become frustrated and just go for a fixed height on both columns - but this isn't really a solution. There are basically 7 work-arounds for this problem which I will briefly note and reference other sites that show the solution in more depth. 1. The Faux Columns method This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image.  www.alistapart.com/articles/fauxcolumns/ 2. The Overflow Crop method This method uses overflow:hidden CSS and...

Web accessibility is making multimedia and web content accessible to people with disabilities. The following infographic gives a short summary (click to enlarge) Accessibility aims to address the following: Visual impairments including blindness, poor eyesight, colour blindness Motor/Mobility: difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control Deafness or hearing impairments Seizures caused by visual strobe or flashing effects Designing for Accessibility The W3C (world wide web consortium) provides guidelines to help developers of web and multimedia to create accessible material.  www.w3.org/TR/WCAG10/#Guidelineswww.adobe.com/accessibility/ Accessibility Guidelines The following are 4 key guidelines that apply to multimedia design: 1. Provide equivalent alternatives to auditory and visual content Use the image ALT attribute Make pages that are screen reader friendly Give videos subtitles 2. Don't rely on colo...

Sound is important to multimedia and application development - however the era of sound in websites has thankfully passed (don't you just hate landing on a website to be greeted with a blast from your speakers!) Finding the right sound - and a sound that you can use commercially without infringing on copyright laws can be a challenge which is why I've put together a list of the best multimedia sound resources on the web. Here is a quick review of current online sound libraries: freesound.org Free sounds released under the Creative Commons Sampling Plus License. Good for recorded environmental sounds. You need to have an account to download.  100,000+ sounds soundsnap.com Insane number of sound effects and music loops.  Used to be free - now it's  a pay-per-sound library.  You can still preview all sounds without logging in. This is the premier sound library on the internet (if you're willing to pay a few $$). 120,000 + sounds soundbible.com Free sound...

This is a follow-up to the last post which was about t he size an eBook cover should be .  I'll quickly outline how to optimise a colour eBook cover so that it looks good when viewed on E Ink devices and on colour devices. As discussed previously, currently an eBook cover should tick all the following boxes: 600 x 800 pixel size title, author readable at small sizes  colour looks good for pc & tablet viewing also looks good on E Ink devices in grayscale The last point is really important and means that you need to create your eBook cover to work both in colour and in grayscale. Here's a quick tip using photoshop to quickly flick back and forth between grayscale and colour so that you can make it look good in both. Firstly scale your image to the correct size (600x800) then in the layers panel add a new adjustment layer by clicking on the little circle icon (Step 1 in the graphic).  Choose the Black and White adjustment layer (Step 2) - and just...

There is a great article over at  smashing magazine about the copywriting errors  that can ruin a company website - these points along with using content templates, writing great H2 heading tags and using appropriate images and infographics will ensure great content for the website you're designing. Let's start with those copywriting errors: 1. Focus on the reader NOT the company What's in it for the reader how will it benefit them and give them a better experience?  They don't want to know about how cool the company is. The article has some useful links to  setting a word budget  to promote a product or service. 2. Put the message up front The average web visitor scans a page to find what they are looking for and will move on if it's not obvious.  (check out  the dominant reading pattern of a web page here ) So put the main message up front and obvious.  Check out  this post about how to write good H2 titles . 3. Make meta data work ...

A call to action button entices your viewers to click to do more than just read.  This can be anything from  Buy  to  Try  to  View  and anything inbetween. What is it that you want your viewers to do? Writing a compelling  Call to Action  will help your conversions. One tried and tested method is to have an  Action  (order or command) followed by the  Product Name  (optional) with a  Timeframe  (for a sense of urgency) and then a  Tagline  (sometimes located outside the button). The following simple form allows you to pick some common variations to come up with a unique call to action phrase that fits your product or service. Web Devil Call to Action Generator:     ..choose an action     Order     Buy     Add to basket     Get it     Buy your tickets     Purchase     Add to wishlist     Schedule a con...

You want your readers to be able to quickly scan your web page and pick out the information they are after. But how easy is it to read your website? What we need is reliable readability tests! Online readability tests are quick tools to measure your text.  Take a look at the following two sentences: "The afore mentioned web resource provides statistics on the ease of readability of documents." Gunning Fog index: 14.17 "This website is great for measuring how easy it is to read some text." Gunning Fog index: 5.60 ..both mean the same thing - but have vastly different reading levels.  The Gunning Fog index is just one measurement. It indicates the number of years of education needed to understand text on first reading. Obviously the second sentence would be understood quicker and by more people. Check out this online readability test  www.online-utility.org  - just cut and paste the text.  It has a number of different methods of analysing your text ...

A crossdomain.xml file is a file that usually sits in the root folder of your webserver.  This file is basically an opt-in to allow access to your data from outside your web domain.  This is the crossdomain bit - you have to actively give permission for someone to "trespass". Many web applications require access to data from somewhere different than where the app file originates.  The crossdomain.xml file gives these web apps permission. Things that may require crossdomain.xml access: Flash SWF Flex Adobe pdf reader Silverlight Example of a crossdomain.xml file: This following example of a crossdomain file basically allows no access, it's the strictest policy.  <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy>     <site-control permitted-cross-domain-policies="none"/> </cross-domain-policy> If you want to al...