I published my first website (www.dirkwolthuis.nl). It is a one page website with a lot of images and elements. In chrome on my mac it loads fine and scrolls okay. On a iPad or iPhone the elements tend to render more slowly than the user scroll. Is this a common problem with one page websites? And can I do something about it?
Page load shouldn't be that much of a problem. But some of the images are quite large, especially the ones being served up for your article images, some of these images are over 1000px wide but only being used at 450px or less.
As these are CSS background images this can easily be dealt with the aid of media queries.
For instance:
.article-card.privacy {
url(/images/articles/whatsapp-small.jpg);
}
#media (min-width: 720px) {
.article-card.privacy {
url(/images/articles/whatsapp-medium.jpg);
}
}
#media (min-width: 960px) {
.article-card.privacy {
url(/images/articles/whatsapp-large.jpg);
}
}
You would obviously need to create three different images, one for each size and of course.
You could help speed up their download times by compressing them a little further. Try an online service such as https://kraken.io, even if you've saved for web in photoshop you can always squeeze a little more out of them.
Further to this you could make use of Google's page speed insights which will give you pointers as to where you're site is winning and where it can be improved in terms of page speed
Related
As a relative beginner, I seem to be struggling to find the right balance between creating media queries based on content rather than specific devices.
I'm wrestling at the moment with a landing page that has a css background image covering the entire viewport. In order to ensure the image remains consistent (i.e. no cropping) across all mobile devices, I started writing device-based media queries that each load different versions of the image. By the time I'd created them for four different iPhones (portrait and landscape) alarm bells were going off.
Is there a better way to achieve what I'm trying to do or should I just accept that the image is going to look different from device to device?
All help gratefully received.
Steve
http://sixrevisions.com/css/responsive-background-image/
body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}
This should look relatively good across all devices.
I'm new with responsive design and am designing a web page starting with 240px width for old phones and building up from there.
On my banner image, which is a PNG, is it best to:
1) Start with my largest image and shrink it for each media query?
or
2) Start with a small banner and then display a higher resolution file for each breakpoint?
Stretching and shrinking images seems fine for vector graphics but on some gifs and other images it looks rather ugly.
So I wasn't sure if I should load one banner image that I manipulate or if I should have at least 3 images (phone, tablet, desktop sized) that I load at certain resolution trigger points.
Thanks.
Overall, I'd say to use media-queries to find the size of the screen and use whatever image fits best.
Example of CSS:
.banner{
background: url('banner-1024.png') no-repeat;
background-size: 100%;
}
#media all (max-width: 400px){
.banner{
background-image: url('banner-400.png');
}
}
#media all (max-width: 900px){
.banner{
background-image: url('banner-900.png');
}
}
But if you aren't expecting a lot of viewers on mobile devices, don't have the time to create the re-sized images, or just want the least amount of CSS, I've never had to much of a problem just using a large image for all devices.
If that's the case then just use the top four lines of code and you'll be good to go.
using at least a few images works great for me, phones (iOS, Android, Opera Mini) seems to choose whitch one to download, without requesting those for desktop, and medium-screen-devices. I started with one desktop image, performance was horrible. Then tried few smaller for each media query (with a little bit worse quality at 240px ;) ). It's way much faster.
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and Ancestry only resize to a certain point - on a phone the layout is completely different. Any help with this? I'd like to know how sites like the examples given achieve this.
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with:
html {
min-width: 1000px;
}
But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be applied to mobile devices. Showing the mobile layout on desktop if a user resizes the window is perfectly normal. It naturally adapts to split screen mode situations.
I should probably make this a comment but they look at the device width, not the viewport width in their media queries and javascript. (I'm sick and don't feel like writing any more). There are also services available that can help you detect what type of device there is. However, these services can be slow and pricy sometimes. More often not worth the effort.
You can detect if your viewer is a mobile or a PC, then load different CCS files.
One way you can detect if there is a mobile is by javascript UserAgent BUT it is not very effective.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
I haven't tested this recently, but there is a 'mobile' device specifier:
#media mobile and (min-width: 400px) {
.col { width:50% }
}
#media mobile and (max-width: 400px) {
.col { width:100% }
}
That'll work on mobile devices, but not desktop
I deployed the same scenario on a WordPress site using "mobble pluging" which simply detect the device then generate a HTML version for mobile, tablet or desktop.
I have a question regarding displaying different content on different web browsing device. I know with CSS i can display different style sheet according to browser width size. But the challenge I have now is Flash content, I am setting up a Flash content for my company website and as we all know flash isn't supported in mobile device. To resolve this I thought about making a simple HTML version of the website for mobile devices. However, what can I use to determine when to load the flash or when to load the html? For example if I were to visit the site through my desktop the FLASH website will load and if i were to use my phone to visit the site, the HTML website will load. I am pretty new into web designing so any kind of help will be greatly appreciated. Thanks alot in advance
theoretically you could do this with media queries:
#media only screen and (max-width: 480px){
.flash{
display: none;
}
.html-content{
//css styles for html mobile site
}
}
#media only screen and (min-width: 481px){
.flash{
//styles for flash container
}
.html-content{
display: none;
}
}
But Josh C is right, you should avoid Flash these days and use CSS3 or JS
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}