Viewing website page width?
website page width?
|
User: Andrew D. 11 years ago
|
|
|
Is there a 'best' width for webpages? My previous iWeb site was 920 px & I have been using 1000 px for our new site using everweb. Any comments at this stage would be good as it would be better to change it sooner rather than later. |
|
|
User: Roddy 11 years ago
|
|
|
This used to be a simple question to answer! Many used a page width of 980px and I still do in most cases for viewing a website on a computer. This was the page width that Apple used for a long time. The question you need to ask yourself is, "How many visitors are going to view you site on a larger tablet such as the iPad?" Some say that iPad users can use landscape mode and therefore the maximum width would be 1024px. However, the only time I use landscape mode on one of these devices is to watch a movie. For the best viewing experience in portrait mode, the page width should be 768px. Anything wider than this and the content will start to get squeezed. I suppose the compromise between the page looking too skinny on a computer and squeezed on a tablet would be to pitch it half way at 896px. It's fairly obvious that a lot of users don't test their sites on an iPad or they would realise how hopelessly inadequate they are. It really depends on what business you are in. Those who are in the internet retailing business - or in high street sales or service - should consider the fact that the more of the their visitors will be on mobile devices and this number is increasing all the time. Remember that computer sales are falling and their is a growing sector of the surfer's society who don't own one. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
✔ Best Answer
|
|
|
User: Andrew D. 11 years ago
|
|
|
Hi Roddy & thanks for your input (as always) According to google analytics this month: desktop: 48.71% tablet: 33.02% mobile: 18.27% |
|
|
User: Roddy 11 years ago
|
|
|
If more people looked at their stats we would see a lot of design changes! Take the example of a website that is 1200px wide. When viewed on an iPad it has been reduced to 64% of its size with a corresponding decrease in font size. It becomes difficult to read and the hyperlinks are harder to hit. If the content width was reduced to 900px, the reduction would be a more acceptable 85% of the original. This is wide enough for a designer who cuts the crap and clip art and uses the space more efficiently for what the visitors actually want to see! ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Andrew D. 11 years ago
|
|
| good point Roddy. I need to give it some thought & borrow someones iPad. Andrew | |
|
User: Jumbo T. 11 years ago
|
|
|
You don't need an iPad : http://www.responsinator.com/ http://responsivedesignchecker.com/ |
|
|
User: Roddy 11 years ago
|
|
|
Why not use the tools that Auntie Apple gave us? Go to this page… http://everwebcodebox.com/code/testing.html … and click the on the iOS Simulator Tab. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jeff K. 11 years ago
|
|
|
I have a photography website. I use the page boundaries EverWeb came with at 800px. Works fine for me. This week I did enlarge a couple horizontal images a little bit over 800px to give them a little more pop, but I didn't go over much. I have a 27-inch iMac and the image sizes look good to me. www.jeffkingphotography.net |
|
|
User: Roddy 11 years ago
|
|
|
Your website content is fine on iPad but the navigation and other links are far too small. Mobile devices require a minimum of 30px x 30px for easy finger stabbing. You need to add vertical padding to the navigation blocks. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 11 years ago
|
|
|
Roddy, it seems you recommend 320px wide for Mobile and EverWeb recommends 480px. I don't know what to go with. Does the iPhone 6 or 6 Plus change anything here? Also, since I'm on it, should we follow some sort of naming scheme in EverWeb, such as prefixing or appending each Mobile file with "_M" or "M_"?
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 11 years ago
|
|
|
Try it out for yourself and see which page width gives the better viewing experience. This test site uses the 320px page width… http://mobi.everwebcodebox.com Note that the above site is a sub domain of everwebcodebox.com so all the file paths are prefixed by "mobi". This is different from the EverWeb method and is described here… http://everwebcodebox.com/mobile/design.html Each method has its upside/downside so you need to decide which suits the way in which you publish your website and how your web page design appears on a smart phone. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 11 years ago
|
|
|
@ Christopher I should have given you a little more info about these arbitrary widths for a mobile website. When I use a mobile device it is mainly in portrait mode - unless I'm watching a movie. Therefore I make the viewport width 320px so that visitors can see everything at the size it was created. If you view a 480px wide site in portrait mode, everything becomes squashed down to fit. Movies are shown at full screen anyway so the visitor will naturally turn their device to landscape mode. Mobile slideshows can have a full screen button or can be launched in a separate window which is 480px to be viewed in landscape if that's the orientation of the images. As I have already pointed out, I would be more inclined to create a website specifically for tablets at around 740 to 800px wide and another for smart phones at 320 to 360px wide. Using HTML5 widgets you can create content blocks with superior SEO that can be used on both versions of the site. This demo page illustrates the idea… http://everwebcodebox.com/quasi-responsive/ Reduce the browser window width to see the change from tablet to smart phone view and how the same content blocks are used but repositioned for the different browser widths. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 11 years ago
|
|
|
Thanks for all the info Roddy. I just did some googling and now see that most smartphones are 320px wide (including iPhone 4 through the 5s). However, the iPhone 6 is now 375px wide and the iPhone 6 Plus is 414 px wide. The Galaxy Note is 400px wide. So 320 seems a little small, no? While 480 seems too big. Here's an article that might be of interest to some. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 11 years ago
|
|
|
You could drive yourself insane trying to solve the smart phone page width thing. The only sensible answer is to create a site with dynamic width. In view of your research, 400px seems to be a reasonable compromise but you would need to have a large number of visitors using the latest iPhone model to justify changing an existing one. Even it if were possible to create a responsive design using a drag and drop app, I don't think this is a viable alternative for those with little or no knowledge of the code required to achieve this. You need to understand media queries - or do a helluva lot of trial and error stuff! Before a website is started, you need to consider its purpose, the content type, who is going to view and what type of device. For example, I had a conversation with a local hairdresser who is savvy about internet marketing and has a well established website and Facebook page. I suggested he poll his customers to see what devices they used to check his latest offers and deals. Over 80% use smart phones and most of these don't own a computer. The new mobile version of his website resulted in an increase of sales of around 30% in the first month. I now have the offer of free hair styling for life. This to one who is not known to get more than two haircuts per annum! In your case, where images and videos are the key feature, I would still be inclined to forget about a conventional website. Create one for tablets and another for smart phones using something like 800px for the former and 400px for the latter. Have a full screen option for video and slideshows for clients viewing the larger site on a computer - and those who have the skill & knowledge to turn their mobile device to landscape mode at the appropriate moment!. Given the decrease in computer sales, and the increase in mobile devices, I can't think of too many situations where anybody should create a website wider than 740 to 800px without taking a look at their stats to see who is viewing their site on what device. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |