buttons in iPhone and iPad

Usually when using CSS to to style the input buttons on a website it should render the button exactly like you styled it except a few very minor changes between browsers. But on iOS devices the styling is replaced by Mac’s default buttons which has a sort of light gradient background.

webkit-appearance

After scratching my head for a while I found this silverbullet:
-webkit-appearance: none;

You can ofcourse prefix this by replacing -webkit- with -moz- but there aren’t many that use firefox browser on iOS

Advertisements

Empty “quotes” in HTML

Recently I was working on a project which had a overlay and in this overlay the main content was not aligned with the rest of the content as if there was an element which was empty. In chrome debug it appears as empty quotes: ” “, and in Firebug it’s just empty space. The problem is that you can’t look for it in your solution because it doesn’t exists in your solution and only appears in the browser. I tried to Google back and forward until I found a thread that could help me out. This problem occurs when you copy/paste the code from else where in to your editor. Much like any other editors when you copy/paste, you get a lot of formats which you can’t see but it doesn’t mean that they are not there.

chrome-unicode

The problem is Encoding UTF-8
The character in my issue is &#65279, and you can debug this only on firebug by clicking on the element which contains the character and then Edit HTML.

unicode-firefox

One option is to open the file in a very basic text editor that doesn’t understand unicode, or one that understands it but has the ability to display any non-ascii characters using their actual codes. You can then open the file that contains the element in Notepad++ format –> Encode in UTF-8 without BOM, this way you can remove the formating

notepadd

Save the file on notepadd++ and in your projekt and refresh, that should do the job

encoding-result

RWD vs Device Detection

Devices are many and they are coming in large numbers. People in average are using a devices such as smartphone, tablets etc much more than dektop and the numbers are getting higher. So how do we make sure that our site is accessible not only in terms of content but also design.

One device to rule them all!

In order to customize your website based on screen resolution, companies have dedicated a device based site dedicated to their own seperated adress which will be detected by a “device detection” script and then you will be redirected to that specific site but there are a couple of issues by using this approach. Increasing development cost and resource, so yo might ask yourself why? Why would companies do that? there are a couple of reasons why they “think” it’s better ro use device detection:

Benefits of Device detection

  • you can tailor and customize the content based on the device
  • Remove page elements rather than hiding them
  • Add elements rather than inserting
  • Performance, you only get what you need

Benefits of RWD

  • Customize content layout based on device type
  • Better user experience that would mirror the desktop version
  • Supports all kinds of screens and the future screens as well
  • Publish your content only once