Preface: I am not a developer, but I was able to figure out enough about CSS to modify the twenty twelve theme for desktop browsers into this website: http://www.abcllc.org
Now that I have that looking the way I need it to, I've turned my attention to mobile. The theme has responsiveness built into it, but when I access the site from a mobile device, it scrunches it way up into the left side of the screen. Can I set a minimum width for mobile screens, or set it to auto-fill a mobile screen? The only thing I've figured out is the cutoff width between mobile and a regular browser (which I set to 640px).
I found varying threads throughout the interweb with people having the same issue, but with no answers. Any help would be greatly appreciated!
You can check out mine and see if that helps.
http://www.fossfolks.com/
My site is by no means the best example of css and design, but there's a lot less going on and it might be easier to see. There's a link to the stylesheet in the source. My current struggle is getting images to resize (width AND height) based on a percentage of screen width; I've not been able to sit down long enough to make it go.
Related
I've built flat page sites for years, largely with table architecture, and I know they must become more mobile compatible.
However, I actually WANT some of my non responsive sites to display in mobile screens as simply reduced-sized versions of themselves.
In an effort to understand the basics, I've created a simple page, no tables, one piece of art, and the meta tag which I understand is supposed to reduce a large size HTML page to fit within a mobile screen. But when I check this in a mobile screen emulator, my page is huge with just part of itself showing in the mobile screen. It's not reducing so that its full contents show within the screen.
What's the basic concept I'm missing?
http://ldihealtheconomist.com/html5-test-single-col.html
You're using a set width.
No matter what screen you're using, if you set the width as pixels then it will be displayed as that many pixels.
No offense, but if you've been making sites for years and don't know this, then maybe it's not the right thing for you...
Read up on #media queries, vw,vh and viewport widths.
Look at frameworks such as Bootstrap or Skeleton.
I have been given a task to convert an already hosted website into responsive. My working knowledge on CSS is below average.
In that quest, I heard about media queries. I looked for a solution, but what I got was more confusion. Media Queries? I tried responsinator.com and checked my website in that. Actually I don't know how to know whether a website is responsive or not.
My website fits the mobile screens. Header and footer automatically adjusts themselves.
There is a big slider and it just got cropped, but still loads images and works fine. If my website is responsive, how come the slider get cropped?
To make a responsive CSS, Will I have to make any changes to the values in my already existing CSS? Or will I have to just add my styles (without any edits) into the media queries given below.
#media(max-width:480px){
/*PUT YOUR CLASSES STYLES HERE*/
}
your media query defines which part of your css to look in, think of it like an if statement.
When it falls within a media query in your css file, your css has be defined to cater for that screen size,
Just because your page objects crop when you make the screen smaller does not make your site responsive,
best take your phone or tablet and visit your site, if the user interface is simple, easy and smooth, then you dont have to worry, but if you have a desktop styled site on a phone as wide as your numpad on the keyboard, you have some work to do.
It's quite difficult from my experience to "convert" a static website into a responsive one, especially if you do not have good CSS knowledge. Try to find elements with a fixed width and make them fluid by experimenting with max-width and procentual width values. Hope this helps.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have made some websites in Photoshop CS5, but I usually tend to just make them raw in notepad++. I normally make them live on the site, and edit the code and refresh the page to see the changes. I am wanting to move to the more professional method and making the entire template/design in photoshop. The thing holding me back from diving right in, is the very very start lol..
What is a good resolution to use for the template? I have came across different tutorials and they have say different sizes. For instance, my laptop resolution is 1366x768. I have a 22in LCD at my office, and I know it is a really large resolution as well. I would assume the min resolution of most monitors is 1024x768...
When creating a new template in Photoshop to create website templates, what size should I make the image and why?
Also, since we are on the topic, do you guys have any links to good resources of image collections and such that you find helps you the most in creating your templates? I am a programmer, and as we all know, most coders suck at images.. I am just trying to strengthen the other half of my brain :)
Thanks in advance!
I would suggest the following course of action:
Take a look at current statistics for the most widely used screen resolutions. As you'll see, 1366x768 is the most popular resolution right now, followed by good old 1024x768 which still has a huge user base. And keep and eye out for mobile resolutions as well.
Factor in the necessary screen real estate taken by browser chrome and other OS fluff.
Since designing for multiple screen sizes is becoming more important every day, I would strongly encourage you to pick a few target resolutions rather than only one. This can all be nicely handled by CSS. Even if you're targeting only desktops, it still makes sense to consider different screen sizes.
Since you're still getting your feet wet with Photoshop, you could start from one of the many grid-based PSD templates available. I know a 960px one and a 1140px one, but you can find many more. You'll probably have to use multiple grids anyway if you decide to support more than one screen size.
And then when you feel like thinking about all this a bit harder, go straight for this article: A tale of two viewports by Peter-Paul Koch.
Look at smashing magazine and sign up for their newsletter as well as webdesignerdepot and check out Codrops.net. They have great freebies, tutorials, and standards updates. I LOVE checking my mail to see them.
As for the PSD - their's no set size. I've seen professional wordpress developers mockup at 1100px wide (height is SO variant based on your layout). I wouldn't recommend much more than 1366px wide.
I might do 1366 or 1440 because that is the resolution most people will see. When you send a mockup at 1920 wide people think the website is too small, when the content is still the 940-980 that they all
Edit:
I myself do PSD's at either at 1100px or 1440px wide and the main content is is always 940-980px wide.
I use 1100 when there isn't much to look at graphically in the body background, and 1440 when the background is more crucial to the "feel" of the website.
You want to design your website for the most used screen resolution which seems to be 1280px by 720px. Therefore that is what you want your width to be, you can create any type of background and just make sure you fade it to one color or transparently and use CSS to change the background color.
Make sure you have guides that help you keep the content inline, best way, create a new document with the width 960-100px and the height 720px, then drag guides to all four sides.
Then you can change document size to 1280px by 800-960px.
The reason why you have a guide at 720px is because everything above that line is guaranteed to be seen on all resolutions, it's called "above the fold". Good designers take this in account for to ensure the audience will be drawn into exploring the site, a featured content slider is an easy way out.
incomepitbull, I understand where you are coming from...
I am also a back end developer who is trying to learn Photoshop..
Many front end designers are ignorant of what goes on on development stage...
Mostly the Photoshop moke up depends on the customer specification...
The height doesn't matter; use 960 px (12col,16col,24col), 980 px (12col,24,col), 1000 px (100 % responsive friendly for those not using grid systems) or 1140 (for webs targeting bigger monitors ie not mobile first px...)
After all, as developers, we fix all this problems; but good mockups are important...
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot