I don't often get to work for high resolution displays as most of my clients tend to work with the oldest machines known to man, however I'm currently working on something which will only be displayed on retina display iPads. A graphic has been mocked up of the design they want to the retina resolution (2,048 by 1,536) and I've been building my site based off the dimensions in the graphic. However now I'm actually trying to view it on an iPad, everything is far too big, my '260px header' which I assumed would take up a 6th of the page (ish) is closer to double that.
I don't seem to be able to find anything regarding a workable HTML size for retina displays, only pages talking about how to prep images for retina, what size resolution should I work to when building the HTML?
I believe the best way for you to achieve this is to use CSS where possible and build your site at 1024x768 utilising #2x graphics for retina devices.
A simple guide on utilising these ideas can be found here - http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
Related
I'm a graphic designer, I have a small question, Ive learnt some of css and completed the HTML tutorial package over the internet multi time, so I have a good base of html-css coding at least, I do want to start converting PSD webdesigns into HTML-CSS, I've seen many tutorials step by step guides etc.. and they were helpful for sure but I'm afraid of many points:
The flexible point of the website, which means the following: my monitor is currently 1920x1080, let's say that I will code the website to fit on my screen and someone with a small / big screen than mine would open the site, will he see the objects moved from its original place? because defining by px is measured to fit to the user's monitor as far as I know.
Ensuring that the site will be working on at least 3 browsers plus, I know that every browser has its own css base reader and its very hard to set the website to fit all browsers especially internet explorer.
So, I don't want a special help to be honest, all I need is some points / well-guided tutorials to follow to ensure that the points I've reviewed being at least 50% solved..
What you are talking about is Responsive Web Design. Literally just search it up on the internet and you'll find tons of resources and blogs.
My tips are:
For testing multiple browsers download all of them (Chrome, Firefox, Opera, IE) and when you save your work (do this all the time) open it in all browsers so you know where your errors are coming from
Use the developer tools on your browsers. Chrome and Firefox have very good developer tools and help me figure our my problems. You can also use it to emulate mobile browsers and show your media queries (explained later).
Use em instead of px. pixels may look nice on your screen, but if the users screen is small they may find it hard to read your text. here is a good px to em converter http://pxtoem.com/
Use percentages. For example you can make your content div have width of 80% so that you have some space on both sides of your screen (like the design of stackoverflow). This means that your content will fit on most desktops well. Another example is a navbar, you can make it 100% wide so that it always fits the screen no matter the desktop.
Then we have media queries. These allows us to change the content based on the size of the screen. For example you can hide the navbar using a media query when a mobile user is viewing your website. Here is onc elink about media queries:http://cssmediaqueries.com/what-are-css-media-queries.html
Some people still develop for IE8 but it is a pain in the ass. You need to decide whether your audience will be using IE8. I'm guessing as a graphics designer you're going to be making a graphics blog, meaning that your audience will probably be using up to date browsers. So have a think if you really need to develop for older browsers.
As for the first point: there are some ready css frameworks, with responsive elements included. The most popular, I suppose, is Twitter Bootstrap. It has a grid system to help you make your html blocks change their width and even get hidden depending on the viewport width.
If you want to understand the techniques, you can study how media queries work.
As about cross browser stuff: you will have to test your pages in all browsers you want to support. That's the rule. On your way, this link can be useful.
The flexible point of the website, which means the following: my
monitor is currently 1920x1080, let's say that I will code the website
to fit on my screen and someone with a small / big screen than mine
would open the site, will he see the objects moved from its original
place?
The general way to get around this is to build a centered window, thus:
<html>
<div id="container">
<!-- your design lives here -->
</div>
</html>
#container
{
width:728px;
margin: auto 0;
}
Your design is now set at 728px which should fit most resolutions. You can have graphics that expand beyond this, see the bar at the top of SO, but your content should live inside this container.
Another potential solution to this is to allow you design to be completely flexible and contain all your elements in divs that float about, see Masonry for an example of a tool that helps with this.
Ensuring that the site will be working on at least 3 browsers plus, I
know that every browser has its own css base reader and its very hard
to set the website to fit all browsers especially internet explorer.
This is a bain of every web designers life. There is no substitute for good testing here. Something that will help is a CSS rest script like this one. This will remove some of the inconsistencies across browsers. But really you just need to, test and test again.
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I want to learn some basics in website development so that I can control the look and design of my site.
My website developer says that a full screen header with a gradient left to right won't work because screen size differs from 1920 down to 420 for mobile phones. My website is being optimised for browsing on mobile phones. Is there a way around this?
I have an image of what I am referring to. How do I post it for users to see here? (My website is a customised Magenta Go website.)
The question is not extremely clear, but it's possible that what you're looking for are CSS3 Media Queries and "responsive design".
I really recommend looking at how Twitter Bootstrap is doing it: http://twitter.github.io/bootstrap/scaffolding.html#responsive
Basically, you modify your CSS for different screen widths, possibly in your case providing different gradients for each case. And screen categories defined by Twitter Bootstrap in the aforementioned documentation seem pretty reasonable for most cases.
A general way to get a horizontal gradient to work on both large screens and mobiles is using CSS gradients, like this example. You can find an indication of browsers that support CSS gradients on the Can I Use website.
I recently decided to tackle adding retina displayed images to some sites, but when I view them on my iPhone5 they appear huge (although crisp which is nice). How should I go about reducing the size of my logo? You can check out my site here
I'm assuming it's some code I need to edit in my wedge.css file. Can anybody point me in the right direction? Also, not sure if it matters, but I'm using Bootstrap.
How to make a website layout and website content fix when the size of our monitor changes???Just like from 15" monitor change to 21" monitor...all of the content in website doesn't change.
Sometimes when we see our website in another laptop with different monitor size, the content of the website fall apart.
I make an application in which I use div tag but one problem is that in other or big resolution monitors it shows different view and some other monitors show another view of my Website. So how can I fix the view for all the monitor resolution.
I think media queries sound like they could be your saviour. You can use them to create a responsive site - from mobile to tablet to desktop etc. With media queries you can target different resolutions and fix/sort/adapt your design using CSS to make the best viewing experience for the user. This approach would be called Responsive Web Design, which is quite the buzzword(s) at the moment.
Some quick links for info:
Link 1
Link 2
If you feel like buying a book/e-book, I would recommend:
Responsive Web Design
Well come to the world of responsive web design, Your perfect solution lies in here
You need to explore Media Queries, Responsive Images as well.