I'm developing an eCommerce platform for one of my customers, I have to implement a retina-responsive logo (vector format, svg), everything is working fine on Firefox, Chrome and IE but not Safari (iOS & OS X), many scratches are appearing, here is a screenshot:
http://i.imgur.com/mpGdXD8.png?1
Regarding the code:
<div class="row">
<div id="header_logo" class="col-xs-12 col-sm-{4+$warehouse_vars.logo_width}{if isset($warehouse_vars.logo_position) && !$warehouse_vars.logo_position} col-sm-push-{4-$warehouse_vars.logo_width/2} centered-logo {/if}">
<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$img_dir}/logo.svg" data-fallback="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}" />
</a>
</div>
The e-commerce solution is based on Prestashop 1.6.0.14.
The logo was initially built using Photoshop then vectorised with Inkspace.
Many Thanks for your help.
I created for you the Logo, with Inkscape:
http://www.mediafire.com/download/5adsdwl9a3zeidu/Mytech_Logo.svg
Download it and test it, should work.
Usually when you vectorize with inkscape it creates many layers with different colors, this makes the file very large, compare the file size of your logo, and the one that i sent to you, that one have around 10KB, and some times vectorized files could lack in some browsers, caused for all those layers and the background transparency, probably IE9 have this problem too, or some other browsers.
Instead try to create it directly with Inskcape, the vectorize method is not usually the best option, if you want to implement it on the web, as i told you before:
Creates very large files.
Also if you use the option "smooth", It will seem with blured borders.
And if you don't use it the edges will seem rough, of that way it loses the retina concept, at the end there won't be a difference between a .jpg and .svg file.
Hope been helpful!
Related
My goal is to create an input like the one described as being 'outline variant' in these Material docs.
How do I configure and/or what CSS should I add to materialize CSS forms to use the 'outline' variant?
There appears to be a few issues/requests for this outline variant, but the Materialize folks have indicated that it wasn't part of the spec at the time and have subsequently closed the issues.
I dug through some of the Material samples versus styling on the Materialize framework and noticed that they are handling things slightly different as far as padding, borders/shadows etc.
Achieving this outline variant as the default treatment is going to require some slightly destructive style updates that should probably be handled via the preprocessed files, but here is an example of some quick and dirty overrides
Note the addon class "input-outlined" in the markup:
<div class="col input-field input-outlined s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
As far as I can tell, they're related but not the same project and do not use the same CSS files. I was using a CDN link for Materialize for a little while and none of the Material.io classes were taking effect.
Then I switched over to using the suggested Material.io CDN links, found here: https://material.io/develop/web/docs/getting-started/
Once I did that, I could use the HTML markup and class names that became visible on the page you provided after I clicked the "Web" tab.
It works. Here is a Codepen showing both styles of text inputs in action (this Codepen is using the Material.io CDN links in the settings).
The main difference between filled and outlined is that filled looks to be the default. I'm inferring that the Material.io design system has you repeat the classname and append a modifier if you wish to deviate from the default.
For instance, in the linked codepen, notice that the filled (default) text field is inside <div class="mdc-text-field"> while the outlined text field is inside <div class="mdc-text-field mdc-text-field--outlined"></div>.
Fontastic.me is a website that let you upload svg files so you can use your icons as a font. I've used this site lots of times, but today I noticed the icons are not working on mobile anymore. They do work in the browsers on computer. I only noticed it today, it has always worked before.
You can use this link to test on mobile.
To me it seems like a bug in the Fontastic CSS generator: your page links CSS
https://fontastic.s3.amazonaws.com/8pMGtiqubDqmpbD4ER7hE3/icons.css
this contains last SVG fallback linked as
https://cdn.myfontastic.com/8pMGtiqubDqmpbD4ER7hE3/fonts/1446830181.svg#1446830181
the hash part of the URL must correspond with font ID in the SVG, but actual source contains <font id="cloud-font" horiz-adv-x="512"> instead.
So replacing #14468301 with #cloud-font in CSS or replacing #id value in SVG should fix your problem.
This applies only for case your mobile really resorts to SVG version. Only few browsers would do that (I think Android below 4.4, maybe old Safari, Blackberry, and maybe Opera Mobile).
(Besides that, your HTML contains extra HEAD tag with icon CSS link in BODY, what is not valid. I donʼt think this will make any sane browser completely ignore the link, but cannot exclude such possibility. If you have served your page as real application/xhtml+xml, browser should show the error right away.)
Greg, i had the same issue. I end up ditching Fontastic and use https://glyphter.com/ instead.
Glyphter creates your own font set by uploading each character at a time.
It worked for me and perhaps you can try this too and see if it works.
I am using Kentico 7 as the CMS to create the website. I am searching for a Rolling Banner web part, to put on the home page as the head banner, which can:
Be responsive.
Have caption area.
have navigation button on left and right.
would be nice to have instruction for me to insert to Kentico 7.
Must works in IE8, Firefox and Chrome.
I have tried to use Camera Slider but it does not work in IE8.
Checkout Slick.
It's a pretty easy to implement slider that has good browser support, with good documentation, and can be responsive if you pass it the right arguments.
I typically place the wrapper for my rotators in the HTML Envelope of a repeater, then use build a transformation for my slides, like this:
<!--Envelope before-->
<div class="slick-wrapper">
<!--Transformation-->
<div class="slide">
<img src="{% GetImageMethod() %}">
</div>
<!--Envelope after---->
</div>
However, keep in mind that IE 8 does not support media queries, so you'll want to use a JS feature detection library like Modernizr
i want to know wheter open laszlo has data uri feature. The following example will show a red dot where the red dot is an image and base64 data is passed to it. Is it possible to do something like this?
example is given below
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
You are referring to Data URLs as specified in RFC 2397. That feature not supported in OpenLaszlo, and it only would be relevant for DHTML applications anyway. For the SWF runtime, images can be compiled into a SWF file as static resources, increasing the file size and reducing the number of requests needed to send to the server.
There are size limitations for inline images as well. Browsers are only required to support URLs up to 1,024 bytes in length, according to the above RFC. Browsers are more liberal in what they'll accept, however. Opera limits data URLs to about 4,100 characters. Firefox supports data URLs up to 100K, which means you should only use the technique for small to medium size images.
Even though Data URLs are not supported in OpenLaszlo, a similar - and in my eyes - more powerful option is available. The automatic generation of a CSS sprites for images you add as static resources. When you select the 'Use master sprite' compile option, the OpenLaszlo compiler will create one PNG sprite map containing all those static resources.
Here is an example of the master sprite PNG for the OpenLaszlo weather widget. Instead of making multiple requests to download the individual images, the browser just has to make one request.
I am a designer whose main marketing strategy is multi browser compatibility. I assure my clients that the site will work even in IE6 (!).
Of late i have been pondering over the question of moving to HTML 5. The reason behind my apprehension is that IE6 is still a major player in terms of market share and i don't want to lose it.
Is there any way of moving to HTML 5 and still promise multi browser compatibility?
Thank you.
Yes, by taking baby steps.
To start with, you can switch to the HTML5 doctype: <!DOCTYPE html>. This switches just about every browser out there into "standards" mode, the same as an HTML 4 strict doctype.
Then there's the new elements. Internet Explorer can't natively style them, but a handy little bit of javascript fixes that up: http://code.google.com/p/html5shiv/
If you or your tools aren't ready for that (e.g. some CMSs strip out HTML tags they don't understand), then in the interim you could use classes, e.g. instead of <article>, use <div class="article">.
As for the new form controls, they're backwards compatible too. So <input type="email"> will work exactly the same way as <input type="text"> in browsers that don't support it. If necessary you can use javascript to fill in the gaps. See http://diveintohtml5.ep.io/forms.html for more on that.
As for <video> and <audio>, you can fall back to <object> for older browsers - e.g. http://camendesign.com/code/video_for_everybody. Meanwhile <canvas> can be emulated in javascript, e.g. http://code.google.com/p/explorercanvas/.
"To HTML5" is a fairly broad statement. Even if you have the new HTML5 doctype set (the simple <!DOCTYPE html>) you don't have to go all out and use every aspect of HTML5, only what is appropriate to your project.
If you are keen to get on board with HTML5, I recommend reading "How to use HTML5 in your client work right now" for examples of how you can use certain aspects of HTML5 with few (if any) drawbacks.
Disclaimer: I am one of the curators of HTML5 Doctor.
From there it boils down to whether or not your project will benefit from the features of HTML5 and if you can afford to implement these features. For example, if all of your IE users also have JavaScript enabled you can use html5shiv to get IE to recognise the new elements, enabling you to use them and style them.
As for the new JS APIs and CSS properties that people often group with the term "HTML5", unless your site absolutely requires that you use the technology (perhaps something like geolocation), then it could simply be a matter of progressive enhancement. If webkit/firefox users get rounded corners from CSS3 and IE users don't, is that really such a big deal?
As a rule of thumb I would not develop a site purely in HTML 5 but would consider using it for certain, richer, parts of the site. Remember that it is still not recommended by W3C and IE barely supports it at all.
This blog has a good discussion on it: http://blogs.forrester.com/ronald_rogowski/10-05-10-what_should_customer_experience_professionals_do_about_html5
yes there are several ways.
but if you DONT need html5 elements like video tags, or html5 api's like browser databases, stay at XHTML,because it is still not recommended by W3C. There you can use simple fallbacks for ie6.
do you need html5 elements and apis?
As a last resort you could use Chrome Frame: http://code.google.com/chrome/chromeframe/
As for "a major player in terms of market share", that really depends on your audience. Even Microsoft is marketing its new IE versions rather aggressively. And I don't think there's shame in charging your IE 6 users an extra plugin installation fee. After all, their browser is 10 years old, which is about 100 Internet years, isn't it?