So, at my jobb im currently tasked with creating a preview panel for a ios message.
It needs to be "as exact as possible" so i was thinking using css pixel = device pixels / device pixel ratio for width and height. Would that be a good way to go? What would the scale for the fonts be if so?
I would not recommend going that direction. Every iPhone is of a different size. And some users might enlarge the text on their iPhones so that they can read it better. I would make it as responsive as possible.
This is a tool that I use when developing for different screen sizes: http://www.responsinator.com/
If you want to copy and paste your code here I can help you accomplish this.
Related
I have a question what I couldn't find an answer for.
Google Chrome has an option to change screen size so you could see if your site is responsive. By setting it to 1366x768 it seems to be perfect, but if using laptop/changing screen resolution to 1366x768 it doesn't fit suddenly only if changing zoom value to 80%. I know I'm not providing any code here, just wondering why such thing is happening?
In my experience this has been due to using absolute pixel values and font sizes. I personally have found using em and percentages % rather than px helps at times as well as using a responsive grid system, whether directly coded in CSS or through something like Bootstrap. I would highly recommend Bootstrap as it is very easy to get into and will save you tons of time.
I have a website which is working well on PC. Now I want it can be displayed on mobile phone like following:
Align left and display only 1024px from left.
The rest part:
1) The rest part can be kept and user just only need to drag to see the content. This will be the best, and if this happen, it is only need to do some zoom in and out work. But I found it is really difficult to make it working properly on all mobile web browsers.
2) Do not display the rest of part. This is also an acceptable option.
Thank you very much if you can give any advice.
Sure you can do almost whatever you want if you adjust your website to be responsive to different screen sizes and user agents. Media queries will help you adapt your website greatly to different screen sizes, media types and orientation
I would highly recommend converting your website in to using Bootstrap. It makes it responsive, so you should not have any trouble with the mobile view at any point.
From the developers view the Bootstrap offers many and much more to the website creation. No need to hazzle around with the percentages or make entire new pages for mobile phones, one page does it all.
I have a designer who designed my site using Photoshop (.psd).
Now i am the one who will convert this to html/css.
In the design, there are icons (images) whose dimension is 70x55 (measured in photoshop ruler)
My question is, when i code these images into html/css, should i be using the following code?
<img src="img1.png" width="70px" height="55px"/>
Is this how converting psd to html works? following the sizes, spacing, distance on whats on the actual psd designed by the designer?
Im a complete noob on this so any help will be great appreciated.
-UPDATE -
By the way, when i am coding this into html/css, i am using a high screen resolution desktop monitor (not the standard monitor laptop screen), i followed all the dimension designed in the psd from images to container divs & dialog boxes (designer has designed dialog boxes).
Now after i finished coding, followed the design (followed what i see on the psd), it looks ok when i view it in a browser with the current big screen i am using. The view i am seeing is the page looks the same in the psd and lot of spaces and not too compact to look. So everything looks good here.
Now when i view it in my friend's laptop with standard monitor screen, the page looks very compact, the images (from psd which i followed the dimensions and coded it in html/css) looks big and some of the elements i coded did not fit on the browser screen. Im sure the reason behind this is because i am using smaller screen.
Now i am wondering, I followed what the designer designed in psd. I followed the distances, dimensions of images, etc... Whos doing wrong here? The designer because he designed the elements in psd which is too big for smaller monitor screen? or me who does not know something or maybe missed something here?
Any guidance would be a big help
Cut out the images using the slice tool in Photoshop and save for web to optimise the images.
The width and height attributes on an image aren't necessary although they save the browser a small amount of time reading the images to work out the dimensions. Use CSS to control the size of the image; but obviously you should avoid stretching the image larger than its native size or it will become pixelated.
By default an image will render in a browser at its native size.
I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen.
So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width in css and have zoomed in/out as needed by device itself?
I apologize if the question is too generic, will explain details if needed.
EDIT:
So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for widths, fonts sizes etc is that right?
If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.
Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.
So I tried to set <meta name="viewport" content="width=640"> and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.
I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).
Would love to know your thoughts and I appreciate all the answers so far.
This is called Responsive Web Design when a website adjusts according to screen size...
You can make this kind of responsive website easily through CSS3 Media Queries:
How to write CSS Media Queries for common types of devices
Responsive Web Design: What It is and How to Use It
If you google for Responsive Web Design you will find lots more information on this topic. It's really an amazing method to make your website look great on all devices from small to large screens.
We have a series of tutorials on creating web pages using responsive web design. If you want a quick introduction to it checkout Introduction: Creating a Responsive Web Design, it lists common mobile phone and tablet sizes, so it might lead you to the answer you need. You can find the link to our tutorial series in the article. The solutions provided use Bootstrap in order to provide easy to create pages. And it also provides free samples of responsive web design pages.
I hope this helps to provide the answer that you need, if not, then please let us know if we can provide any further assistance.
Regards,
Arnel C.
InMotion Hosting Community Support Team
Specify the width in percentage say width=100%,which automatically adjusts the width with the screen.
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!