i have a question about web designing.
there are some ways for design.
CSS or Photoshop.
cSS is clear, my question is not about CSS, but about Photoshop design.
For example this
After design in photoshop when you save the work it makes sllices and converts your template to table cells and keeps each part of the picture in that cells..
but i know that nowdaystables are not usefull for web design, everybody use div and css..
so can u tell me how to export or how to use photoshop to design web pages with div.
I would not use Photoshop for anything other than to create a screenshot-type of graphic that is close to what you are aiming to get to with your web page(s).
For the actual design, start by laying out all of the content in HTML (no CSS). Once all of the content is in there, then you can style the elements to get to the look you want. When styling, the only changes you should be making to the HTML should be to put in IDs and classes to hook your CSS onto. Adding style-oriented elements like <div> and <span> is OK, but should be limited.
Doing the design in this way ensures that you will have a more accessible site, increases the likelyhood of having a more compact site, and will also increase your appeal to search engines.
These tutorials will help you:
http://www.blog.spoongraphics.co.uk/tutorials/encoding-a-photoshop-mockup-into-xhtml-css
Screencast:
http://net.tutsplus.com/articles/news/how-to-convert-a-psd-to-xhtml/
Photoshop software is mainly used for creating layout designs (psd's).
Now a day's everybody using table less designs using div's, almost 80% of HTML pages creating using styles and css only in few areas we have to use graphics (logos, headings with different fonts, images like photography etc) which is not manageable with style and css in that cases we have to work in Photoshop and have to do save for web format as jpeg or png image formats then we have to use this images in html pages with using style sheets.
and mainly div based designs will work with supporting of style sheets everything the layout look and feel we will control with css styles and calling that css as a class names from div's.
Hope this answer will help you a bit.
Thanks
Photoshop is an application for manipulating imagery but it's also packed with tools for building graphics from scratch.In order to explore graphic design within a browser it was only logical to reach for Photoshop, create your visuals, save them as images and use them within a web page.
Related
Our team is working on an effort to improve the accessibility of our mobile application developed with Xamarin. One area we're having trouble tackling is Focus Path (i.e. tab order). Research examples suggest that the focus path should naturally be top down if the layout is created correctly. However, the examples are often simple and not real-world with respect to complex layouts and navigation (or whatever Marketing dreams up). We have several re-usable 'controls' and templates the get injected as part of the layout like main navigation, search, etc. The focus path, or tab order, is all over the place.
Tools that offer live preview/xaml edit only work against the opened xaml file which in many of our cases is just part of the overall xaml that makes up the screen.
Looking for a way to view 'rendered xaml' that makes a up a given screen in a xamarin mobile app. We need to see the final xaml that includes all of the dynamic controls, templates, etc. that get mashed together. This may help us understand what's happening to our focus path.
EDIT: we've found that forcing/setting tabindex does not help.
Is there such a tool or process?
I was using https://www.livexaml.com/ for such a purpose.
I am trying to make my website pages full width but I can't seem to figure out how to do it with my specific shopify theme, Mr. Parker. I think I have to make changes to the stylesheet.css.liquid, but I am struggling to figure it out. Is there a way to make my pages full width in the Mr. Parker theme?
I am a newbie and trying to do this on my own with very little background in this area. Any help is appreciated.
Amy
Hard way:
go learn css , html , js stuff to the end.
Easy way:
i don't know these stuff you said but i know pure CSS and HTML, easy way is to inspect element the page by chrome and check the biggest part of the page, like the <body> tag, then check the style tab and see what is the most top CSS file it's affecting from. change the file and you are ok!
Attention: Front-end developing is a huge field, elements on the page may affect from JavaScript then it could be so much hard for you to change things.
btw its very hard to edit responsive websites for the newbies, cause the elements may affect from multiple lines and codes and by many actions.
I have created two different layouts (with bootstrap) on the same page. One for mobile, one for desktop. Website has different pages with complex structure. Some of blocks should be visible only in desktop and vice-versa.
Here is an example page: (other pages are different, but has the same problems)
Title A, Title N... are links, they:
On desktop: sets content to top block "Text content A" from hidden
red area.
On mobile: just scrolls down to corresponding content.
There is no problems, everything works. But...
I am afraid that website will be blacklisted by Google.
There are too much hidden content - images, links (visible-xs and
etc.)
Content even placed outside the div with overflow:hidden;
Yes, it will be easier to put content on page and just let user scroll on desktop and mobile versions without any hidden content and popovers, but this website needs to be created as designed.
Now i have two different ideas to avoid problems with SEO.
Just create different mobile theme on subdomain.
Use one responsive layout for both desktop and mobile, but avoid hiding content via css - instead hide unnecessary content with jQuery and load additional content with Ajax. (I prefer this but it looks strange)
So, how you usually solve similar tasks?
There are no any problem.Don't worry!
It is natural.Google can crawl both mobile and desktop elements and can detect difference of hidden content from mobile view and desktop view.
Also any hidden contents have not problem for SEO.
Just hidden links and contents for Black-Hat purposes (for example cloaking) are bad for SEO.
So don't worry.Keep your hidden contents and stay in your current way.
Aslo follow this guides for choosing the best methods of designing responsive website:
https://developers.google.com/webmasters/mobile-sites/?hl=en
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/index.html?hl=en
https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=en
And check your site here:
https://www.google.com/webmasters/tools/mobile-friendly/
I recently uploaded custom html and css for one page on my big commerce store.The page is responsive, and mobile optimized. It works on desktops, but is over ridden by the generic mobile theme that is installed when I view it on my phone. How can I stop this page from being over ridden by the mobile version, without disabling the mobile theme completely?
Thanks,
There are 2 methods off the top of my head.
First method
Any HTML file on BigCommerce, with a mobile/responsive theme, has 2 copies of some part of the HTML page. The mobile HTML/CSS is simply triggered by an HTML class mobile on the HTML copy that is there to be only seen on mobile, which contains one copy of relevant HTML (ie, menus, logo, shopping cart icon and link, etc).
Another HTML block has class desktop and is only triggered for certain screen sizes (similar to mobile), and only shows it's desktop version of the HTMl when the screen size conditions are met.
So if screen is small, in your responsive.css file, .mobile is display:none;, while desktop class has all the proper visible CSS.
On the reverse, on desktop-sized screens, the desktop HTML is properly styled, while the mobile class HTML block is display:none.
So, in this first solution, you would simply place a copy of your custom HTMl and style it properly for display on mobile screens. This way, the mobile-styled version will only show up on mobile devices, while the desktop properly-styled version will only show up on dektop size screens. As far as BC goes, I think this is the optimal method.
Second method
You can make a custom template for the page in question. So if it's product.html and you want it custom for some specific product(s), you would create a product-custom.html and place it in your WebDav "/template/Panels" folder.
Now, on your product(s) which must use the new custom HTML, go to their page and scroll to the bottom and you will see a template file selection box, which should say product.html. Change that to your new product-custom.html.
Now, as for the custom file, simply edit the HTML/CSS rules revolving around .desktop and .mobile class (possibly just removing them all together) so that when a page is loaded on a small screen, the CSS rule to hide the desktop version won't apply. At the same time, you should delete the duplicate .mobile class HTML as it will no longer be needed.
This second method is much more flexible but also takes more work and is generally much more messy and requires much more maintenance.
I strongly recommend method #1.
Let me know if this helps and if you have nay other questions.
Google image search seems to do a poor job on a site I run in identifying which image on a page should be indexed. In addition it doesn't seem to link that image with lots of the associated data.
Are there any ways of focusing attention for spiders on particular images and associated data, do they need to be within the same tags, or adjacent on the page?
A few tips:
Use a descriptive name, i.e. "tabby-cat.jpg" instead of "img02396.jpg".
Use alt tags on images.
Use descriptive text on the page and around the image.
Make sure the images are in the generated source, i.e. if you click "View source" in your browser, you see <img> tags.
It's also useful to validate your site at http://validator.w3.org in case there are major errors like missing brackets etc that could prevent a spider from parsing the page. (Note: I wouldn't worry about making everything 100% valid since Google is fine with invalid code)
Images in CSS (i.e. backgrounds) are not indexed AFAIK. However I'd suggest using CSS backgrounds for "design" images (a subtle way of getting Google to ignore site headers, custom borders, shadows, etc).
Nor are any images generated from Javascript.
Make sure you're not blocking images through robots.txt. I know that Joomla does this by default.
Sign up at Google Webmaster Tools, add your site, then allow it to be used in Google's "Image Labeller" game which should help tag images.
All images on a page should be indexed. If they aren't then improve your alt tags and possibly rename the image file. There really isn't anything more you can do since search-engines do not read any other context for the image itself except size. If google thinks the image is a duplicate it won't index it either.
Of course if images really do inherit context from the surrounding page then you could just use less images or move them into CSS.
I think Search robot can not read images as we do, so the simple and must thing you should do to your images is using descriptive names, so that spider could know what this image all about. Second one is using ALT tags on images, put in keywords relating to the images.
Those thing are what I do.