sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
sitefinitysteve
asked on 09 Dec 2010, 05:53 PM
The built-in icons are SUPER handy, but the single 30k sprite is WAY WAY to big.
Even just separate into two sprites...large icons and small icons...like if I just need one small checkmark and X, on the entire page\app, a 30k sprite ads a lot of overhead for me. I'm not sure where I'd ever need to intermingle the icons (large and small)...buttons on a page should be consistent. So you'd have large OR small buttons?
Ideally I'd like to see 4 sprites
1) Small Basic (checks, and X's...common stuff)
2) Small Tools (checkout, rss, etc...fringe stuff)
3) Large Basic
4) Large Tools
Could you at least consider it? :) I'm seeing a noticeable "pop" when my buttons load.
Even just separate into two sprites...large icons and small icons...like if I just need one small checkmark and X, on the entire page\app, a 30k sprite ads a lot of overhead for me. I'm not sure where I'd ever need to intermingle the icons (large and small)...buttons on a page should be consistent. So you'd have large OR small buttons?
Ideally I'd like to see 4 sprites
1) Small Basic (checks, and X's...common stuff)
2) Small Tools (checkout, rss, etc...fringe stuff)
3) Large Basic
4) Large Tools
Could you at least consider it? :) I'm seeing a noticeable "pop" when my buttons load.
7 Answers, 1 is accepted
0
Hi Steve,
Thanks for the suggestion, but it will be a breaking change to do something like that as I suppose there are already some customers that have extended the original predefined icons sprites with some custom solutions. Changing the sprite and CSS positions will affect them badly.
As an alternative I could suggest you to create a few custom sprites and CSS files, that you could use in your projects instead the original predefined icons styles and sprite. If you use in your code custom solution and not the predefined, the 30kb sprite will not be loaded and will not make the request heavier.
I suggested two different ways for embedding the icons. In all cases, you should prepare a sprite image. Then you have set class names related to the images in the sprite, and to group them and set the url to the sprite, that all these classes will use. Next step will be to define the background-positions for each icon and you are ready to use your new predefined icons. Just replace PrimaryIconCssClass="rbAdd" with PrimaryIconCssClass="cbHtml" where the original embedded RadButton Predefined icond is replace form the new custom cbHtml class defining Custom Button Html icons. You could use the PrimaryIconTop, PrimaryIconRight, PrimaryIconBottom, PrimaryIconLeft properties to position the icon inside the button, or respectively SecondaryIconTop, SecondaryIconRight, SecondaryIconBottom, SecondaryIconLeft if you have SecondaryIconCssClass.
The other suggested way is almost the same, but it predefine the icon position in the button directly form the custom css file. That will save some extra code lines. In the sample project, the CSS class used for this method is called: .cbMediaCssOnly.
Attached is a sample project: button-custom-icons.zip which contains a sprite with five icons only and the size is 3.14 KB. The attached customicons.gif shows the result.
Creating similar sprite and CSS will take a few minutes only, but you will have the desired result.
Best wishes,
Bojo
the Telerik team
Thanks for the suggestion, but it will be a breaking change to do something like that as I suppose there are already some customers that have extended the original predefined icons sprites with some custom solutions. Changing the sprite and CSS positions will affect them badly.
As an alternative I could suggest you to create a few custom sprites and CSS files, that you could use in your projects instead the original predefined icons styles and sprite. If you use in your code custom solution and not the predefined, the 30kb sprite will not be loaded and will not make the request heavier.
I suggested two different ways for embedding the icons. In all cases, you should prepare a sprite image. Then you have set class names related to the images in the sprite, and to group them and set the url to the sprite, that all these classes will use. Next step will be to define the background-positions for each icon and you are ready to use your new predefined icons. Just replace PrimaryIconCssClass="rbAdd" with PrimaryIconCssClass="cbHtml" where the original embedded RadButton Predefined icond is replace form the new custom cbHtml class defining Custom Button Html icons. You could use the PrimaryIconTop, PrimaryIconRight, PrimaryIconBottom, PrimaryIconLeft properties to position the icon inside the button, or respectively SecondaryIconTop, SecondaryIconRight, SecondaryIconBottom, SecondaryIconLeft if you have SecondaryIconCssClass.
The other suggested way is almost the same, but it predefine the icon position in the button directly form the custom css file. That will save some extra code lines. In the sample project, the CSS class used for this method is called: .cbMediaCssOnly.
Attached is a sample project: button-custom-icons.zip which contains a sprite with five icons only and the size is 3.14 KB. The attached customicons.gif shows the result.
Creating similar sprite and CSS will take a few minutes only, but you will have the desired result.
Best wishes,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 10 Dec 2010, 02:36 PM
Thanks for the reply :)
I don't think this would be a breaking change at all...what would break? rbAdd defines the icon and style for rbAdd even if it's a custom skin. For anyone not using a custom skin, then it will just work better. 30k is a HUGE sprite. It would almost even be faster to NOT make it a sprite. If you're concerned about Custom Skins referencing the main sprite that you use now, then just keep that file there, and add in the few other leaner ones. If this is deemed a breaking change it's certainly breaking the right way...
I just think you have the opportunity on the ground floor of this control as lean as possible. A site heavy with telerik controls is already quite large with all the css and scripts coming down....with an icon @ 30k you're almost certainly always going to see the icon "pop" onto the page. I totally applaud the idea, I love this control, but I'm always looking to keep my pages as fast as possible. So your MAKING me bypass your built-in functionality and create my own sprites.
I don't think this would be a breaking change at all...what would break? rbAdd defines the icon and style for rbAdd even if it's a custom skin. For anyone not using a custom skin, then it will just work better. 30k is a HUGE sprite. It would almost even be faster to NOT make it a sprite. If you're concerned about Custom Skins referencing the main sprite that you use now, then just keep that file there, and add in the few other leaner ones. If this is deemed a breaking change it's certainly breaking the right way...
I just think you have the opportunity on the ground floor of this control as lean as possible. A site heavy with telerik controls is already quite large with all the css and scripts coming down....with an icon @ 30k you're almost certainly always going to see the icon "pop" onto the page. I totally applaud the idea, I love this control, but I'm always looking to keep my pages as fast as possible. So your MAKING me bypass your built-in functionality and create my own sprites.
0
Hello Steve,
It is obvious that we will not split the existing sprite to four new sprites.
What I could help to you and the community is to create these four new sprites and four new CSS files that will be easily downloaded and inserted into your applications.
For that task i will need a little assistance from your side. In your first post you mentioned the following four sprites:
1) Small Basic (checks, and X's...common stuff)
2) Small Tools (checkout, rss, etc...fringe stuff)
3) Large Basic
4) Large Tools
Please, describe what icons should be included in each sprite e.g:
1) Small Basic (checks, and X's...common stuff) - (OK_16x16, Remove_16x16...etc)
Once I have that information I will create the necessary files and they will be available for download from a sticky forum thread. This way will be even easier because, every user will decide, which type of icons to use and insert into the application.
Regards,
Bojo
the Telerik team
It is obvious that we will not split the existing sprite to four new sprites.
What I could help to you and the community is to create these four new sprites and four new CSS files that will be easily downloaded and inserted into your applications.
For that task i will need a little assistance from your side. In your first post you mentioned the following four sprites:
1) Small Basic (checks, and X's...common stuff)
2) Small Tools (checkout, rss, etc...fringe stuff)
3) Large Basic
4) Large Tools
Please, describe what icons should be included in each sprite e.g:
1) Small Basic (checks, and X's...common stuff) - (OK_16x16, Remove_16x16...etc)
Once I have that information I will create the necessary files and they will be available for download from a sticky forum thread. This way will be even easier because, every user will decide, which type of icons to use and insert into the application.
Regards,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 13 Dec 2010, 03:39 PM
"It is obvious that we will not split the existing sprite to four new sprites"
Ok, so it's obvious now that I called you out on the total BS answer you gave on a breaking change. It's not a breaking change...anyone who has made a custom skin already has these icons in their skin images folder. Anyone using the existing out of the box implementation would just benifet automatically with the change.
I could absolutely create my own sprite and because of your implementation I will HAVE to create my own sprite...how does that increase developer productivity or "deliver more than expected". The FEATURE is nice, but delivers less than expected. You're missing the fundantal reason why sprites are used...to reduce http traffic to avoid image popping. However with this implimentation you've INCREASED traffic and popping for no apparent reason. We're already dealing with a massive download on a telerik heavy page because the css isn't at all minimized.
People use these controls to get out-of-the-box functionality quick...we assume telerik knows what they are doing and will implement features to the best of their ability. Some developers might not be able to create or implement a proper sprite...which is why you guys should step in and show how it's done.
4 is a wish list, but bloody hell, consider TWO...nobody will be mixing large and small icons, let alone enough to justify the 30k pricetag.
If you want, I'll go in, split them up, and GIVE you the style positioning modifications if you guys are too busy to bother.
Ok, so it's obvious now that I called you out on the total BS answer you gave on a breaking change. It's not a breaking change...anyone who has made a custom skin already has these icons in their skin images folder. Anyone using the existing out of the box implementation would just benifet automatically with the change.
I could absolutely create my own sprite and because of your implementation I will HAVE to create my own sprite...how does that increase developer productivity or "deliver more than expected". The FEATURE is nice, but delivers less than expected. You're missing the fundantal reason why sprites are used...to reduce http traffic to avoid image popping. However with this implimentation you've INCREASED traffic and popping for no apparent reason. We're already dealing with a massive download on a telerik heavy page because the css isn't at all minimized.
People use these controls to get out-of-the-box functionality quick...we assume telerik knows what they are doing and will implement features to the best of their ability. Some developers might not be able to create or implement a proper sprite...which is why you guys should step in and show how it's done.
4 is a wish list, but bloody hell, consider TWO...nobody will be mixing large and small icons, let alone enough to justify the 30k pricetag.
If you want, I'll go in, split them up, and GIVE you the style positioning modifications if you guys are too busy to bother.
0
Accepted
Hello Steve,
Saying that it is obvious we will not do that, I meant we will not do it a day or two before Q3 Service Pack 1 release. We will discuss your proposal in details and if we decide to implement it, we will do it in a future release - probably Q1 2011.
Since the proposal for splitting the sprite in four pieces was your idea, I have asked you to share your opinion of how to split (distribute) the icons among the four sprites. Actually it will be between two sprites as the other two will be identical but with 24x24 icons. As splitting will not be available for the Service Pack, as an alternative we will create the sprites and CSS and they will be available to be implemented into a project as an external resource.
All the best,
Bojo
the Telerik team
Saying that it is obvious we will not do that, I meant we will not do it a day or two before Q3 Service Pack 1 release. We will discuss your proposal in details and if we decide to implement it, we will do it in a future release - probably Q1 2011.
Since the proposal for splitting the sprite in four pieces was your idea, I have asked you to share your opinion of how to split (distribute) the icons among the four sprites. Actually it will be between two sprites as the other two will be identical but with 24x24 icons. As splitting will not be available for the Service Pack, as an alternative we will create the sprites and CSS and they will be available to be implemented into a project as an external resource.
All the best,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 15 Dec 2010, 05:35 AM
Ahhh, okay thanks Bojo sorry for the confusion
Can you please add this to PITS? I'd like to set it as watched...
Can you please add this to PITS? I'd like to set it as watched...
0
Hi Steve,
This is the PITS issue url: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/4353.
Best wishes,
Bojo
the Telerik team
This is the PITS issue url: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/4353.
Best wishes,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.