CSS & Ipads

[Rinaun]

Hi guys,

Took some advice and used Bootstrap to make my own theme out of several similar free templates available. My current build passes validation, but I find it to be somewhat slow on the Ipad compared to how smooth it is on other devices. I've also tried loading an invisible 3d object to boot up the Ipad GPU but that resulted in an unnoticeable speed increase.

http://rinaun.com

That's my new site; let me know if its hanging up somewhere, if you notice anything that doesn't look right, or any suggestions to make this a better, more interactive site. I'm finishing up the portfolio section so when you click on an image, it comes up with a modal window with more information on the project and a close button.

I'd also love to know from some experienced web designers on how to avoid differing speeds based on what device is viewing the site: do I really need to make individual CSS files for each device? Is it worth it? How can I make things like the bar at the top load smoother on apple devices? Any information or pools of knowledge to link me would be GREATLY appreciated

Best Regards,

Rinaun

 

[KB]

I am using IE 11 and it took forever to load. At first I thought all it was was a white screen with the words "Techology done your way". After about 4 - 5 seconds things started coming.

One reason for that could be the 1.53 MB bg.jpg file.
I do recommened doing css files for each type of device, just for ease of editing.

Also why are you using jQuery 1.10? They are up to 2.1 now, which is smaller and faster. In addition you can run the google hosted version for less bandwidth on your part:
https://developers.google.com/speed/libraries/devguide

 

[Ken g6]

Which iPad version(s) are you concerned about? If it's slow on older iPads, CSS Media Queries would allow you to send smaller images to the iPad 1 and 2.

Yslow reports a few issues. Among them your eight small images are scaled in HTML. Is this because you want them to look good on a retina display? Again see media queries:

media screen and (min-resolution: 2dppx)

Edit: Though that's in the HTML, so that may not work. :hmm:

I also wonder about the position:static images. I wonder whether they have to be loaded before anything else can be displayed? You might try turning that off temporarily. If that works, maybe you could load the second large image normally, and have JavaScript set position:static when scrolling happens?

One more thing: Your top bar covers the first part of "Technology done your way" on my Android phone.

 

[Rinaun]

I am using IE 11 and it took forever to load. At first I thought all it was was a white screen with the words "Techology done your way". After about 4 - 5 seconds things started coming.

One reason for that could be the 1.53 MB bg.jpg file.
I do recommened doing css files for each type of device, just for ease of editing.

Also why are you using jQuery 1.10? They are up to 2.1 now, which is smaller and faster. In addition you can run the google hosted version for less bandwidth on your part:
https://developers.google.com/speed/libraries/devguide

Which iPad version(s) are you concerned about? If it's slow on older iPads, CSS Media Queries would allow you to send smaller images to the iPad 1 and 2.

Yslow reports a few issues. Among them your eight small images are scaled in HTML. Is this because you want them to look good on a retina display? Again see media queries:

media screen and (min-resolution: 2dppx)

Edit: Though that's in the HTML, so that may not work. :hmm:

I also wonder about the position:static images. I wonder whether they have to be loaded before anything else can be displayed? You might try turning that off temporarily. If that works, maybe you could load the second large image normally, and have JavaScript set position:static when scrolling happens?

One more thing: Your top bar covers the first part of "Technology done your way" on my Android phone.

Thanks for the advice! I'll be applying what you said tonight and try to make those issues remedied. I'd apply these fixes but I'm right now busy with class; im pumped to enhance my web design skills! I appreciate the time taken guys

Any other suggestions on design features? I'm a coder, not an artist

EDIT: Edited a majority of the complaints between class and work. Going to download the addon you mentioned for firefox or chrome (I have both installed) and see if I can fix the rest tonight.